Heechan lee

@heechan95·7 public vizzes

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country, with an interactive legend that filters highlighted regions. Hovering over a color legend item dims all non-matching countries to 10% opacity, while the selected category remains fully visible and gains a thicker stroke. Clicking the same legend item again clears the filter. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for map projection, d3.zoom for pan and zoom, and scaleOrdinal with schemeSpectral for color encoding. Data comes from the World Atlas TopoJSON dataset, with country names and economy values loaded from TSV metadata.

May 20, 2020

Loading thumbnail…

Circles on a Map

A time-series slider animates the spread of COVID-19 cases across a world map. Red circles, sized with `d3.scaleSqrt` according to confirmed case counts for each date, are positioned using the `d3.geoNaturalEarth1` projection. The visualization uses a slider built with `d3.drag` to scrub through dates, updating circle radii and tooltips. Country boundaries and hover states are rendered with `d3.geoPath`, with data loaded from a CSV of confirmed cases.

Apr 29, 2020

Loading thumbnail…

Multiple Views with Brushing

This interactive visualization combines a world map of migrant deaths with a linked time-series histogram. The map uses a d3.geoNaturalEarth1 projection with d3.geoPath to render country boundaries and graticules, plotting circles scaled by d3.scaleSqrt to represent the total number of dead and missing. Users brush the histogram to filter the map, updating the displayed circles in real time. The data comes from the Missing Migrants Project CSV, with the histogram using d3.bin and d3.brushX to aggregate monthly totals.

Apr 28, 2020

Loading thumbnail…

Mouse Follower

A circle within an SVG canvas follows the mouse cursor in real time. The visualization uses React’s `useState` to track the cursor’s `clientX` and `clientY` coordinates, updating the circle’s center position on every `onMouseMove` event. The component renders a static 960×500 pixel SVG, with the circle’s radius fixed at 30 pixels. The code imports React and ReactDOM, and the initial mouse position is set to the canvas center before any user interaction.

Apr 27, 2020

Loading thumbnail…

Customizing Axes

This animated bar chart shows the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects 2017. It demonstrates custom D3 axis styling, including tick formatting that converts values to abbreviated units and removing axis domains. The visualization uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` with SVG rendering. After an initial render, a delayed transition updates the data to show population values multiplied by 10,000, re-calling the axis with a `format` function for tick labels.

Apr 1, 2020

Loading thumbnail…

World Countries Tree

This visualization shows the hierarchical structure of world countries, organized by continent and subregion, as a horizontal tree layout with text labels sized by depth. It renders the data using D3 v5’s `tree()` layout and `hierarchy()` function, with curved links drawn via `linkHorizontal` paths. The SVG scene supports zooming and panning through D3’s `zoom()` behavior. Node labels are styled with CSS text shadows and a Playfair Display font, using data from the local `data.json` file.

Mar 31, 2020

Loading thumbnail…

Bowl of Fruit - Hover to Select

Hovering over a circle highlights it with a black outline to select the fruit, and moving the mouse away deselects it. The visualization animates fruit entering, exiting, and changing type using D3 v5’s data join and `transition` methods, with scales for color and radius. Apples are red and larger than yellow lemons, arranged in a row. The `fruitBowl` function manages the SVG circles, while `index.js` drives updates through timed `setTimeout` events that remove or replace fruit.

Mar 29, 2020