Skip to main content
Log in
P

Pichayut Liamthong

@pichayutter·17 public vizzes

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.

Oct 29, 2020
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.

Oct 28, 2020
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.

Oct 14, 2020
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.

Oct 7, 2020
Loading thumbnail…

Bangkok Map using React D3 Hover and Zoom-in out

This example presents an interactive map of Bangkok with 50 constituencies, sourced from a Wikimedia Commons SVG. Using D3 and React, it enables users to hover over districts to highlight them in yellow and click to zoom in, with an active district highlighted in red. The implementation loads the SVG via `d3.xml`, applies event listeners for mouseover, mouseout, and click, and uses transitions to animate scaling and translation of the map.

Sep 30, 2020
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.

Sep 30, 2020
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.

Sep 23, 2020
Loading thumbnail…

Scatter Plot Weighted by Size

This scatter plot shows the number of universities across Thai provinces over time, with each point’s size weighted by the count of institutions. The visualization uses the vega-lite-api to render a point mark with an aggregated size encoding, reading data from a CSV of Thai higher education records. It customizes appearance through a vega-lite config for axis styles and tooltips, and loads data asynchronously via d3.csv.

Sep 23, 2020
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.

Sep 23, 2020
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.

Sep 23, 2020
Loading thumbnail…

Dataset of Visitors of Thailand (Tourists)

This example displays basic metadata about a CSV dataset of tourists visiting Thailand from 2010 to 2016. It shows the file size, row count, and column count in large text. The visualization uses D3.js v5’s `d3.csv` to load the data from a GitHub Gist, then formats the output with `d3.csvFormat` and updates the page via the DOM. The code also includes commented alternatives using the Fetch API with async/await and callback-based parsing.

Sep 9, 2020
Loading thumbnail…

Dataset of High Level Education in Thailand

This example demonstrates the basic contents of a dataset on higher education institutions in Thailand. It displays a large text message summarizing the data file, showing its size in kilobytes, the number of rows, and the number of columns. The code uses D3 version 5.11, specifically the `d3.csv` and `d3.csvFormat` functions, to load and parse the remote CSV file from a GitHub gist before computing and displaying the dataset’s metadata.

Sep 9, 2020
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.

Sep 9, 2020
Loading thumbnail…

Doraemon Smiley Face

This example renders the face of Doraemon as a smiling character composed entirely of SVG shapes, including ellipses for the head and eyes, circles for the nose, and lines for whiskers. The mouth is drawn using the d3.arc generator with custom start and end angles to create a curved smile. React manages the SVG elements, while D3 v6 provides the arc path calculation. The static scene uses hard-coded dimensions and coordinates to position each facial feature on a 960 by 500 canvas.

Sep 7, 2020
Loading thumbnail…

Doraemon Smiley Face

The visualization renders a stylized Doraemon-inspired smiley face using SVG elements within a React component. It shows a blue elliptical head with a white face, two white oval eyes with dark pupils, a red circular nose, and a curved smile created via the `d3.arc` path generator from the d3 library. The face is centered and positioned using SVG `<g>` transforms, while whiskers are drawn as `<line>` elements. The code leverages React 16 and d3.v6, with all shapes manually defined through SVG attributes rather than data binding.

Aug 31, 2020
Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” in the center of the browser window. It uses raw HyperText Markup Language (HTML) with inline Cascading Style Sheets (CSS) to style the page, and a JavaScript script tag to log a message to the browser's developer console. The piece serves as a minimal template for creating web-based visualizations from scratch.

Aug 31, 2020
Loading thumbnail…

Smiley Face Part II

A smiling face rendered as a yellow SVG circle with two eyes, centered on a black background. The visualization adjusts to the browser window size using React and ReactDOM, computing dimensions from `window.innerWidth` and `window.innerHeight`. The face is drawn with three `<circle>` elements inside an SVG, using React JavaScript for structure and styling via attribute props like `fill`, `stroke`, and `stroke-width`. The code derives the face radius from the viewport height, and the eyes are positioned with fixed offsets from the center.

Aug 31, 2020