Logo
ScienceStack
Table of Contents
Fetching ...
Sign In

BrainRing: An Interactive Web-Based Tool for Brain Connectivity Chord Diagram Visualization

Xiao Fan, Yi Zhang

Abstract

Visualizing brain functional connectivity (FC) patterns is essential for understanding neural organization, yet existing tools such as Circos and BrainNet Viewer require complex configuration files or proprietary software environments. We present BrainRing, a free, open-source, browser-based interactive tool for generating publication-quality chord diagrams of brain connectivity data. BrainRing requires no installation, backend server, or programming knowledge. Users simply open a single HTML file in any modern browser. The tool supports 8 widely-used brain atlases (Brainnetome 246, AAL-90/116, Schaefer 100/200/400, Power 264, and Dosenbach 160), provides real-time parameter adjustment through an intuitive graphical interface, and offers comprehensive edge management including click-to-connect, per-edge color customization, and Circos link file import. BrainRing supports both Chinese and English interfaces and enables researchers to produce publication-ready SVG and PNG figures with full control over visual styling, all within seconds rather than the minutes-to-hours workflow typical of script-based approaches. BrainRing is freely available at https://github.com/XiuFan719/brain-connectivity-viz with a live demo at https://XiuFan719.github.io/brain-connectivity-viz/.

BrainRing: An Interactive Web-Based Tool for Brain Connectivity Chord Diagram Visualization

Abstract

Visualizing brain functional connectivity (FC) patterns is essential for understanding neural organization, yet existing tools such as Circos and BrainNet Viewer require complex configuration files or proprietary software environments. We present BrainRing, a free, open-source, browser-based interactive tool for generating publication-quality chord diagrams of brain connectivity data. BrainRing requires no installation, backend server, or programming knowledge. Users simply open a single HTML file in any modern browser. The tool supports 8 widely-used brain atlases (Brainnetome 246, AAL-90/116, Schaefer 100/200/400, Power 264, and Dosenbach 160), provides real-time parameter adjustment through an intuitive graphical interface, and offers comprehensive edge management including click-to-connect, per-edge color customization, and Circos link file import. BrainRing supports both Chinese and English interfaces and enables researchers to produce publication-ready SVG and PNG figures with full control over visual styling, all within seconds rather than the minutes-to-hours workflow typical of script-based approaches. BrainRing is freely available at https://github.com/XiuFan719/brain-connectivity-viz with a live demo at https://XiuFan719.github.io/brain-connectivity-viz/.

Paper Structure

This paper contains 15 sections, 2 figures, 2 tables.

Table of Contents

  1. Introduction
  2. Interface Overview
  3. System Design
  4. Architecture
  5. Supported Atlases
  6. Data Input
  7. Features
  8. Visual Customization
  9. Edge Management
  10. Region Reordering
  11. Internationalization
  12. Export
  13. Showcase
  14. Availability
  15. Conclusion

Figures (2)

  • Figure 1: BrainRing interface overview. The application features a three-panel layout: (Left) atlas selection, label configuration, arc color mode, separator settings, manual edge input with click-to-connect mode, data import (FC matrix, edge list, Circos link file), region reorder, and hierarchical region browser; (Center) interactive chord diagram canvas with real-time rendering of the Brainnetome 246 atlas using the Neon color scheme with gap separators; (Right) theme toggle, 6 color presets (including HAH for Circos-compatible per-region coloring), custom background and color depth controls, edge filtering (threshold or Top-N), edge color management, and parameter sliders for ring width, arc padding, line width, font size, rotation, and chart size. A bilingual toggle (CN/EN) is located in the header bar.
  • Figure 2: Representative outputs generated with BrainRing. Four examples illustrating different visual configurations.