СТВОРЕННЯ ІНТЕРАКТИВНИХ ВІЗУАЛІЗАЦІЙ У ВЕБЗАСТОСУНКАХ
DOI:
https://doi.org/10.32782/2415-8151.2025.35.26Ключові слова:
інтерактивна репрезентація, силово-орієнтовані графи, зв’язування даних, інтеграція d3.js, методи кластеризації, редукція розмірностіАнотація
Мета. Метою статті є розроблення методів інтерактивної візуалізації даних в інтерфейсах вебзастосунків на базі силових орієнтовних графів. У статті представлено процес розроблення та впровадження інтерактивної візуалізації даних у вебзастосунках, зосереджено увагу на силових орієнтовних графах як засобі динамічного представлення і аналізу складних наборів даних. Методологія. Основним підходом стало впровадження патерну «вхід – оновлення – вихід», що забезпечує динамічне зв’язування даних з елементами DOM для створення, оновлення та видалення візуальних елементів відповідно до змін у наборі даних. Прикладним методом реалізовано силові орієнтовні графи, де поведінка вузлів моделюється за фізичними принципами. Ураховано сили притягування та відштовхування, які описуються законами Гука та Кулона, для підтримання оптимальних відстаней між вузлами, а також застосовано позиційні сили для утримання графів у межах області перегляду. Результати. Було визначено, що силові орієнтовані графи, що складаються з кількох непересічних підграфів, моделюються з використанням фізичних принципів, які керують поведінкою їхніх елементів. Ці візуалізації врівноважують сили відштовхування та притягування, щоб зберегти просторову чіткість і уникнути накладання вузлів, водночас застосовують позиційні коригування, щоб гарантувати, що всі підграфи залишаються в єдиній формі. У статті доведено необхідність інтеграції бібліотеки D3.js, яка полегшує пов’язування даних з об’єктною моделлю документа (DOM). Ця інтеграція базується на шаблоні «вхід – оновлення – вихід», що дозволяє динамічно створювати, змінювати та видаляти візуальні елементи для відображення нових наборів даних. Шаблон гарантує, що кожен елемент даних унікально представлений і постійно оновлюється у відповідь на зміни, досягаючи надійного узгодження даних із візуалізацією. Наукова новизна полягає в тому, що було визначено порядок застосування передових методів кластеризації для вдосконаленої організації даних. Високовимірні вкладання, отримані з моделей обробки природної мови, було використано для захоплення семантичних і контекстних зв’язків у наборах даних. Ці вкладання додатково оптимізовано за допомогою методів зменшення розмірності, як-от t-SNE та UMAP, які зберігають значущі зв’язки, водночас спрощують структуру даних. Доведено, що отримані кластери необхідно представляти візуально, щоб підкреслити семантичну зв’язність, покращити інтерпретацію та допомогти у виявленні прихованих шаблонів. Практична значущість. Щоб продемонструвати практичну корисність запропонованої методології, її було застосовано до набору даних електронної комерції із семінару електронної комерції “SIGIR 2021”. Цей набір даних охоплює мільйони взаємодій і обширні метадані, забезпечує реальний контекст для оцінювання ефективності візуалізації. Цей підхід дає змогу кластеризувати продукти на основі спільних характеристик, полегшує розуміння поведінки споживачів і їхнього ставлення до продуктів.
Посилання
Barker T., Westfall J. Pro Data Visualization Using R and JavaScript, Analyze and Visualize Key Data on the Web. Berkeley : Apress, CA, 2022. 274 p. DOI: 10.1007/978-1-4842-7202-2.
Cheong S.H., Si Y.W. Snapshot visualization of complex graphs with force-directed algorithms. arXiv : website. 2022. DOI: 10.48550/arXiv.2203.16867.
Cheong S.H., Si Y.W., Wong R. Online forcedirected algorithms for visualization of dynamic graphs. Information Sciences. 2021. № 556. DOI: 10.1016/j.ins.2020.12.069.
Embarak O. Data Visualization: Analyze Data to Create Visualizations for BI Systems. Data Analysis and Visualization Using Python. 2018. P. 293–342. DOI: 10.1007/978-1-4842-4109-7_7.
Gunathilaka M., Perera N., Weerasingha P. Application of neural network for automatic symbol recognition in production of electronic navigation charts from paper charts. Journal of Navigation. 2024. P. 1–8. DOI: 10.1017/S0373463324000201.
Iglesias M. Pro D3.js: Use D.js to create maintainable, modular, and testable charts. 2019. DOI: 10.1007/978-1-4842-5203-1.
Kadijevich D.M. Web Application Development Achievement: Clarifying the Relationship Between Visual GUI Design and Textual Programming. Towards a Collaborative Society Through Creative Learning. WCCE 2022. IFIP Advances in Information and Communication Technology / T. Keane et al. (eds). 2023. Vol 685. Springer, Cham. Vol. 685. https://doi.org/10.1007/978-3-031-43393-1_50.
Kimunge J. Project 33: Architecting highly dynamic visualizations using React, Redux, D3.js, and RxJs. Part 1. Video. 2024. DOI: 10.13140/RG.2.2.17724.86407.
Kumar G. Animated web application. International Journal for Research in Applied Science and Engineering Technology. 2024. № 12. P. 442–446. DOI: 10.22214/ijraset.2024.64992.
Kuo L., Chang T., Lai C.C. Application of visual colors in dynamic web page design through affective cognition. Multimedia Tools and Applications. 2022. № 81. DOI: 10.1007/s11042–021–11732-z.
Li Q., Ni L., Bai L. Display space and distribution visualization of intelligent algorithms and 3D interactive imaging technology. Computing and Informatics. 2024. № 43. P. 993–1011. DOI: 10.31577/cai_2024_4_993.
Lu J., Si Y.W. Clustering-based forcedirected algorithms for 3D graph visualization. The Journal of Supercomputing. 2020. № 76. DOI: 10.1007/s11227-020’03226-w.
Mathaisel D. Using data visualizations as information communication tools during a crisis: a critical review. Journal of Information, Communication and Ethics in Society. 2024. № 22. DOI: 10.1108/JICES-06-2023-0080.
Moreb M. Design and implementation of software engineering for modern web applications. 2024. DOI: 10.4018/978-1-6684-4844-1.
Morth E., Bruckner S., Smit N. ScrollyVis: Interactive Visual Authoring of Guided Dynamic Narratives for Scientific Scrollytelling. IEEE Transactions on Visualization and Computer Graphics. 2022. P. 1–12. DOI: 10.1109/TVCG.2022.3205769.
Nehls S., Lüde J. Interactive Datenvisualisierung im Web mit D3.js. 2020. DOI: 10.1007/978-3-658-29562-2_6.
Suh A., Hajij M., Wang B., Scheidegger C., Rosen P. Persistent homology guided force-directed graph layouts. IEEE Transactions on Visualization and Computer Graphics. 2019. P. 1–1. DOI: 10.1109/TVCG.2019.2934802.
Wang S., Wang S., Fan Y., Li X., Liu Y. Leveraging large vision language model for better automatic web GUI testing. 2024. DOI: 10.48550/arXiv.2410.12157.
Zhang Q. The impact of interactive data visualization on decision-making in business intelligence. Advances in Economics, Management and Political Sciences. 2024. № 87. P. 166–171. DOI: 10.54254/2754-1169/87/20241056.
Zhong F., Xue M., Zhang J., Zhang F., Ban R., Deussen O., Wang Y. Force-directed graph layouts revisited: A new force based on the T-distribution. 2023. DOI: 10.48550/arXiv.2303.03964.










