Pakcheera Choppradit

@pakcheera·8 public vizzes

S ucide For Selected Country

This interactive visualization displays suicide rates by year for a user-selected country, using data from a CSV file covering 1979 to 2016. A dropdown menu triggers an update of the line chart, which uses d3.scaleLinear, d3.scaleOrdinal, d3.line, and d3.curveBasis for rendering the smoothed lines. The SVG includes axes with d3.axisBottom and d3.axisLeft, a color legend for the selected country, and a title, all rendered using d3.select and d3.append. The visualization uses React for dropdown interaction and d3.v5 for the core charting logic.

Oct 23, 2020

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`.

Oct 22, 2020

Loading thumbnail…

PM2.5 For Selected Country

This visualization displays PM2.5 pollution trends for a selected country between 2010 and 2017, using data from Kaggle’s Global Air Pollution dataset. A dropdown menu lets users choose a country, triggering a D3 line chart that updates with the new country’s yearly values. The code uses d3.line, d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render the SVG chart, with a color legend built via a custom colorLegend function. Data is loaded and processed using d3.csv and d3.nest.

Oct 22, 2020

Loading thumbnail…

PM2.5 For Selected Country

A multi-line chart displays PM2.5 air pollution values per year for a selected country, drawn as SVG paths using D3 v5 within a React framework. A dropdown menu lets the viewer choose a country, triggering a redraw of the line chart and its color legend. The visualization uses d3.line, d3.curveBasis, d3.scaleLinear, and d3.scaleOrdinal, with data loaded from a CSV via d3.csv and processed into yearly series.

Oct 22, 2020

Loading thumbnail…

PM2.5 For Selected Country

This visualization shows the annual PM2.5 air pollution trend for a selected country from 2010 to 2017, with the user choosing the country via a dropdown menu. It uses D3 v5 with React, rendering an SVG line chart with axes, a color legend, and a title. The data comes from a Kaggle dataset on global air pollution, processed and structured per country. Key APIs include `d3.csv`, `scaleLinear`, `line`, `nest`, and `axisBottom`.

Oct 22, 2020

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.

Oct 22, 2020

Loading thumbnail…

Issues Ratings

The visualization shows how issue ratings change over time across many countries, with each country represented by a distinct colored line. The main chart plots yearly ratings, while a smaller brushable context view below enables zooming into specific time ranges. Data is loaded from a CSV file and processed using D3 v3. The implementation uses `d3.time.scale` for the time axes, `d3.svg.line` for the series, and an ordinal color scale with custom colors. A brush filter updates the main display based on the selected range.

Oct 22, 2020

Loading thumbnail…

Issues Ratings

This visualization displays ratings trends for over 100 countries across time, with each country represented as a colored line. Users can examine the data through a focus+context interface, where a main chart shows the detailed view and a smaller brushable timeline allows zooming and panning. The visualization uses d3.svg.line with basis interpolation to create smooth curves, and d3.svg.axis for both the main and context x-axes. A d3.svg.brush enables the range selection in the bottom context area. The data originates from a TSV file, rendered as SVG with animation support.

Oct 22, 2020