Chongho Lee

@chongho·7 public vizzes

Smiley Face Part I

A yellow circle with a black outline and two smaller black circles as eyes forms a partial smiley face on an SVG canvas. The example uses React 17 to render static SVG elements via JSX syntax, with the `circle` component defining the face and eye positions. The SVG is 960 by 500 pixels, and the code is embedded directly in the HTML document. No interaction or animation is present; it solely displays the initial geometric shapes.

Sep 23, 2021

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes the global share of the population aged 15-49 infected with HIV/AIDS for the year 2017, using a yellow-to-red sequential color scale that intensifies with higher prevalence. Country boundaries come from the World Atlas TopoJSON, while prevalence data originates from an IHME CSV dataset, matched to country shapes via ISO numeric codes. The visualization is built with React, D3 v5’s `geoNaturalEarth1` projection and `geoPath` for rendering SVG paths, including graticules and interior borders. Missing data countries appear in gray.

Nov 18, 2019

Loading thumbnail…

Multiple Views with Fast Brushing

A world map and a time-series histogram show the locations and monthly totals of missing migrants. Users brush a time interval in the histogram, instantly filtering the map’s circles to reflect the selected range. Built with React hooks, the visualization uses `d3-geo`’s `geoNaturalEarth1` and `geoPath` for map projection, `d3.brushX` for interactive selection, and `d3.bin` with `timeMonths` for aggregating data. The map’s point radii derive from `d3.scaleSqrt`, with data sourced from the Missing Migrants Project and world boundaries from World Atlas TopoJSON.

Nov 18, 2019

Loading thumbnail…

Polished Scatter Plot with Menus

A scatter plot of the Iris dataset displays four numeric attributes and species, with interactive dropdown menus that select which attribute maps to the x and y axes. The SVG visualization uses React for component structure, d3.scaleLinear for axis scaling, and d3.csv for data loading. Each circle represents a flower sample, with tooltips showing formatted values via a D3 format specifier.

Nov 18, 2019

Loading thumbnail…

Let's explore data joins with a bar char

This bar chart visualizes the population of nine countries using data from a CSV file. Each bar represents a country, with its width corresponding to population size in thousands. The visualization uses D3 v5 to load and parse the data, then applies `scaleLinear` for the x-axis and `scaleBand` for the y-axis to position SVG rectangles. The code transforms the population values by multiplying them by 1000 during data preprocessing.

Nov 17, 2019

Loading thumbnail…

Business Categories per US States

This visualization shows the population of business categories across US states using a bar chart, where each state’s total population is broken down by category through color encoding. The chart reorders states by descending population and includes tooltips for exact values. Built with the vega-lite-api library, it renders via Vega-Lite’s markBar encoding, pulling CSV data from a GitHub-hosted Yelp business dataset. The code customizes axis styling and font sizes through a config object, integrating vega-tooltip for interactive hover details.

Nov 17, 2019

Loading thumbnail…

Yelp businesses in the United States

This interactive visualization displays global nuclear explosion events on a world map, sized by yield magnitude and colored by country, with dropdown menus to filter by deployment purpose and type. A linked date histogram below uses a brush to filter events by year. Built with React and D3 v5, it uses `d3.geoNaturalEarth1` for the map projection, `d3.geoPath` for rendering land and graticules, `d3.scaleSqrt` for circle sizing, and `d3.scaleOrdinal` for color encoding, with data loaded from a CSV via `d3.csv`.

Nov 17, 2019