Skip to main content
SimilarExport ZIP
100%

Bangkok Map showing 'New HIV Cases in 2020'

✓ Published1🌍 Public
PPichayut Liamthong
Last edited Oct 14, 2020
Created on Oct 14, 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.

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.

Next development step: add 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).

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
90% 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
89% 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
85% 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…

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
82% 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
82% 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
73% match
Loading thumbnail…

Dataset of HIV Patients in Bangkok

This gallery example displays summary statistics for a dataset of HIV patients in Bangkok. It reports the dataset’s file size in kilobytes, its row count, and its column count using oversized text. The visualization loads a CSV file from a GitHub gist via `d3.csv`, then computes the size with `d3.csvFormat` and counts rows and columns from the parsed array. The code also includes commented alternatives using `fetch` with async/await and a nested Promise “pyramid of doom,” illustrating different ways to retrieve and parse the same remote data with D3 v5.

PPichayut Liamthong
72% match