Skip to main content
SimilarExport ZIP
100%

Bangkok Map showing HIV patient with the interactive menu

✓ Published0🌍 Public
PPichayut Liamthong
Last edited Oct 29, 2020
Created on Oct 28, 2020

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.

AI-generated description

A bangkok map containing 50 cities from Wikimedia Commons.

The SVG Mmap was load using D3 and eventListener was implemented on hover to show the number of new HIV cases in each district in year 2020. The size of the circle depends on the size of new HIV cases: bigger means larger number of cases. User can use the menu bar to select more data to show (i.e. switching between TX_NEW and TX_CURR) and add the menu to select between each quarter in 2020 (Q1 - Q4).

I combined two visualizations together so that the user can press key 'S' to toggle off the region selection and then select the region to show in the right graph.

Usage:

  • Toggle topright button and select the region on the Bangkok map.
  • Toggle back to show the population in the map itself.
MIT Licensed

Similar vizzes

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
95% 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
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
85% 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
85% 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
84% 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…

Stacked Bar Chart with Color Legend

This stacked bar chart visualizes new HIV cases per quarter in Bangkok, segmented by key population types such as MSM and TG, using the shared sample data from the Bangkok Smart Monitoring System. Built with the vega-lite-api, it aggregates and sums the `TX_NEW` field across quarters, encoding the segments by color via `vl.color().fieldN('KP')`. The chart fills the browser window, uses SVG rendering through Vega, and applies custom axis and label styling from a separate config file, with a tooltip handler from vega-tooltip for interactivity.

PPichayut Liamthong
78% 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
78% match