Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

React-Select Interactive Menu | Number of HIV New Case

Public visualization

React-Select Interactive Menu | Number of HIV New Case

1 star1🌍 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

Comments

Sign in to join the discussion.

MIT Licensed