CREATING INTERACTIVE VISUALIZATIONS IN WEB-APPLICATIONS

Abstract

Purpose. The purpose of the article is to develop methods for interactive data visualization in web application interfaces based on force-oriented graphs. The article presents the process of developing and implementing interactive data visualization in web applications, focusing on force-oriented graphs as a means of dynamic representation and analysis of complex data sets. Methodology. The main approach was the implementation of the “input – update – output” pattern, which provides dynamic binding of data to DOM elements to create, update and delete visual elements according to changes in the data set. As an applied method, force-oriented graphs are implemented, where the behavior of nodes is modeled according to physical principles. The forces of attraction and repulsion, described by Hooke’s and Coulomb’s laws, are taken into account to maintain optimal distances between nodes, and positional forces are applied to keep graphs within the viewing area. Results. It was determined that force-oriented graphs consisting of multiple disjoint subgraphs are modeled using physical principles that govern the behavior of their constituent elements. These visualizations balance repulsive and attractive forces to maintain spatial clarity and avoid node overlap, while applying positional adjustments to ensure that all subgraphs remain in a single view. The paper demonstrates the need for integration with the D3.js library, which facilitates data binding to the Document Object Model (DOM). This integration is based on the “input – update – output” pattern, which allows for the dynamic creation, modification, and deletion of visual elements to represent new data sets. The pattern ensures that each data element is uniquely represented and is constantly updated in response to changes, achieving robust agreement between data and visualization. The scientific novelty lies in the fact that the order of application of advanced clustering methods for improved data organization was determined. Highdimensional embeddings derived from natural language processing models were used to capture semantic and contextual relationships in the datasets. These embeddings were further optimized using dimensionality reduction methods such as t-SNE and UMAP, which preserve meaningful relationships while simplifying the data structure. It was shown that the resulting clusters need to be represented visually to highlight semantic connectivity, improve interpretation, and aid in the discovery of hidden patterns. Practical relevance. To demonstrate the practical utility of the proposed methodology, it was applied to the e-commerce dataset from the SIGIR 2021 e-commerce workshop. This dataset encompasses millions of interactions and extensive metadata, providing real-world context for evaluating the effectiveness of visualization. This approach enables the clustering of products based on shared characteristics, facilitating the understanding of consumer behavior and product relationships.