Young Song

@YoungVerily·5 public vizzes

Choropleth Map

This choropleth map colors countries by their economy grouping, using a spectral color scale assigned through D3's `scaleOrdinal` and `schemeSpectral`. The code projects geographic features with `geoNaturalEarth1` and `geoPath` onto an SVG, overlaying a white legend built by a custom `colorLegend` component. Hovering highlights a country in red via CSS. Data comes from the `world-atlas` package, merging TopoJSON shapes with TSV metadata. Zoom interactions are handled through D3's `zoom` event, transforming the map group.

Jul 18, 2022

Loading thumbnail…

A1c Chart

This chart displays monthly A1c blood sugar levels across a year, with each month plotted as a circle and labeled with its value. Values are color-coded as in-range (teal) or out-of-range (gray) based on a target band highlighted across the chart. The visualization also includes axes, a target range legend, and an A1c category key. Built with D3 v5, it uses `select`, `csv`, `scalePoint`, `scaleLinear`, `axisLeft`, and `axisBottom` to load data from `data.csv` and render an SVG with custom grid lines and labels.

Jul 7, 2022

Loading thumbnail…

Choropleth Map

This choropleth map visualizes world countries using a natural Earth projection, with color encoding driven by data loaded from the world-atlas TopoJSON and TSV files. The SVG rendering uses `d3.geoNaturalEarth1` and `d3.geoPath` to draw geographic features, while an ordinal color scale maps country attributes to fill colors. Interactive pan and zoom are enabled through `d3.zoom`, which transforms both the map and sphere layers. A color legend is positioned on the left side to interpret the scale.

Jun 27, 2022

Loading thumbnail…

HorsePower vs Weight

This scatterplot shows the relationship between horsepower and weight for a set of cars, with each point representing a vehicle. The chart uses D3.js v5 to render an SVG with axes, gridlines via tick marks, and semi-transparent circles. Data is loaded from a CSV file using the `csv` function, then processed and scaled with `scaleLinear` and `extent`. Axis functions `axisBottom` and `axisLeft` create the labeled scales, while text elements add a title, axis labels, and a legend indicating a "Target range" with a green rectangle.

Jun 24, 2022

Loading thumbnail…

A Face with D3.js!

A smiley face drawn with D3.js features animated eyebrows that move up and down. The example demonstrates fundamental DOM manipulation by building the face from SVG primitives: circles for eyes, a rectangle for the nose, a path from `d3.arc` for the mouth, and rectangles for eyebrows. The animation uses chained `transition().duration(2000)` calls to shift the entire eyebrow group's `transform`, showing how D3 manipulates SVG attributes over time. The SVG canvas is set to 960×500 with an orange background.

Jun 24, 2022