React-Select Interactive Menu | Number of HIV New Case

100%

React-Select Interactive Menu | Number of HIV New Case

✓ Published1🌍 Public

Last edited Oct 7, 2020

Created on Oct 6, 2020

Forked from Interactive with Dropdown Options | 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.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the Bangkok Smart Monitoring System. The line charts represents the number of new HIV cases aggregated by district (in Bangkok).

Using the react-select as the option menu to allow user to select which districts to show the result.

MIT Licensed

Similar vizzes

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

98% 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

91% match

Loading thumbnail…

React-Select Interactive Menu | Number of HIV New Case

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.

CChristian Magelssen

89% match

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

88% 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

84% match

Loading thumbnail…

Bangkok Map showing 'New HIV Cases in 2020'

This visualization displays the number of new HIV cases in Bangkok during 2020, using a map of 50 districts. Larger pink circles represent higher case counts, and hovering over a circle shows the exact number for that district. The map is loaded from an SVG via D3's `d3.xml`, with case data pulled from a CSV. The annotation is built with React and D3, using `mouseover` and `mouseout` events to display tooltips. The project uses D3 v5 and React 16.9, with plans to add interactive menus for selecting different metrics.

PPichayut Liamthong

82% match

Loading thumbnail…

Number of HIV New Case (by Quarter)

This visualization uses layered line and point charts to show the number of new HIV cases per quarter in Bangkok, aggregated by district. The chart currently displays data for districts 1, 5, 7, and 9, with each district rendered as a separate colored line. The work is built with the Vega-Lite API and D3.js, pulling data from the Bangkok Smart Monitoring System. The author notes that district selection will become interactive in future iterations, as the current filter is hardcoded. The visualization is still in development, with exploration into alternative chart types planned.

PPichayut Liamthong

80% match

Loading thumbnail…

Bangkok Map showing HIV patient with the interactive menu

This interactive map of Bangkok displays HIV patient data for fifty districts, with circles overlaid on each district where the circle's size represents the number of new HIV cases in 2020. Users toggle between viewing "New" cases and "Currently on ARV" patients via a menu, and a slider selects the quarter (Q1–Q4). The visualization loads a Wikimedia Commons SVG map with D3, uses jQuery for DOM manipulation, and renders circle overlays with SVG animations, with data sourced from CSV files.

PPichayut Liamthong

80% match