Skip to main content
SimilarExport ZIP
100%

React-Select Interactive Menu | Number of HIV New Case

✓ Published0🌍 Public
CChristian Magelssen
Last edited Oct 23, 2020
Created on Oct 23, 2020

The visualization displays the number of new HIV cases per quarter across 50 districts, shown as layered line and circle marks. Users interact with a React-Select multi-select dropdown to filter which districts appear, with the chart updating dynamically. The code uses Vega-Lite API to build the layered specification, D3.js to load CSV data from a GitHub gist, and React for state management and re-rendering. Tooltips are enabled through Vega-Tooltip, while the chart’s size adapts to the window dimensions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

React-Select Interactive Menu | Number of HIV New Case

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`.

PPakcheera Choppradit
97% match
Loading thumbnail…

React-Select Interactive Menu | Number of HIV New Case

This interactive visualization displays the number of new HIV cases per quarter across fifty Bangkok districts, using a multi-select dropdown menu built with React-Select. The data, sourced from the Bangkok Smart Monitoring System, is shown as layered line-and-circle charts that update dynamically based on the user's district selections. The visualization is constructed using the Vega-Lite API with D3.js for data loading, while the interactive filtering and rendering are handled through React and ReactDOM within a custom component.

PPakcheera Choppradit
90% match
Loading thumbnail…

React-Select Interactive Menu | Number of HIV New Case

This interactive line chart displays the number of new HIV cases per quarter in Bangkok, aggregated by district, with data sourced from the Bangkok Smart Monitoring System. A multi-select dropdown built with react-select lets users choose which districts to display, with four districts selected by default. The visualization uses vega-lite-api to layer line and circle marks, applying a dynamic filter expression that updates the chart when selections change, with styling customized via a configuration object.

PPichayut Liamthong
89% match
Loading thumbnail…

Interactive with Dropdown Options | Number of HIV New Case

The visualization displays the number of new HIV cases aggregated by district in Bangkok, using line and point layers for each selected district. Users toggle districts via a multi-select dropdown menu, which updates the filter expression and re-renders the chart. Built with React and the vega-lite-api, it registers Vega and Vega-Lite for rendering, and loads CSV data from the Bangkok Smart Monitoring System. The chart uses D3’s csv parser and Vega tooltip handler, with a custom config for axis styling.

PPichayut Liamthong
83% match
Loading thumbnail…

Covid cases with menu to select country

This visualization displays COVID-19 case trends for ten countries using a multi-line chart, with options to filter by metrics like new cases, total cases, and deaths. The code uses React for state management and D3 v5 for scales, axes, and path generation. Data comes from the COVID May Dataset, loaded via D3’s CSV parser. A color legend doubles as a hover filter, dimming non-selected lines, while a dropdown menu allows metric selection. SVG rendering and D3’s curveNatural interpolation produce smooth temporal curves.

DDean Bozic
77% match
Loading thumbnail…

Covid cases with menu to select country

This interactive visualization displays COVID-19 case data for selected countries, allowing users to filter by country and case metric (new, total, smoothed cases/deaths). Built with React and D3 v5, it renders a line chart using SVG paths with the `d3.line` and `curveNatural` functions. Menus are implemented via `react-dropdown`. The data comes from the COVID MAY Dataset and updates the chart based on user selections, with axes generated by custom components.

Mmanasishrotri
77% match
Loading thumbnail…

Covid cases with menu to select country

A multi-line chart shows COVID-19 new cases over time for ten countries, revealed through an interactive menu that allows users to select a country of interest. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, while the `d3.line` and `curveNatural` functions draw smooth paths for each nation’s data. The SVG rendering includes custom axis components and a color legend, with data sourced from the COVID MAY Dataset on GitHub.

Mmanasishrotri
75% match
Loading thumbnail…

Bangkok Map showing HIV patient with the interactive menu

This interactive visualization combines a Bangkok district map with a multi-line chart to explore HIV patient data. The map displays circles sized proportionally to new HIV cases per district for 2020, with data loaded from CSV files and the SVG map rendered via D3. Users can toggle selection mode to click districts, which updates a Vega-Lite chart showing quarterly trends. Menus switch between metrics like TX_NEW and TX_CURR, while a slider filters by quarter. Built with React, D3, and Vega-Lite API.

PPichayut Liamthong
75% match