<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>AI | NINE Lab</title><link>https://nine-lab.gitlab.io/tag/ai/</link><atom:link href="https://nine-lab.gitlab.io/tag/ai/index.xml" rel="self" type="application/rss+xml"/><description>AI</description><generator>Hugo Blox Builder (https://hugoblox.com)</generator><language>en-us</language><lastBuildDate>Tue, 02 Dec 2025 00:00:00 +0000</lastBuildDate><image><url>https://nine-lab.gitlab.io/media/logo_hu17126917060779117060.png</url><title>AI</title><link>https://nine-lab.gitlab.io/tag/ai/</link></image><item><title>Annotation Garden Initiative: Collaborative Annotation for Neuroscience</title><link>https://nine-lab.gitlab.io/research/neuroinformatics/annotation-garden/</link><pubDate>Tue, 02 Dec 2025 00:00:00 +0000</pubDate><guid>https://nine-lab.gitlab.io/research/neuroinformatics/annotation-garden/</guid><description>&lt;h2 id="overview">Overview&lt;/h2>
&lt;p>The &lt;strong>Annotation Garden Initiative (AGI)&lt;/strong> establishes an open infrastructure for collaborative, multi-layered annotation of stimuli used in neuroscience research. Building on emerging standards including &lt;a href="https://github.com/bids-standard/bids-specification/pull/2022" target="_blank" rel="noopener">Stim-BIDS (BEP044)&lt;/a> and &lt;a href="https://hedtags.org" target="_blank" rel="noopener">HED specifications&lt;/a>, AGI addresses the critical gap between increasingly complex naturalistic stimuli and the need for standardized, reusable annotations.&lt;/p>
&lt;p>Through GitHub-based version control and modern web interfaces, AGI enables researchers to share, refine, and build upon stimulus annotations across studies, transforming how we document and analyze brain responses to complex sensory experiences.&lt;/p>
&lt;hr>
&lt;h2 id="the-problem-were-solving">The Problem We&amp;rsquo;re Solving&lt;/h2>
&lt;p>Modern neuroscience increasingly employs naturalistic stimuli, from the 73,000 COCO images prepared for the Natural Scenes Dataset to the 2-hour audiovisual experience of Forrest Gump and the diverse movie-watching paradigms in the Child Mind Institute&amp;rsquo;s Healthy Brain Network. Each dataset represents thousands of hours of wasted researcher time as labs independently annotate the same stimuli: scene boundaries, emotional valence, semantic content, acoustic features, narrative structure.&lt;/p>
&lt;p>Yet these annotations remain siloed within individual studies, limiting reproducibility and preventing the field from building cumulative knowledge about brain-behavior relationships.&lt;/p>
&lt;p>Current approaches fragment across:&lt;/p>
&lt;ul>
&lt;li>&lt;strong>Tools&lt;/strong>: ELAN, Praat, custom scripts&lt;/li>
&lt;li>&lt;strong>Formats&lt;/strong>: CSV, JSON, proprietary&lt;/li>
&lt;li>&lt;strong>Storage&lt;/strong>: Lab servers, supplementary materials, forgotten hard drives&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="architecture">Architecture&lt;/h2>
&lt;p>Each stimulus becomes a Git repository with branches serving as annotation layers. Different perspectives (scene boundaries, emotional arcs, object detection) can be developed independently and merged through standard Git workflows.&lt;/p>
&lt;h3 id="repository-structure">Repository Structure&lt;/h3>
&lt;p>Each stimulus repository follows a consistent structure aligned with stimuli-BIDS:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">stimulus-name/
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">├── stimuli/
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">│ └── [stimulus files or pointers]
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">├── annotations/
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">│ ├── visual-saliency/
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">│ │ ├── events.tsv
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">│ │ └── events.json
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">│ ├── emotional-ratings/
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">│ └── scene-boundaries/
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">├── README.md
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">└── LICENSE
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;hr>
&lt;h2 id="flagship-datasets">Flagship Datasets&lt;/h2>
&lt;h3 id="natural-scenes-dataset-nsd">Natural Scenes Dataset (NSD)&lt;/h3>
&lt;p>73,000 COCO images prepared for this dataset, with each of 8 subjects viewing approximately 10,000 distinct images during 7T fMRI scanning. AGI hosts annotation layers including: object detection, scene categorization, emotional ratings, and visual saliency maps.&lt;/p>
&lt;h3 id="forrest-gump-studyforrestorg">Forrest Gump (studyforrest.org)&lt;/h3>
&lt;p>The 2-hour movie stimulus has published annotations: 870 shot boundaries, 2,500+ spoken sentences with speaker identification, emotion characterizations, and frame-wise perceptual features. AGI unifies these layers into HED-compatible formats.&lt;/p>
&lt;h3 id="hbn-movies">HBN Movies&lt;/h3>
&lt;p>The diverse movie collection from the Child Mind Institute (Despicable Me, The Present, Pixar shorts) serves as the foundation for the NeurIPS 2025 EEG Foundation Challenge. AGI handles copyright complexities through pointer-based architecture.&lt;/p>
&lt;hr>
&lt;h2 id="current-status">Current Status&lt;/h2>
&lt;p>The platform at &lt;a href="https://annotation.garden" target="_blank" rel="noopener">annotation.garden&lt;/a> hosts:&lt;/p>
&lt;ul>
&lt;li>VLM-generated annotations for NSD Shared 1000 images (see &lt;a href="https://nine-lab.gitlab.io/research/neuroinformatics/image-annotation/">Image Annotation Tool&lt;/a>)&lt;/li>
&lt;li>Infrastructure for hosting and versioning stimulus annotations&lt;/li>
&lt;li>Plans for HED integration to standardize semantic annotations&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="tools-and-resources">Tools and Resources&lt;/h2>
&lt;h3 id="image-annotation-tool">Image Annotation Tool&lt;/h3>
&lt;p>The &lt;a href="https://annotation.garden/image-annotation" target="_blank" rel="noopener">Image Annotation&lt;/a> tool provides a web-based interface for VLM-powered image annotation, starting with the Natural Scenes Dataset.&lt;/p>
&lt;h3 id="standards-integration">Standards Integration&lt;/h3>
&lt;ul>
&lt;li>&lt;strong>BIDS&lt;/strong>: Brain Imaging Data Structure; Stim-BIDS (BEP044) for standardized annotation format&lt;/li>
&lt;li>&lt;strong>HED&lt;/strong>: Hierarchical Event Descriptors for semantic annotation framework&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="access-information">Access Information&lt;/h2>
&lt;h3 id="links">Links&lt;/h3>
&lt;ul>
&lt;li>&lt;strong>Website&lt;/strong>: &lt;a href="https://annotation.garden" target="_blank" rel="noopener">annotation.garden&lt;/a>&lt;/li>
&lt;li>&lt;strong>GitHub Organization&lt;/strong>: &lt;a href="https://github.com/Annotation-Garden" target="_blank" rel="noopener">github.com/Annotation-Garden&lt;/a>&lt;/li>
&lt;li>&lt;strong>Image Annotation Tool&lt;/strong>: &lt;a href="https://annotation.garden/image-annotation" target="_blank" rel="noopener">annotation.garden/image-annotation&lt;/a>&lt;/li>
&lt;/ul>
&lt;h3 id="license">License&lt;/h3>
&lt;ul>
&lt;li>&lt;strong>License&lt;/strong>: CC-BY-NC-SA 4.0&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="references">References&lt;/h2>
&lt;ul>
&lt;li>Allen, E. J., et al. (2021). A massive 7T fMRI dataset to bridge cognitive neuroscience and artificial intelligence. Nature Neuroscience, 25(1), 116-126.&lt;/li>
&lt;li>Hanke, M., et al. (2014). A high-resolution 7-Tesla fMRI dataset from complex natural stimulation with an audio movie. Scientific Data, 1, 140003.&lt;/li>
&lt;li>Shirazi, S. Y., et al. (2024). HBN-EEG: The FAIR implementation of the Healthy Brain Network electroencephalography dataset. bioRxiv.&lt;/li>
&lt;/ul>
&lt;hr>
&lt;p>© 2025 Seyed Yahya Shirazi&lt;/p></description></item><item><title>Image Annotation Tool: VLM-Based Annotation for Neuroscience</title><link>https://nine-lab.gitlab.io/research/neuroinformatics/image-annotation/</link><pubDate>Tue, 02 Dec 2025 00:00:00 +0000</pubDate><guid>https://nine-lab.gitlab.io/research/neuroinformatics/image-annotation/</guid><description>&lt;h2 id="overview">Overview&lt;/h2>
&lt;p>The &lt;strong>Image Annotation Tool&lt;/strong> generates annotations for static image datasets using open-source Vision Language Models (VLMs). We have used this tool to create an annotation bank for the NSD Shared 1000 images, the subset of images viewed by all 8 subjects in the &lt;a href="http://naturalscenesdataset.org/" target="_blank" rel="noopener">Natural Scenes Dataset&lt;/a> study.&lt;/p>
&lt;p>The tool runs VLMs locally via OLLAMA. The current annotation bank includes outputs from six models: Qwen2.5-VL (7B, 32B), Gemma3 (4B, 12B, 27B), and Mistral-Small3.2 (24B). Quality assessment across models is in progress.&lt;/p>
&lt;hr>
&lt;h2 id="key-features">Key Features&lt;/h2>
&lt;h3 id="models-used">Models Used&lt;/h3>
&lt;p>All annotations generated locally via OLLAMA:&lt;/p>
&lt;ul>
&lt;li>&lt;strong>Qwen2.5-VL&lt;/strong>: 7B and 32B parameter versions&lt;/li>
&lt;li>&lt;strong>Gemma3&lt;/strong>: 4B, 12B, and 27B parameter versions&lt;/li>
&lt;li>&lt;strong>Mistral-Small3.2&lt;/strong>: 24B parameters&lt;/li>
&lt;/ul>
&lt;h3 id="multi-prompt-annotation">Multi-Prompt Annotation&lt;/h3>
&lt;p>Each image is annotated using multiple prompts (general description, foreground/background, entities and interactions, mood and emotions) across all models to capture different aspects of the scene.&lt;/p>
&lt;h3 id="hed-integration-planned">HED Integration (Planned)&lt;/h3>
&lt;p>Integration with &lt;a href="https://hedtags.org" target="_blank" rel="noopener">Hierarchical Event Descriptors (HED)&lt;/a> is the next development priority:&lt;/p>
&lt;ul>
&lt;li>Mapping VLM annotations to HED tags&lt;/li>
&lt;li>Validation against HED schema&lt;/li>
&lt;li>Export in BIDS-compliant events.tsv format&lt;/li>
&lt;/ul>
&lt;h3 id="bids-compliance">BIDS Compliance&lt;/h3>
&lt;p>Annotations follow stimuli-BIDS specifications:&lt;/p>
&lt;ul>
&lt;li>Standardized events.tsv format&lt;/li>
&lt;li>JSON sidecars with annotation schema&lt;/li>
&lt;li>Compatible with neuroimaging datasets&lt;/li>
&lt;/ul>
&lt;h3 id="web-dashboard">Web Dashboard&lt;/h3>
&lt;p>Interactive visualization with AGI branding, real-time annotation preview, and easy navigation through large datasets.&lt;/p>
&lt;hr>
&lt;h2 id="annotation-types">Annotation Types&lt;/h2>
&lt;p>The tool supports multiple annotation types for comprehensive image description:&lt;/p>
&lt;h3 id="general-description">General Description&lt;/h3>
&lt;p>Detailed natural language descriptions of image content, setting, main elements, colors, lighting, and overall composition.&lt;/p>
&lt;h3 id="object-detection">Object Detection&lt;/h3>
&lt;p>Identification and localization of objects within images, compatible with COCO categories.&lt;/p>
&lt;h3 id="scene-categorization">Scene Categorization&lt;/h3>
&lt;p>Classification of scenes into semantic categories for cross-dataset analysis.&lt;/p>
&lt;h3 id="emotional-ratings">Emotional Ratings&lt;/h3>
&lt;p>Valence and arousal ratings for affective neuroscience applications.&lt;/p>
&lt;hr>
&lt;h2 id="natural-scenes-dataset-nsd">Natural Scenes Dataset (NSD)&lt;/h2>
&lt;p>The tool is optimized for the &lt;strong>NSD Shared 1000 Dataset&lt;/strong>, featuring 1,000 images viewed by all 8 subjects in the Natural Scenes Dataset study. This shared subset enables:&lt;/p>
&lt;ul>
&lt;li>Cross-subject analysis of neural representations&lt;/li>
&lt;li>Benchmark annotations for model comparison&lt;/li>
&lt;li>Foundation for the broader 73,000 image collection&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="architecture">Architecture&lt;/h2>
&lt;h3 id="backend">Backend&lt;/h3>
&lt;ul>
&lt;li>&lt;strong>FastAPI&lt;/strong>: Python API for VLM orchestration&lt;/li>
&lt;li>&lt;strong>OLLAMA&lt;/strong>: Local model serving on GPU&lt;/li>
&lt;/ul>
&lt;h3 id="frontend">Frontend&lt;/h3>
&lt;ul>
&lt;li>&lt;strong>Next.js&lt;/strong>: Modern React framework&lt;/li>
&lt;li>&lt;strong>AGI Branding&lt;/strong>: Consistent design with Annotation Garden&lt;/li>
&lt;li>&lt;strong>Real-time Updates&lt;/strong>: Live annotation preview&lt;/li>
&lt;/ul>
&lt;h3 id="storage">Storage&lt;/h3>
&lt;ul>
&lt;li>JSON files with comprehensive metrics&lt;/li>
&lt;li>Database support for large datasets&lt;/li>
&lt;li>Version control through Git&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="performance-benchmarks">Performance Benchmarks&lt;/h2>
&lt;p>All performance metrics were generated using an &lt;strong>NVIDIA GeForce RTX 4090 GPU&lt;/strong> with OLLAMA for local model inference.&lt;/p>
&lt;h3 id="annotation-tools">Annotation Tools&lt;/h3>
&lt;p>Powerful CLI tools for post-processing annotations:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">from&lt;/span> &lt;span class="nn">image_annotation.utils&lt;/span> &lt;span class="kn">import&lt;/span> &lt;span class="n">reorder_annotations&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">remove_model&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">export_to_csv&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># Reorder model annotations by quality&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">reorder_annotations&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;annotations/&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="s2">&amp;#34;best_model&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;second_best&amp;#34;&lt;/span>&lt;span class="p">])&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># Remove underperforming models&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">remove_model&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;annotations/&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;poor_model&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># Export for analysis&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">export_to_csv&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;annotations/&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="s2">&amp;#34;results.csv&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="n">include_metrics&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="kc">True&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;hr>
&lt;h2 id="quick-start">Quick Start&lt;/h2>
&lt;h3 id="prerequisites">Prerequisites&lt;/h3>
&lt;ul>
&lt;li>Python 3.11+&lt;/li>
&lt;li>Node.js 18+&lt;/li>
&lt;li>OLLAMA&lt;/li>
&lt;li>GPU with sufficient VRAM for target models&lt;/li>
&lt;/ul>
&lt;h3 id="installation">Installation&lt;/h3>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-bash" data-lang="bash">&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># Clone from Annotation Garden&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">git clone https://github.com/Annotation-Garden/image-annotation.git
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">cd&lt;/span> image-annotation
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># Python environment&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">conda create -n torch-312 &lt;span class="nv">python&lt;/span>&lt;span class="o">=&lt;/span>3.12
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">conda activate torch-312
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">pip install -e .
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># Frontend&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">cd&lt;/span> frontend &lt;span class="o">&amp;amp;&amp;amp;&lt;/span> npm install
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;h3 id="usage">Usage&lt;/h3>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-bash" data-lang="bash">&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># Start OLLAMA (for local models)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">ollama serve
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># Run frontend dashboard&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">cd&lt;/span> frontend &lt;span class="o">&amp;amp;&amp;amp;&lt;/span> npm run dev
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="c1"># Visit http://localhost:3000&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;hr>
&lt;h2 id="access-information">Access Information&lt;/h2>
&lt;h3 id="links">Links&lt;/h3>
&lt;ul>
&lt;li>&lt;strong>Live Tool&lt;/strong>: &lt;a href="https://annotation.garden/image-annotation" target="_blank" rel="noopener">annotation.garden/image-annotation&lt;/a>&lt;/li>
&lt;li>&lt;strong>GitHub Repository&lt;/strong>: &lt;a href="https://github.com/Annotation-Garden/image-annotation" target="_blank" rel="noopener">github.com/Annotation-Garden/image-annotation&lt;/a>&lt;/li>
&lt;li>&lt;strong>Parent Project&lt;/strong>: &lt;a href="https://annotation.garden" target="_blank" rel="noopener">annotation.garden&lt;/a>&lt;/li>
&lt;/ul>
&lt;h3 id="license">License&lt;/h3>
&lt;ul>
&lt;li>&lt;strong>License&lt;/strong>: CC-BY-NC-SA 4.0&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="related-projects">Related Projects&lt;/h2>
&lt;ul>
&lt;li>&lt;strong>&lt;a href="https://annotation.garden" target="_blank" rel="noopener">Annotation Garden Initiative&lt;/a>&lt;/strong>: Parent organization for collaborative annotation&lt;/li>
&lt;li>&lt;strong>&lt;a href="https://github.com/hed-standard/hed-mcp" target="_blank" rel="noopener">HED-MCP&lt;/a>&lt;/strong>: Model Context Protocol for HED integration&lt;/li>
&lt;li>&lt;strong>&lt;a href="http://naturalscenesdataset.org/" target="_blank" rel="noopener">Natural Scenes Dataset&lt;/a>&lt;/strong>: Source of stimulus images&lt;/li>
&lt;/ul>
&lt;hr>
&lt;p>© 2025 Seyed Yahya Shirazi&lt;/p></description></item><item><title>NEMAR Dataset Citations Analysis Dashboard</title><link>https://nine-lab.gitlab.io/research/neuroinformatics/nemar-insights/</link><pubDate>Fri, 01 Aug 2025 00:00:00 +0000</pubDate><guid>https://nine-lab.gitlab.io/research/neuroinformatics/nemar-insights/</guid><description>
&lt;iframe src="https://nine-lab.gitlab.io/dataset_citations_dashboard.html" title="NEMAR dataset citations dashboard" width="100%" height="1100" style="border:0;" loading="lazy">&lt;/iframe>
&lt;h2 id="nemar-dataset-citations-analysis">NEMAR Dataset Citations Analysis&lt;/h2>
&lt;p>The &lt;strong>NeuroElectroMagnetic Data Archive and Tools Resource (NEMAR)&lt;/strong> is an integrated data, tools, and compute resource that serves as a gateway to human neuroelectromagnetic data (EEG, MEG, iEEG) shared through OpenNeuro. By providing seamless access to high-quality datasets alongside high-performance computing resources, NEMAR enables researchers to discover, assess, and process neurophysiological data without the burden of large downloads.&lt;/p>
&lt;p>This dashboard analyzes citation patterns within the NEMAR ecosystem to reveal how open data sharing drives scientific collaboration and research impact in human neuroscience.&lt;/p>
&lt;h3 id="what-youll-find">What You&amp;rsquo;ll Find&lt;/h3>
&lt;p>&lt;strong>Citation Network Analysis&lt;/strong> - Discover how datasets are co-cited and identify research clusters within the neuroscience community.&lt;/p>
&lt;p>&lt;strong>Temporal Trends&lt;/strong> - Track the evolution of research themes and citation growth over time.&lt;/p>
&lt;p>&lt;strong>Research Impact Assessment&lt;/strong> - Identify which datasets generate the most influential research outcomes.&lt;/p>
&lt;p>&lt;strong>Collaboration Patterns&lt;/strong> - Understand how NEMAR facilitates interdisciplinary research and cross-institutional partnerships.&lt;/p>
&lt;h3 id="about-nemars-impact">About NEMAR&amp;rsquo;s Impact&lt;/h3>
&lt;p>NEMAR addresses a critical challenge in neuroscience: ensuring that valuable neuroelectromagnetic data, collected at considerable expense and effort, remains accessible and useful to the broader research community. By combining data discovery tools, quality assessment features, and direct integration with high-performance computing resources through the Neuroscience Gateway, NEMAR exemplifies how integrated data-tools-compute resources (DATCORs) can accelerate scientific discovery.&lt;/p>
&lt;p>The citation analysis below demonstrates the real-world impact of this open science approach on human neuroscience research.&lt;/p>
&lt;hr>
&lt;p>&lt;strong>Technical Note&lt;/strong>: This analysis uses network analysis and natural language processing to examine citation patterns across research publications utilizing NEMAR datasets. All visualizations are interactive—explore the data to uncover insights about open neuroscience collaboration.&lt;/p></description></item><item><title>HBN Dataset Insights Dashboard</title><link>https://nine-lab.gitlab.io/research/neuroinformatics/hbn-insights/</link><pubDate>Mon, 21 Jul 2025 00:00:00 +0000</pubDate><guid>https://nine-lab.gitlab.io/research/neuroinformatics/hbn-insights/</guid><description>&lt;h2 id="overview">Overview&lt;/h2>
&lt;p>The &lt;strong>Healthy Brain Network (HBN) EEG dataset&lt;/strong> represents one of the largest open-access developmental neuroimaging initiatives, with &lt;strong>3,602 participants&lt;/strong> aged 5-22 years across &lt;strong>11 dataset releases&lt;/strong>. This dashboard provides comprehensive insights into participant demographics, mental health patterns, and data availability to help researchers understand and utilize this valuable resource.&lt;/p>
&lt;h3 id="related-hbn-resources">Related HBN Resources&lt;/h3>
&lt;p>This dashboard complements our other HBN content:&lt;/p>
&lt;ul>
&lt;li>&lt;strong>&lt;a href="https://nine-lab.gitlab.io/research/neuroinformatics/hbn/">HBN-EEG paper and dataset downloads&lt;/a>&lt;/strong> - Read the FAIR implementation and BIDS formatting of the HBN dataset, and access all 11 releases with technical documentation&lt;/li>
&lt;/ul>
&lt;p>Each resource addresses a different aspect of the HBN-EEG dataset: the &lt;strong>paper&lt;/strong> details the scientific methodology, the &lt;strong>data portal&lt;/strong> provides access to downloads and technical specs, and this &lt;strong>dashboard&lt;/strong> enables data exploration.&lt;/p>
&lt;script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0">&lt;/script>
&lt;style>
.dashboard-container {
max-width: 1200px;
margin: 2rem auto;
}
/* Tab Navigation */
.tab-container {
margin-bottom: 2rem;
}
.tab-nav {
display: flex;
border-bottom: 2px solid #e2e8f0;
margin-bottom: 2rem;
}
.tab-button {
background: none;
border: none;
padding: 1rem 2rem;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
color: #64748b;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
}
.tab-button.active {
color: #2563eb;
border-bottom-color: #2563eb;
}
.tab-button:hover {
color: #2563eb;
background: #f8fafc;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* Controls */
.controls-section {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 1rem;
margin-bottom: 2rem;
}
.control-group {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem;
}
.control-label {
font-weight: 600;
color: #374151;
min-width: 120px;
}
.control-button {
background: #2563eb;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 6px;
cursor: pointer;
font-size: 0.875rem;
transition: background 0.3s ease;
}
.control-button:hover {
background: #1d4ed8;
}
.control-button.inactive {
background: #9ca3af;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.metric-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 1.5rem;
text-align: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.metric-number {
font-size: 2.5rem;
font-weight: bold;
color: #2563eb;
margin-bottom: 0.5rem;
}
.metric-label {
font-size: 0.875rem;
color: #64748b;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.chart-container {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.chart-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
color: #1e293b;
display: flex;
align-items: center;
justify-content: space-between;
}
.chart-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.chart-canvas {
position: relative;
height: 300px;
}
.per-release-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 1rem;
}
.pie-chart-container {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 1.5rem;
text-align: center;
height: 280px;
display: flex;
flex-direction: column;
}
.pie-chart-title {
font-weight: 600;
color: #374151;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.pie-chart {
flex: 1;
max-height: 200px;
}
/* Enhanced dropdown styling */
#releaseSelector {
background: #fff;
border: 2px solid #e2e8f0;
border-radius: 8px;
padding: 0.75rem 1rem;
font-size: 1rem;
font-weight: 500;
color: #374151;
min-width: 180px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
#releaseSelector:hover {
border-color: #2563eb;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#releaseSelector:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.pie-chart-title {
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #374151;
}
.pie-chart {
width: 100%;
height: 200px;
}
@media (max-width: 768px) {
.chart-grid {
grid-template-columns: 1fr;
}
.chart-canvas {
height: 250px;
}
.tab-nav {
flex-direction: column;
}
.tab-button {
text-align: left;
}
.control-group {
flex-direction: column;
align-items: flex-start;
}
}
&lt;/style>
&lt;div class="dashboard-container">
&lt;!-- Key Metrics -->
&lt;div class="metrics-grid">
&lt;div class="metric-card">
&lt;div class="metric-number">3,602&lt;/div>
&lt;div class="metric-label">Total Participants&lt;/div>
&lt;/div>
&lt;div class="metric-card">
&lt;div class="metric-number">11&lt;/div>
&lt;div class="metric-label">Dataset Releases&lt;/div>
&lt;/div>
&lt;div class="metric-card">
&lt;div class="metric-number">5-22&lt;/div>
&lt;div class="metric-label">Age Range (years)&lt;/div>
&lt;/div>
&lt;div class="metric-card">
&lt;div class="metric-number">13&lt;/div>
&lt;div class="metric-label">EEG Task Paradigms&lt;/div>
&lt;/div>
&lt;/div>
&lt;!-- Tab Navigation -->
&lt;div class="tab-container">
&lt;div class="tab-nav">
&lt;button class="tab-button active">Dataset Overview&lt;/button>
&lt;/div>
&lt;!-- Overview Tab -->
&lt;div id="overview-tab" class="tab-content active">
&lt;!-- Demographics Charts -->
&lt;div class="chart-grid">
&lt;div class="chart-container">
&lt;div class="chart-title">
Age Distribution
&lt;button id="sexHueToggle" class="control-button" onclick="toggleSexHue()">
Show Sex Breakdown
&lt;/button>
&lt;/div>
&lt;div class="chart-canvas">
&lt;canvas id="ageChart">&lt;/canvas>
&lt;/div>
&lt;/div>
&lt;div class="chart-container">
&lt;div class="chart-title">Sex Distribution&lt;/div>
&lt;div class="chart-canvas">
&lt;canvas id="sexChart">&lt;/canvas>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;!-- Task Availability -->
&lt;div class="chart-container">
&lt;div class="chart-title">EEG Task Data Availability&lt;/div>
&lt;div class="chart-canvas">
&lt;canvas id="taskChart">&lt;/canvas>
&lt;/div>
&lt;/div>
&lt;!-- Mental Health Insights -->
&lt;div class="chart-grid">
&lt;div class="chart-container">
&lt;div class="chart-title">Mental Health Metrics Correlation&lt;/div>
&lt;div class="chart-canvas">
&lt;canvas id="correlationChart">&lt;/canvas>
&lt;/div>
&lt;/div>
&lt;div class="chart-container">
&lt;div class="chart-title">Mental Health Patterns by Age Group&lt;/div>
&lt;div class="chart-canvas">
&lt;canvas id="mentalHealthAgeChart">&lt;/canvas>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;!-- Per-Release Analysis Section (Main Content) -->
&lt;div id="perReleaseAnalysisSection" style="margin-top: 3rem;">
&lt;h3>Release-Specific Detailed Analysis&lt;/h3>
&lt;div style="margin-bottom: 2rem;">
&lt;label for="mainReleaseSelector" style="font-weight: 600; margin-right: 1rem;">Select Release:&lt;/label>
&lt;select id="mainReleaseSelector" onchange="updateMainReleaseAnalysis()" style="
background: #fff;
border: 2px solid #e2e8f0;
border-radius: 8px;
padding: 0.5rem 1rem;
font-size: 1rem;
cursor: pointer;
">
&lt;option value="R1">Release 1&lt;/option>
&lt;option value="R2">Release 2&lt;/option>
&lt;option value="R3">Release 3&lt;/option>
&lt;option value="R4">Release 4&lt;/option>
&lt;option value="R5">Release 5&lt;/option>
&lt;option value="R6">Release 6&lt;/option>
&lt;option value="R7">Release 7&lt;/option>
&lt;option value="R8">Release 8&lt;/option>
&lt;option value="R9">Release 9&lt;/option>
&lt;option value="R10">Release 10&lt;/option>
&lt;option value="R11">Release 11&lt;/option>
&lt;option value="R12" style="background: #fef3c7; font-weight: 600;">R12 (Test Dataset)&lt;/option>
&lt;/select>
&lt;/div>
&lt;!-- Release Insights Card -->
&lt;div id="releaseInsightsCard" style="
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
">
&lt;div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;">
&lt;div style="text-align: center;">
&lt;div style="font-size: 2.5rem; font-weight: bold; margin-bottom: 0.5rem;" id="releaseParticipantCount">-&lt;/div>
&lt;div style="font-size: 0.9rem; opacity: 0.9;">Total Participants&lt;/div>
&lt;/div>
&lt;div style="text-align: center;">
&lt;div style="font-size: 2.5rem; font-weight: bold; margin-bottom: 0.5rem;" id="releaseMHSample">-&lt;/div>
&lt;div style="font-size: 0.9rem; opacity: 0.9;">w/ Mental Health Score&lt;/div>
&lt;/div>
&lt;div style="text-align: center;">
&lt;div style="font-size: 2.5rem; font-weight: bold; margin-bottom: 0.5rem;" id="releaseGenderSplit">-&lt;/div>
&lt;div style="font-size: 0.9rem; opacity: 0.9;">Sex Distribution (M/F)%&lt;/div>
&lt;/div>
&lt;div style="text-align: center;">
&lt;div style="font-size: 2.5rem; font-weight: bold; margin-bottom: 0.5rem;" id="releaseAgeRange">-&lt;/div>
&lt;div style="font-size: 0.9rem; opacity: 0.9;">Age Range (yrs)&lt;/div>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;!-- New Per-Release Demographics Section -->
&lt;div class="chart-grid" style="margin-bottom: 2rem;">
&lt;div class="chart-container">
&lt;div class="chart-title">
&lt;span id="releaseAgeTitle">Age Distribution&lt;/span>
&lt;button id="releaseSexHueToggle" class="control-button" onclick="toggleReleaseSexHue()">
Show Sex Breakdown
&lt;/button>
&lt;/div>
&lt;div class="chart-canvas">
&lt;canvas id="releaseAgeChart">&lt;/canvas>
&lt;/div>
&lt;/div>
&lt;div class="chart-container">
&lt;div class="chart-title">Mental Health Correlations with Age&lt;/div>
&lt;div class="chart-canvas">
&lt;canvas id="releaseMHCorrelationChart">&lt;/canvas>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;!-- Task Status Distribution Header -->
&lt;h4 style="margin-bottom: 1rem; color: #374151;">Task Status Distribution&lt;/h4>
&lt;div class="per-release-grid" id="mainTaskPieChartsGrid" style="
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 1rem;
">
&lt;!-- Main pie charts will be generated here -->
&lt;/div>
&lt;/div>
&lt;!-- Data Status Legend -->
&lt;div style="margin-top: 3rem; margin-bottom: 2rem;">
&lt;h4 style="margin-bottom: 1rem; color: #374151;">Data Status Categories&lt;/h4>
&lt;div style="
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 1.5rem;
">
&lt;div style="display: flex; align-items: center; gap: 0.75rem;">
&lt;div style="
width: 30px;
height: 20px;
background: #86efac;
border: 2px solid #22c55e;
border-radius: 50%;
">&lt;/div>
&lt;div>
&lt;strong>Available&lt;/strong>: Data and event markers available, passes quality checks
&lt;/div>
&lt;/div>
&lt;div style="display: flex; align-items: center; gap: 0.75rem;">
&lt;div style="
width: 30px;
height: 20px;
background: #fde68a;
border: 2px solid #f59e0b;
border-radius: 50%;
">&lt;/div>
&lt;div>
&lt;strong>Caution&lt;/strong>: Data exists but may have quality issues, look for quality reports.
&lt;/div>
&lt;/div>
&lt;div style="display: flex; align-items: center; gap: 0.75rem;">
&lt;div style="
width: 20px;
height: 20px;
background: #fca5a5;
border: 2px solid #ef4444;
border-radius: 50%;
">&lt;/div>
&lt;div>
&lt;strong>Unavailable&lt;/strong>: Task is not available.
&lt;/div>
&lt;/div>
&lt;div style="display: flex; align-items: center; gap: 0.75rem;">
&lt;div style="
width: 25px;
height: 20px;
background: #d1d5db;
border: 2px solid #6b7280;
border-radius: 50%;
">&lt;/div>
&lt;div>
&lt;strong>No Event&lt;/strong>: Task is available but no event markers were found.
&lt;/div>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;script>
// Global variables
let hbnData = null;
let ageChart, sexChart, taskChart, correlationChart, mentalHealthAgeChart;
let releaseAgeChart, releaseMHCorrelationChart;
let currentSexHue = false;
let currentReleaseSexHue = false;
let taskPieCharts = [];
let mainTaskPieCharts = [];
let r12AgeChart, r12TaskChart, r12MHCorrelationChart;
// Load data from external JSON file
async function loadDashboardData() {
try {
const response = await fetch('/hbn_dashboard_data.json');
hbnData = await response.json();
console.log('Dashboard data loaded successfully');
initializeCharts();
initializeR12Section();
} catch (error) {
console.error('Error loading dashboard data:', error);
// Fallback to basic data if file loading fails
hbnData = {
overview: {
ageDistribution: { bins: [], total: [], male: [], female: [] },
sexDistribution: { M: 0, F: 0 },
taskAvailability: {},
mentalHealthCorrelations: [],
mentalHealthByAge: {}
},
releases: {}
};
initializeCharts();
}
// Per-release charts will be created when user switches to that tab
}
// Chart configurations
const chartConfig = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
},
tooltip: {
backgroundColor: 'rgba(0,0,0,0.8)',
titleColor: '#fff',
bodyColor: '#fff',
borderColor: '#fff',
borderWidth: 1,
cornerRadius: 6
}
}
};
// === INTERACTIVE FEATURES ===
function toggleSexHue() {
currentSexHue = !currentSexHue;
const button = document.getElementById('sexHueToggle');
if (currentSexHue) {
button.textContent = 'Hide Sex Breakdown';
button.classList.remove('inactive');
updateAgeChart(true);
} else {
button.textContent = 'Show Sex Breakdown';
button.classList.add('inactive');
updateAgeChart(false);
}
}
function updateAgeChart(showSexHue) {
if (!hbnData) return;
ageChart.destroy();
const ageCtx = document.getElementById('ageChart').getContext('2d');
const ageData = hbnData.overview.ageDistribution;
if (showSexHue) {
ageChart = new Chart(ageCtx, {
type: 'bar',
data: {
labels: ageData.bins,
datasets: [
{
label: 'Male',
data: ageData.male,
backgroundColor: 'rgba(37, 99, 235, 0.7)',
borderColor: 'rgba(37, 99, 235, 1)',
borderWidth: 1
},
{
label: 'Female',
data: ageData.female,
backgroundColor: 'rgba(16, 185, 129, 0.7)',
borderColor: 'rgba(16, 185, 129, 1)',
borderWidth: 1
}
]
},
options: {
...chartConfig,
scales: {
x: { stacked: true, title: { display: true, text: 'Age' } },
y: { stacked: true, beginAtZero: true, title: { display: true, text: 'Number of Participants' } }
}
}
});
} else {
ageChart = new Chart(ageCtx, {
type: 'bar',
data: {
labels: ageData.bins,
datasets: [{
label: 'Participants',
data: ageData.total,
backgroundColor: 'rgba(37, 99, 235, 0.7)',
borderColor: 'rgba(37, 99, 235, 1)',
borderWidth: 1
}]
},
options: {
...chartConfig,
scales: {
y: { beginAtZero: true, title: { display: true, text: 'Number of Participants' } },
x: { title: { display: true, text: 'Age' } }
}
}
});
}
}
// === PER-RELEASE ANALYSIS ===
function updateReleaseAnalysis() {
console.log('=== updateReleaseAnalysis called ===');
const selectedRelease = document.getElementById('releaseSelector').value || 'R1';
console.log('Selected release:', selectedRelease);
console.log('Creating charts for release:', selectedRelease);
createReleaseDemographicsChart(selectedRelease);
createReleaseQualityChart(selectedRelease);
createTaskPieCharts(selectedRelease);
}
// === NEW RELEASE TOGGLE ===
function toggleReleaseSexHue() {
currentReleaseSexHue = !currentReleaseSexHue;
const button = document.getElementById('releaseSexHueToggle');
if (currentReleaseSexHue) {
button.textContent = 'Hide Sex Breakdown';
button.classList.remove('inactive');
updateReleaseAgeChart(true);
} else {
button.textContent = 'Show Sex Breakdown';
button.classList.add('inactive');
updateReleaseAgeChart(false);
}
}
function updateReleaseAgeChart(showSexHue) {
const selectedRelease = document.getElementById('mainReleaseSelector').value || 'R1';
const releaseData = hbnData.releases[selectedRelease];
if (!releaseData || !releaseData.demographics || !releaseData.demographics.age_distribution) return;
if (releaseAgeChart) {
releaseAgeChart.destroy();
}
const ctx = document.getElementById('releaseAgeChart').getContext('2d');
const ageData = releaseData.demographics.age_distribution;
// Use orange colors for R12 test dataset
const isTestDataset = releaseData.is_test_dataset;
const maleColor = isTestDataset ? 'rgba(251, 146, 60, 0.7)' : 'rgba(37, 99, 235, 0.7)';
const maleBorderColor = isTestDataset ? 'rgba(251, 146, 60, 1)' : 'rgba(37, 99, 235, 1)';
const femaleColor = isTestDataset ? 'rgba(254, 215, 170, 0.7)' : 'rgba(16, 185, 129, 0.7)';
const femaleBorderColor = isTestDataset ? 'rgba(254, 215, 170, 1)' : 'rgba(16, 185, 129, 1)';
if (showSexHue) {
releaseAgeChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ageData.bins,
datasets: [
{
label: 'Male',
data: ageData.male,
backgroundColor: maleColor,
borderColor: maleBorderColor,
borderWidth: 1
},
{
label: 'Female',
data: ageData.female,
backgroundColor: femaleColor,
borderColor: femaleBorderColor,
borderWidth: 1
}
]
},
options: {
...chartConfig,
scales: {
x: { stacked: true, title: { display: true, text: 'Age' } },
y: { stacked: true, beginAtZero: true, title: { display: true, text: 'Number of Participants' } }
}
}
});
} else {
releaseAgeChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ageData.bins,
datasets: [{
label: 'Participants',
data: ageData.total,
backgroundColor: isTestDataset ? 'rgba(251, 146, 60, 0.7)' : 'rgba(37, 99, 235, 0.7)',
borderColor: isTestDataset ? 'rgba(251, 146, 60, 1)' : 'rgba(37, 99, 235, 1)',
borderWidth: 1
}]
},
options: {
...chartConfig,
scales: {
y: { beginAtZero: true, title: { display: true, text: 'Number of Participants' } },
x: { title: { display: true, text: 'Age' } }
}
}
});
}
}
// === MAIN RELEASE ANALYSIS ===
function updateMainReleaseAnalysis() {
const selectedRelease = document.getElementById('mainReleaseSelector').value || 'R1';
console.log('=== Updating main release analysis for:', selectedRelease, '===');
if (!hbnData || !hbnData.releases) {
console.log('Data not ready yet');
return;
}
// Apply special theme for R12 test dataset
const sectionEl = document.getElementById('perReleaseAnalysisSection');
const releaseData = hbnData.releases[selectedRelease];
if (releaseData &amp;&amp; releaseData.is_test_dataset) {
// Apply orange theme for R12
sectionEl.style.background = 'linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%)';
sectionEl.style.border = '2px solid #fb923c';
sectionEl.style.borderRadius = '12px';
sectionEl.style.padding = '2rem';
// Update chart containers to have orange border
setTimeout(() => {
const chartContainers = sectionEl.querySelectorAll('.chart-container');
chartContainers.forEach(container => {
container.style.border = '2px solid #fb923c';
});
const chartTitles = sectionEl.querySelectorAll('.chart-title');
chartTitles.forEach(title => {
title.style.color = '#92400e';
});
// Add test dataset badge if not already present
let badge = document.getElementById('testDatasetBadge');
if (!badge &amp;&amp; releaseData.is_test_dataset) {
badge = document.createElement('div');
badge.id = 'testDatasetBadge';
badge.style.cssText = `
display: inline-block;
background: #fb923c;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1rem;
`;
badge.textContent = 'TEST DATASET - Not included in overall statistics';
const h3 = sectionEl.querySelector('h3');
h3.parentNode.insertBefore(badge, h3.nextSibling);
}
}, 100);
} else {
// Reset to default theme for regular releases
sectionEl.style.background = '';
sectionEl.style.border = '';
sectionEl.style.borderRadius = '';
sectionEl.style.padding = '';
sectionEl.style.marginTop = '3rem';
// Reset chart containers
setTimeout(() => {
const chartContainers = sectionEl.querySelectorAll('.chart-container');
chartContainers.forEach(container => {
container.style.border = '';
});
const chartTitles = sectionEl.querySelectorAll('.chart-title');
chartTitles.forEach(title => {
title.style.color = '';
});
// Remove test dataset badge if present
const badge = document.getElementById('testDatasetBadge');
if (badge) {
badge.remove();
}
}, 100);
}
updateReleaseInsights(selectedRelease);
updateReleaseAgeChart(currentReleaseSexHue);
updateReleaseMHCorrelations(selectedRelease);
createMainTaskPieCharts(selectedRelease);
}
function updateReleaseInsights(release) {
const releaseData = hbnData.releases[release];
if (!releaseData) return;
// Update participant count
document.getElementById('releaseParticipantCount').textContent = releaseData.participant_count.toLocaleString();
// Update sex distribution
const malePercent = Math.round((releaseData.sex_distribution.M / releaseData.participant_count) * 100);
const femalePercent = Math.round((releaseData.sex_distribution.F / releaseData.participant_count) * 100);
document.getElementById('releaseGenderSplit').textContent = `${malePercent}/${femalePercent}`;
// Update age range
document.getElementById('releaseAgeRange').textContent = `${releaseData.age_stats.min}-${releaseData.age_stats.max}`;
// Update mental health sample size
if (releaseData.mental_health &amp;&amp; releaseData.mental_health.sample_size) {
document.getElementById('releaseMHSample').textContent = releaseData.mental_health.sample_size.toLocaleString();
} else {
document.getElementById('releaseMHSample').textContent = 'N/A';
}
// Update age chart title
document.getElementById('releaseAgeTitle').textContent = `${release} Age Distribution`;
console.log(`✅ Updated insights for ${release}: ${releaseData.participant_count} participants`);
}
function updateReleaseMHCorrelations(release) {
const releaseData = hbnData.releases[release];
if (!releaseData || !releaseData.mental_health || !releaseData.mental_health.age_correlations) {
if (releaseMHCorrelationChart) {
releaseMHCorrelationChart.destroy();
}
return;
}
if (releaseMHCorrelationChart) {
releaseMHCorrelationChart.destroy();
}
const ctx = document.getElementById('releaseMHCorrelationChart').getContext('2d');
const correlations = releaseData.mental_health.age_correlations;
const metrics = ['p_factor', 'attention', 'internalizing', 'externalizing'];
const correlationValues = metrics.map(m => correlations[m].correlation_with_age);
// Use orange colors for R12 test dataset
const isTestDataset = releaseData.is_test_dataset;
const positiveColor = isTestDataset ? 'rgba(251, 146, 60, 0.7)' : 'rgba(37, 99, 235, 0.7)';
const positiveBorder = isTestDataset ? 'rgba(251, 146, 60, 1)' : 'rgba(37, 99, 235, 1)';
const negativeColor = isTestDataset ? 'rgba(254, 215, 170, 0.7)' : 'rgba(239, 68, 68, 0.7)';
const negativeBorder = isTestDataset ? 'rgba(254, 215, 170, 1)' : 'rgba(239, 68, 68, 1)';
releaseMHCorrelationChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['P-Factor', 'Attention', 'Internalizing', 'Externalizing'],
datasets: [{
label: 'Correlation with Age',
data: correlationValues,
backgroundColor: correlationValues.map(v => v > 0 ? positiveColor : negativeColor),
borderColor: correlationValues.map(v => v > 0 ? positiveBorder : negativeBorder),
borderWidth: 2
}]
},
options: {
...chartConfig,
scales: {
y: {
beginAtZero: true,
min: -0.5,
max: 0.5,
title: { display: true, text: 'Correlation Coefficient' }
},
x: { title: { display: true, text: 'Mental Health Metrics' } }
},
plugins: {
...chartConfig.plugins,
tooltip: {
callbacks: {
label: function(context) {
return `r = ${context.parsed.y.toFixed(3)} (n=${releaseData.mental_health.sample_size})`;
}
}
}
}
}
});
}
function createMainTaskPieCharts(release) {
console.log('Creating main pie charts for:', release);
const grid = document.getElementById('mainTaskPieChartsGrid');
grid.innerHTML = ''; // Clear existing charts
// Destroy existing pie charts
mainTaskPieCharts.forEach(chart => chart.destroy());
mainTaskPieCharts = [];
const releaseData = hbnData.releases[release];
if (!releaseData || !releaseData.task_status) {
grid.innerHTML = '&lt;p>No data available for this release.&lt;/p>';
return;
}
Object.keys(releaseData.task_status).forEach(task => {
const container = document.createElement('div');
container.className = 'pie-chart-container';
container.style.cssText = `
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 1.5rem;
text-align: center;
height: 320px;
display: flex;
flex-direction: column;
`;
const title = document.createElement('div');
title.style.cssText = `
font-weight: 600;
color: #374151;
margin-bottom: 1rem;
font-size: 0.9rem;
`;
title.textContent = task.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
const canvas = document.createElement('canvas');
canvas.style.cssText = 'flex: 1; max-height: 240px;';
canvas.id = `main-pie-${task}-${release}`;
container.appendChild(title);
container.appendChild(canvas);
grid.appendChild(container);
const taskData = releaseData.task_status[task];
const total = taskData.available + taskData.caution + taskData.unavailable + taskData.noevent;
if (total > 0) {
const chart = new Chart(canvas.getContext('2d'), {
type: 'doughnut',
data: {
labels: ['Available', 'Caution', 'Unavailable', 'No Event'],
datasets: [{
data: [taskData.available, taskData.caution, taskData.unavailable, taskData.noevent],
backgroundColor: ['#86efac', '#fde68a', '#fca5a5', '#d1d5db'],
borderColor: ['#22c55e', '#f59e0b', '#ef4444', '#6b7280'],
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: 'bottom',
labels: {
padding: 8,
font: { size: 10 },
usePointStyle: true,
pointStyle: 'circle'
}
},
tooltip: {
callbacks: {
label: function(context) {
const percentage = ((context.parsed / total) * 100).toFixed(1);
return context.label + ': ' + context.parsed + ' (' + percentage + '%)';
}
}
}
}
}
});
mainTaskPieCharts.push(chart);
}
});
console.log('✅ Main task pie charts created successfully!');
}
function createReleaseDemographicsChart(release) {
console.log('=== Creating demographics chart for:', release, '===');
const releaseData = hbnData.releases[release];
const sexData = releaseData.sex_distribution;
const ageStats = releaseData.age_stats;
// Destroy existing chart
if (window.releaseDemographicsChart) {
window.releaseDemographicsChart.destroy();
}
const ctx = document.getElementById('releaseDemographicsChart').getContext('2d');
window.releaseDemographicsChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Male', 'Female'],
datasets: [{
data: [sexData.M, sexData.F],
backgroundColor: ['rgba(37, 99, 235, 0.8)', 'rgba(16, 185, 129, 0.8)'],
borderColor: ['rgba(37, 99, 235, 1)', 'rgba(16, 185, 129, 1)'],
borderWidth: 2
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: `${release} Demographics (${releaseData.participant_count} participants)`,
font: { size: 14, weight: 'bold' }
},
legend: {
position: 'bottom',
labels: { padding: 15, font: { size: 12 } }
},
tooltip: {
callbacks: {
label: function(context) {
const total = sexData.M + sexData.F;
const percentage = ((context.parsed / total) * 100).toFixed(1);
return context.label + ': ' + context.parsed + ' (' + percentage + '%)';
},
afterBody: function() {
return [`Age: ${ageStats.mean}±${ageStats.std} years`, `Range: ${ageStats.min}-${ageStats.max} years`];
}
}
}
}
}
});
console.log('✅ Demographics chart created successfully!');
}
function createReleaseQualityChart(release) {
console.log('=== Creating quality chart for:', release, '===');
const releaseData = hbnData.releases[release];
const taskNames = Object.keys(releaseData.task_status);
const availabilityRates = taskNames.map(task => {
const taskData = releaseData.task_status[task];
const total = taskData.available + taskData.caution + taskData.unavailable + taskData.noevent;
return total > 0 ? ((taskData.available / total) * 100).toFixed(1) : 0;
});
// Destroy existing chart
if (window.releaseQualityChart) {
window.releaseQualityChart.destroy();
}
const ctx = document.getElementById('releaseQualityChart').getContext('2d');
window.releaseQualityChart = new Chart(ctx, {
type: 'bar',
data: {
labels: taskNames.slice(0, 6).map(name => name.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())),
datasets: [{
label: 'Data Availability (%)',
data: availabilityRates.slice(0, 6),
backgroundColor: availabilityRates.slice(0, 6).map(rate =>
rate >= 70 ? 'rgba(34, 197, 94, 0.7)' :
rate >= 50 ? 'rgba(251, 191, 36, 0.7)' :
'rgba(239, 68, 68, 0.7)'
),
borderColor: availabilityRates.slice(0, 6).map(rate =>
rate >= 70 ? 'rgba(34, 197, 94, 1)' :
rate >= 50 ? 'rgba(251, 191, 36, 1)' :
'rgba(239, 68, 68, 1)'
),
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
max: 100,
title: { display: true, text: 'Availability (%)' }
},
x: {
ticks: { maxRotation: 45, font: { size: 10 } },
title: { display: true, text: 'Tasks' }
}
},
plugins: {
title: {
display: true,
text: `${release} Data Quality Overview`,
font: { size: 14, weight: 'bold' }
},
legend: { display: false }
}
}
});
console.log('✅ Quality chart created successfully!');
}
function createTaskPieCharts(release) {
if (!hbnData || !hbnData.releases) return;
const grid = document.getElementById('taskPieChartsGrid');
grid.innerHTML = ''; // Clear existing charts
// Destroy existing pie charts
taskPieCharts.forEach(chart => chart.destroy());
taskPieCharts = [];
const releaseData = hbnData.releases[release];
if (!releaseData || !releaseData.task_status) {
grid.innerHTML = '&lt;p>No data available for this release.&lt;/p>';
return;
}
Object.keys(releaseData.task_status).forEach(task => {
const container = document.createElement('div');
container.className = 'pie-chart-container';
const title = document.createElement('div');
title.className = 'pie-chart-title';
title.textContent = task.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
const canvas = document.createElement('canvas');
canvas.className = 'pie-chart';
canvas.id = `pie-${task}-${release}`;
container.appendChild(title);
container.appendChild(canvas);
grid.appendChild(container);
const taskData = releaseData.task_status[task];
const total = taskData.available + taskData.caution + taskData.unavailable + taskData.noevent;
if (total > 0) {
const chart = new Chart(canvas.getContext('2d'), {
type: 'doughnut',
data: {
labels: ['Available', 'Caution', 'Unavailable', 'No Event'],
datasets: [{
data: [taskData.available, taskData.caution, taskData.unavailable, taskData.noevent],
backgroundColor: ['#86efac', '#fde68a', '#fca5a5', '#d1d5db'],
borderColor: ['#22c55e', '#f59e0b', '#ef4444', '#6b7280'],
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: 'bottom',
labels: {
padding: 8,
font: { size: 10 },
usePointStyle: true,
pointStyle: 'circle'
}
},
tooltip: {
callbacks: {
label: function(context) {
const percentage = ((context.parsed / total) * 100).toFixed(1);
return context.label + ': ' + context.parsed + ' (' + percentage + '%)';
}
}
}
}
}
});
taskPieCharts.push(chart);
}
});
}
// === R12 TEST DATASET ===
function initializeR12Section() {
if (!hbnData || !hbnData.r12_test_dataset) return;
const r12Data = hbnData.r12_test_dataset;
// Update R12 metrics
document.getElementById('r12Participants').textContent = r12Data.metadata.participant_count;
document.getElementById('r12AgeRange').textContent =
`${r12Data.demographics.age_stats.min.toFixed(0)}-${r12Data.demographics.age_stats.max.toFixed(0)}`;
const malePercent = Math.round((r12Data.demographics.sex_distribution.M / r12Data.metadata.participant_count) * 100);
const femalePercent = Math.round((r12Data.demographics.sex_distribution.F / r12Data.metadata.participant_count) * 100);
document.getElementById('r12SexDist').textContent = `${malePercent}/${femalePercent}`;
// R12 Age Distribution Chart
const r12AgeCtx = document.getElementById('r12AgeChart').getContext('2d');
const r12AgeData = r12Data.demographics.age_distribution;
r12AgeChart = new Chart(r12AgeCtx, {
type: 'bar',
data: {
labels: r12AgeData.bins,
datasets: [{
label: 'Participants',
data: r12AgeData.total,
backgroundColor: 'rgba(251, 146, 60, 0.7)',
borderColor: 'rgba(251, 146, 60, 1)',
borderWidth: 1
}]
},
options: {
...chartConfig,
scales: {
y: { beginAtZero: true, title: { display: true, text: 'Number of Participants' } },
x: { title: { display: true, text: 'Age' } }
}
}
});
// R12 Task Availability Chart
const r12TaskCtx = document.getElementById('r12TaskChart').getContext('2d');
const taskNames = Object.keys(r12Data.task_availability);
const availabilityRates = taskNames.map(task => {
const taskData = r12Data.task_availability[task];
const total = taskData.available + taskData.caution + taskData.unavailable + taskData.noevent;
return total > 0 ? (taskData.available / total * 100) : 0;
});
r12TaskChart = new Chart(r12TaskCtx, {
type: 'bar',
data: {
labels: taskNames.map(name => name.replace(/([A-Z])/g, ' $1').trim()),
datasets: [{
label: 'Availability Rate (%)',
data: availabilityRates,
backgroundColor: 'rgba(251, 146, 60, 0.7)',
borderColor: 'rgba(251, 146, 60, 1)',
borderWidth: 1
}]
},
options: {
...chartConfig,
scales: {
y: { beginAtZero: true, max: 100, title: { display: true, text: 'Availability (%)' } },
x: {
ticks: { maxRotation: 45 },
title: { display: true, text: 'EEG Tasks' }
}
}
}
});
// R12 Mental Health Correlations Chart
if (r12Data.mental_health &amp;&amp; r12Data.mental_health.age_correlations) {
const r12MHCtx = document.getElementById('r12MHCorrelationChart').getContext('2d');
const correlations = r12Data.mental_health.age_correlations;
const metrics = ['p_factor', 'attention', 'internalizing', 'externalizing'];
const correlationValues = metrics.map(m => correlations[m].correlation_with_age);
r12MHCorrelationChart = new Chart(r12MHCtx, {
type: 'bar',
data: {
labels: ['P-Factor', 'Attention', 'Internalizing', 'Externalizing'],
datasets: [{
label: 'Correlation with Age',
data: correlationValues,
backgroundColor: correlationValues.map(v => v > 0 ? 'rgba(251, 146, 60, 0.7)' : 'rgba(146, 64, 14, 0.7)'),
borderColor: correlationValues.map(v => v > 0 ? 'rgba(251, 146, 60, 1)' : 'rgba(146, 64, 14, 1)'),
borderWidth: 2
}]
},
options: {
...chartConfig,
scales: {
y: {
beginAtZero: true,
min: -0.5,
max: 0.5,
title: { display: true, text: 'Correlation Coefficient' }
},
x: { title: { display: true, text: 'Mental Health Metrics' } }
},
plugins: {
...chartConfig.plugins,
tooltip: {
callbacks: {
label: function(context) {
return `r = ${context.parsed.y.toFixed(3)} (n=${r12Data.mental_health.sample_size})`;
}
}
}
}
}
});
}
}
// === CHART INITIALIZATION ===
function initializeCharts() {
if (!hbnData) return;
// Age Distribution Chart (initially without sex hue)
const ageCtx = document.getElementById('ageChart').getContext('2d');
const ageData = hbnData.overview.ageDistribution;
ageChart = new Chart(ageCtx, {
type: 'bar',
data: {
labels: ageData.bins,
datasets: [{
label: 'Participants',
data: ageData.total,
backgroundColor: 'rgba(37, 99, 235, 0.7)',
borderColor: 'rgba(37, 99, 235, 1)',
borderWidth: 1
}]
},
options: {
...chartConfig,
scales: {
y: { beginAtZero: true, title: { display: true, text: 'Number of Participants' } },
x: { title: { display: true, text: 'Age' } }
}
}
});
// Sex Distribution Chart
const sexCtx = document.getElementById('sexChart').getContext('2d');
const sexData = hbnData.overview.sexDistribution;
sexChart = new Chart(sexCtx, {
type: 'doughnut',
data: {
labels: ['Male', 'Female'],
datasets: [{
data: [sexData.M, sexData.F],
backgroundColor: ['rgba(37, 99, 235, 0.8)', 'rgba(16, 185, 129, 0.8)'],
borderColor: ['rgba(37, 99, 235, 1)', 'rgba(16, 185, 129, 1)'],
borderWidth: 2
}]
},
options: {
...chartConfig,
plugins: {
...chartConfig.plugins,
tooltip: {
...chartConfig.plugins.tooltip,
callbacks: {
label: function(context) {
const total = sexData.M + sexData.F;
const percentage = ((context.parsed / total) * 100).toFixed(1);
return context.label + ': ' + context.parsed + ' (' + percentage + '%)';
}
}
}
}
}
});
// Task Availability Chart
const taskCtx = document.getElementById('taskChart').getContext('2d');
const taskData = hbnData.overview.taskAvailability;
const taskNames = Object.keys(taskData);
const taskRates = Object.values(taskData);
taskChart = new Chart(taskCtx, {
type: 'bar',
data: {
labels: taskNames.map(name => name.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())),
datasets: [{
label: 'Availability Rate (%)',
data: taskRates,
backgroundColor: taskRates.map(rate =>
rate >= 70 ? 'rgba(34, 197, 94, 0.7)' :
rate >= 50 ? 'rgba(251, 191, 36, 0.7)' :
'rgba(239, 68, 68, 0.7)'
),
borderColor: taskRates.map(rate =>
rate >= 70 ? 'rgba(34, 197, 94, 1)' :
rate >= 50 ? 'rgba(251, 191, 36, 1)' :
'rgba(239, 68, 68, 1)'
),
borderWidth: 1
}]
},
options: {
...chartConfig,
scales: {
y: { beginAtZero: true, max: 100, title: { display: true, text: 'Data Availability (%)' } },
x: {
ticks: { maxRotation: 45 },
title: { display: true, text: 'EEG Tasks' }
}
}
}
});
// Enhanced Correlation Matrix with proper labels
const correlationCtx = document.getElementById('correlationChart').getContext('2d');
if (!hbnData || !hbnData.overview.mentalHealthCorrelations) return;
const correlationData = hbnData.overview.mentalHealthCorrelations;
const labels = correlationData[0]; // First row contains labels
const matrix = correlationData.slice(1); // Data rows
const scatterData = [];
matrix.forEach((row, i) => {
row.forEach((value, j) => {
if (typeof value === 'number') {
// Set diagonal correlations to 0 for better visualization (instead of 1.0)
const corrValue = (i === j) ? 0 : value;
scatterData.push({
x: j,
y: labels.length - 1 - i, // Flip Y-axis to match matrix layout
correlation: corrValue,
xLabel: labels[j],
yLabel: labels[i]
});
}
});
});
correlationChart = new Chart(correlationCtx, {
type: 'scatter',
data: {
datasets: [{
label: 'Correlation',
data: scatterData,
backgroundColor: scatterData.map(d => {
const abs = Math.abs(d.correlation);
const minAlpha = 0.3; // Minimum visibility
const alpha = minAlpha + abs * (1 - minAlpha); // Scale from minAlpha to 1.0
if (d.correlation > 0) return `rgba(37, 99, 235, ${alpha})`;
else return `rgba(239, 68, 68, ${alpha})`;
}),
borderColor: scatterData.map(d => {
if (d.correlation > 0) return 'rgba(37, 99, 235, 0.8)';
else return 'rgba(239, 68, 68, 0.8)';
}),
borderWidth: 1,
pointRadius: scatterData.map(d => Math.abs(d.correlation) * 15 + 6)
}]
},
options: {
...chartConfig,
scales: {
x: {
type: 'linear',
min: -0.8, max: labels.length - 0.2,
position: 'bottom',
ticks: {
stepSize: 1,
color: '#374151',
font: { size: 11, weight: '600' },
maxRotation: 45,
minRotation: 0,
padding: 15,
callback: function(value) {
// Show labels at each integer position
const index = Math.round(value);
if (index >= 0 &amp;&amp; index &lt; labels.length) {
return labels[index] || '';
}
return '';
}
},
grid: {
display: false,
color: 'rgba(0,0,0,0.1)'
},
title: { display: true, text: 'Mental Health Metrics', font: { size: 12, weight: 'bold' } }
},
y: {
type: 'linear',
min: -0.8, max: labels.length - 0.2,
ticks: {
stepSize: 1,
color: '#374151',
font: { size: 11, weight: '600' },
padding: 15,
callback: function(value) {
// Show labels at each integer position, flipped for matrix layout
const index = Math.round(value);
if (index >= 0 &amp;&amp; index &lt; labels.length) {
const labelIndex = labels.length - 1 - index;
return labels[labelIndex] || '';
}
return '';
}
},
grid: {
display: false,
color: 'rgba(0,0,0,0.1)'
}
}
},
plugins: {
...chartConfig.plugins,
legend: {
display: false
},
tooltip: {
...chartConfig.plugins.tooltip,
callbacks: {
label: function(context) {
const data = context.raw;
return `${data.yLabel} vs ${data.xLabel}: ${data.correlation.toFixed(3)}`;
}
}
}
}
}
});
// Mental Health by Age Group
const mentalHealthAgeCtx = document.getElementById('mentalHealthAgeChart').getContext('2d');
const mentalHealthData = hbnData.overview.mentalHealthByAge;
const ageGroups = Object.keys(mentalHealthData);
const metrics2 = ['p_factor', 'attention', 'internalizing', 'externalizing'];
mentalHealthAgeChart = new Chart(mentalHealthAgeCtx, {
type: 'line',
data: {
labels: ageGroups,
datasets: metrics2.map((metric, index) => ({
label: metric.replace('_', '-').replace(/\b\w/g, l => l.toUpperCase()),
data: ageGroups.map(age => mentalHealthData[age][metric]),
borderColor: ['rgba(37, 99, 235, 1)', 'rgba(16, 185, 129, 1)', 'rgba(251, 191, 36, 1)', 'rgba(239, 68, 68, 1)'][index],
backgroundColor: ['rgba(37, 99, 235, 0.1)', 'rgba(16, 185, 129, 0.1)', 'rgba(251, 191, 36, 0.1)', 'rgba(239, 68, 68, 0.1)'][index],
borderWidth: 3,
fill: false,
tension: 0.4,
pointRadius: 5
}))
},
options: {
...chartConfig,
scales: {
y: { title: { display: true, text: 'Standardized Score' } },
x: { title: { display: true, text: 'Age Group' } }
}
}
});
// Initialize main release analysis immediately
setTimeout(() => {
const mainSelector = document.getElementById('mainReleaseSelector');
if (mainSelector) {
mainSelector.value = 'R1';
console.log('Main selector set to R1');
}
console.log('Initializing release insights and charts...');
updateMainReleaseAnalysis();
}, 100);
}
// Initialize dashboard when page loads
document.addEventListener('DOMContentLoaded', function() {
loadDashboardData();
});
// Add a manual trigger for testing (can be called from browser console)
window.testPerReleaseCharts = function() {
console.log('=== MANUAL TEST: Per-Release Charts ===');
console.log('hbnData available:', !!hbnData);
console.log('Canvas elements:');
console.log('- releaseDemographicsChart:', !!document.getElementById('releaseDemographicsChart'));
console.log('- releaseQualityChart:', !!document.getElementById('releaseQualityChart'));
if (hbnData &amp;&amp; hbnData.releases) {
console.log('Available releases:', Object.keys(hbnData.releases));
console.log('Attempting to create charts for R1...');
createReleaseDemographicsChart('R1');
createReleaseQualityChart('R1');
}
};
// Test main charts
window.testMainCharts = function() {
console.log('=== TESTING MAIN CHARTS ===');
console.log('hbnData:', !!hbnData);
console.log('main selector:', !!document.getElementById('mainReleaseSelector'));
console.log('main grid:', !!document.getElementById('mainTaskPieChartsGrid'));
if (hbnData) {
updateMainTaskCharts();
}
};
&lt;/script>
&lt;hr>
&lt;h2 id="key-insights">Key Insights&lt;/h2>
&lt;h3 id="demographics--development">Demographics &amp;amp; Development&lt;/h3>
&lt;ul>
&lt;li>&lt;strong>Age Distribution&lt;/strong>: The dataset shows a robust developmental span with peak representation in middle childhood (6-10 years), providing excellent coverage for studying developmental trajectories&lt;/li>
&lt;li>&lt;strong>Sex Balance&lt;/strong>: 64.1% male, 35.9% female participants, reflecting typical recruitment patterns in neurodevelopmental research&lt;/li>
&lt;li>&lt;strong>Developmental Coverage&lt;/strong>: Strong representation across critical developmental periods from early childhood through early adulthood&lt;/li>
&lt;/ul>
&lt;h3 id="mental-health-patterns">Mental Health Patterns&lt;/h3>
&lt;ul>
&lt;li>&lt;strong>Correlation Structure&lt;/strong>: Mental health metrics show expected patterns - p-factor correlates positively with both internalizing (r=0.16) and externalizing (r=0.22) behaviors&lt;/li>
&lt;li>&lt;strong>Developmental Trends&lt;/strong>: Internalizing symptoms increase markedly with age, from -0.23 in early childhood to 0.52 in late adolescence/early adulthood&lt;/li>
&lt;li>&lt;strong>Age-Related Changes&lt;/strong>: Externalizing behaviors peak in early childhood (0.26) and decrease with age, while attention difficulties remain relatively stable&lt;/li>
&lt;/ul>
&lt;h3 id="data-quality--availability">Data Quality &amp;amp; Availability&lt;/h3>
&lt;ul>
&lt;li>&lt;strong>High-Quality Core Tasks&lt;/strong>: RestingState (86.3%) and movie-watching tasks (70-82%) show excellent data availability&lt;/li>
&lt;li>&lt;strong>Challenging Paradigms&lt;/strong>: Sequence learning tasks show lower completion rates (22-40%), likely due to age-appropriateness and task difficulty&lt;/li>
&lt;li>&lt;strong>Task Categorization&lt;/strong>: Passive viewing tasks generally show higher completion rates than active cognitive tasks&lt;/li>
&lt;/ul>
&lt;h3 id="research-implications">Research Implications&lt;/h3>
&lt;ul>
&lt;li>&lt;strong>Large-Scale Analyses&lt;/strong>: With 3,547 participants having complete mental health data, the dataset supports robust statistical analyses and machine learning approaches&lt;/li>
&lt;li>&lt;strong>Cross-Task Studies&lt;/strong>: High availability of core tasks enables comprehensive cross-paradigm analyses&lt;/li>
&lt;li>&lt;strong>Developmental Studies&lt;/strong>: Excellent age coverage supports both cross-sectional and cohort-based developmental research&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="technical-notes">Technical Notes&lt;/h2>
&lt;p>This dashboard visualizes comprehensive analysis of the HBN master participants dataset. Data processing included:&lt;/p>
&lt;ul>
&lt;li>Age group categorization for developmental analysis&lt;/li>
&lt;li>Task availability rate calculations across all paradigms&lt;/li>
&lt;li>Mental health correlation analysis with 3,547 complete cases&lt;/li>
&lt;li>Quality control metrics based on data availability flags&lt;/li>
&lt;/ul>
&lt;p>For detailed dataset information and download links, visit the &lt;a href="https://nine-lab.gitlab.io/research/neuroinformatics/hbn/">HBN-EEG data page&lt;/a>.&lt;/p>
&lt;hr>
&lt;p>&lt;strong>Data Source&lt;/strong>: HBN Master Participants List (Releases 1-11)&lt;br>
&lt;strong>Analysis Date&lt;/strong>: January 2024&lt;br>
&lt;strong>Sample Size&lt;/strong>: 3,602 participants&lt;br>
&lt;strong>Mental Health Sample&lt;/strong>: 3,547 participants with complete data&lt;/p></description></item></channel></rss>