A node-link diagram is a visualization technique where individual data points, or “nodes,” are represented as distinct points, and their relationships are depicted as connecting lines, or “links.” These diagrams are widely used for visualizing networks, such as social connections, organizational charts, or data flow, because they effectively capture relational and structural information. However, traditional node-link diagram representations can pose challenges, particularly for users with visual impairments or those who prefer non-visual interaction methods. In this project, we explore an approach to enhancing diagram accessibility and usability through an interactive tool implemented in React.js and Tone.js.
This project builds on the foundation laid by the system described in “Designing TADA: Touch-and-Audio-based Diagram Access” by Zhao et al. (2023), which introduced an interface enabling users to interact with node-link diagrams using touch gestures and audio feedback¹. While the original implementation utilized technologies in a Unity environment, this iteration adopts a modern web-based stack. By leveraging React.js for frontend development and Tone.js for audio synthesis, this tool is more accessible for developers and opens opportunities for it to be deployable across a wide range of devices and browsers.
The interactions supported by the system—single-finger sweeps, dwell and tap, and dwell and circle —remain core to this design. These gestures facilitate exploration, navigation, and understanding of diagram elements and relationships.
Interactive diagram access tools like this have the potential to transform how individuals perceive and interpret complex diagrams. By moving to a web-based implementation, we aim to make this technology more versatile, scalable, and integrable into broader contexts, ultimately contributing to a more accessible and inclusive digital environment.
[1] Yichun Zhao, Miguel A Nacenta, Mahadeo A. Sukhai, and Sowmya Somanath. 2024. TADA: Making Node-link Diagrams Accessible to Blind and Low-Vision People. In Proceedings of the CHI Conference on Human Factors in Computing Systems (CHI ’24). ACM, New York, NY, USA, Article 45, 20 pages. https://doi.org/10.1145/3613904.3642222