Skip to main content
SimilarExport ZIP
100%

Stacked Bar Chart with Color Legend

✓ Published0🌍 Public
PPichayut Liamthong
Last edited Sep 23, 2020
Created on Sep 16, 2020

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.

AI-generated description

A visualization constructed using the vega-lite-api.

The visualization comes from Bangkok Smart Monitoring System. It's designed to emphasize the number of "new HIV cases" each quarter in Bangkok, aggregating by the key population (e.g. MSM, TG). Each stacked bar represented the total number of HIV new cases.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stacked Bar Chart with Color Legend

This stacked bar chart displays the number of tourists visiting Thailand per year, aggregated by region, with each bar segment colored according to its regional origin. Built with the vega-lite-api on top of Vega-Lite and Vega, it loads data from a remote CSV file using d3.csv and renders an interactive SVG with a color legend via the `vl.color().fieldN('region')` encoding. The visualization uses a custom config to adjust axis and label styling, a tooltip handler for hover details, and `autosize` fitting to maintain proper dimensions.

PPichayut Liamthong
79% 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
78% 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
77% 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
75% 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
73% 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
72% match
Loading thumbnail…

A6 - Bar Chart w/ Sequential Color Scale

This example visualizes new AIDS diagnoses in 2020 for six countries, using a horizontal bar chart where bar height encodes the diagnosis count and a sequential red color scale encodes the same quantitative value. The visualization includes an axis, gridlines, and a legend for the color scale. The chart is built with D3 v7, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential` with `d3.interpolateReds` for the color mapping. The legend is generated via the `d3.legendColor` API. Data comes from UNAIDS via CORGIS.

AAndrew Blakeslee Moore
71% match
Loading thumbnail…

Stacked Bar Chart Creation

This example shows a stacked bar chart of tourist counts by region across years, using a color-encoded legend and tooltips for interactivity. The visualization is built programmatically with the Vega-Lite API (`vl.markBar`, `vl.x`, `vl.y`, `vl.color`, `vl.tooltip`), which is registered with Vega and Vega-Lite via `vl.register`. Data is loaded asynchronously from a CSV file using D3's `csv` function, and the chart is rendered as an SVG within the body of the page. Appearance is customized through a config object that sets axis, tick, and label colors.

SSwapna1915
71% match