Skip to main content
100%

React-Select Interactive Menu | Number of HIV New Case

✓ Published1🌍 Public
PPakcheera Choppradit
Last edited Oct 22, 2020
Created on Oct 22, 2020

This interactive visualization shows quarterly HIV new-case counts across 50 districts, displayed as a multi-line chart with overlaid circle markers. Users filter districts through a React-Select multi-select dropdown, which updates a Vega-Lite layer combining line and point marks. The code builds charts programmatically via the vega-lite-api, using `vl.markLine()`, `vl.markCircle()`, and `vl.filter()` to apply district selections from component state. Data loads asynchronously from a CSV using `d3.csv`, and the rendered SVG is injected into the DOM through React’s `dangerouslySetInnerHTML`.

AI-generated description
MIT Licensed

Similar vizzes