Research project
Brain Heatmap Visualization Tool
A web application for generating publication-ready brain region heatmaps from experimental data. Supports multiple atlas templates, scientific colormaps, CSV upload, and PNG/SVG export, replacing manual atlas colouring with a reproducible workflow.
- My role
- Lead Developer
- Duration
- 6 weeks
- Discipline
- Research project
- Year
- 2025
01 / The problem
Researchers needed a fast way to turn region-level experimental values into publication-ready brain heatmaps without manual SVG editing, brittle scripts, or ad hoc colour mapping.
02 / The work
Built the full web application, atlas rendering layer, validation flow, export system, and Flask backend for data and template handling.
03 / The outcome
Turned a manual figure-making process into a repeatable tool used to generate publication-quality neuroscience visuals.
This tool is used in research workflows. The case study focuses on atlas rendering, validation, and export design rather than internal datasets.
At a glance
- Supports mouse, rat, human, and development templates with real-time switching
- Provides 10+ scientific colormaps, range controls, validation, and typo suggestions for region names
- Export-ready PNG and SVG output backed by 73 passing tests
Project Overview
A production-grade web application for neuroscience researchers to generate brain region heatmaps from experimental data. Supports multiple species brain templates and provides real-time interactive controls for colour mapping, range adjustment, and export.
Project Details
Technologies Used
- Next.js 16 with React 19 (TypeScript)
- D3.js v7 (SVG-based brain atlas rendering)
- Zustand (state management)
- Tailwind CSS 4
- Vitest + React Testing Library (73 passing tests)
- Flask 2.3 (Python backend)
- pandas, NumPy, Matplotlib, lxml, BeautifulSoup4
Key Features
- Multiple Brain Templates: DevMouse, Mouse, Rat, Human — switchable in real-time
- 10+ Scientific Colormaps: Viridis, Plasma, Inferno, Magma, Cividis, Turbo, Cool, Warm, RdYlBu, Spectral
- Data Upload: CSV/Excel upload with validation, error messages, and typo suggestions for region names
- Interactive Controls: Real-time range adjustment, colour selection, linear/log scale toggle
- Dual Export: PNG (raster) and SVG (vector) for publication-quality figures
- Responsive Design: Works across desktop and tablet browsers
- CI/CD: Automated deployment to GitLab Pages on push to main
Testing
- 73 passing tests covering data processing, colour mapping, region matching, and export functionality
Technical Highlights
- D3.js SVG Rendering: Dynamic colouring of brain atlas SVG regions based on uploaded data values
- Intelligent Validation: Fuzzy matching suggests corrections for mistyped brain region names
- Full-Stack: Next.js frontend communicates with Flask API for data processing and SVG template management
- Production Deployment: GitLab CI/CD pipeline with automated build, test, and deploy stages
Impact
Used by researchers at the Grant Lab to generate publication-quality brain heatmap figures for synaptome mapping papers. Replaces manual SVG editing workflows with an automated, reproducible tool.