ZY Huang

@blairbandit·17 public vizzes

Scatter Plot

This interactive scatter plot visualizes the relationship between miles per gallon and horsepower for cars from the auto-mpg dataset, with each red semi-transparent circle representing a vehicle. The chart uses d3.scaleLinear to map data values to pixel coordinates, d3.axisBottom and d3.axisLeft to render labeled axes with gridlines, and SVG circles for marks. Data is loaded via d3.csv, with circles and labels appended through D3 selections, while axis tick styling is handled in the linked stylesheet.

Apr 29, 2020

Loading thumbnail…

(interactive) Choropleth Map

This interactive choropleth map visualizes global economic data across countries using a spectral color scale. The map supports zooming and panning via d3.zoom, with a clickable color legend that highlights matching countries and dims others. Built with d3-geoPath and a Mercator projection, it renders SVG paths from TopoJSON data sourced from the world-atlas dataset. The legend uses d3.scaleOrdinal and d3.schemeSpectral to map categorical values to colors, with opacity transitions indicating selection state.

Apr 27, 2020

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economic classification, using a spectral color scale and an interactive legend to indicate the mapping. Users can zoom and pan the map, which is rendered with SVG paths generated by the `d3.geoPath` and `geoMercator` projections. The visualization loads country boundaries and metadata from the world-atlas TopoJSON and TSV files, processed via the `topojson` library. Hovering over a country highlights it in red and displays its name and economy in a tooltip.

Apr 26, 2020

Loading thumbnail…

(cheap trick) Let's make a Map!

This example displays a world map rendered as black countries with white borders, which turn red on hover, with each country showing its name as a tooltip. It uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to draw the map, with geographic data from TopoJSON (world-atlas 50m) and country names from the accompanying TSV file. The map supports zooming and panning through `d3.zoom`, and renders entirely as SVG elements.

Apr 26, 2020

Loading thumbnail…

Let's make a Map!

This example displays a world map of countries as light green shapes against a dark blue spherical background, using a Mercator projection. It loads geographic data from the world-atlas TopoJSON dataset and renders it as SVG paths with d3.geoPath. The code employs d3-geo projections, topojson.feature for extraction, and a select-all data join to bind country features to path elements.

Apr 25, 2020

Loading thumbnail…

(animated)Bowl of Fruit

Animated fruit circles transition between sizes and positions as apples are removed and one apple becomes a lemon, with hover events highlighting the selected fruit by a black outline. The visualization uses D3 v5 with SVG, binding data to circles via `selection.data()` and key functions. Enter and exit selections animate radius changes through `transition().duration(1000)`, while ordinal scales map fruit types to colors and radii.

Apr 25, 2020

Loading thumbnail…

Bowl of Fruit

This example shows a dynamic bowl of fruit where apples and lemons appear, disappear, and change type over time. It uses d3’s selection joins with `enter` and `merge` to update SVG groups, while `scaleOrdinal` maps fruit types to colors and radii. The fruit positions are computed manually via `translate` transforms, and a series of `setTimeout` calls triggers transitions between states.

Apr 25, 2020

Loading thumbnail…

Bowl of Fruit

Five circles represent apples in a bowl, rendered as red SVG circles that scale up on entry and shrink on exit. Over time, the code removes an apple, changes one apple into a yellow lemon by re-binding data and updating fill color, then filters out another apple. The example uses d3.v5 with scaleOrdinal for color and radius mapping, and transition().duration() to animate enter, update, and exit selections.

Apr 25, 2020

Loading thumbnail…

(area) world population

This visualization displays world population growth over time, with the x-axis representing years and the y-axis showing population counts. The area chart uses D3 v5’s `area()` generator with `curveBasis` to create a smooth filled shape, while `scaleTime` and `scaleLinear` map the data. The code also employs `axisBottom` and `axisLeft` with custom tick formatting. Data comes from a CSV file hosted on VizHub, and the chart is rendered as SVG with a title and axis labels.

Apr 25, 2020

Loading thumbnail…

(area) Temperature in SF

This area chart visualizes a week of temperature readings in San Francisco, using time on the x-axis and temperature on the y-axis. The smooth curve, generated with d3.area and curveBasis, fills the space beneath the line in maroon. Axes are rendered with d3.axisBottom and d3.axisLeft, while data is loaded via d3.csv from a remote VizHub dataset. The SVG display includes labeled axes and a title, with scales set by d3.scaleTime and d3.scaleLinear.

Apr 25, 2020

Loading thumbnail…

(line) Temperature in SF

This line chart visualizes temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The chart uses D3 v5 to load CSV data, scale time and linear values, and render an SVG path with a basis curve. Axis labels and tick marks are styled, and a title appears above the plot, while the data points themselves are not individually marked.

Apr 25, 2020

Loading thumbnail…

(scatter) Temperature in SF

This scatter plot visualizes temperature readings throughout a single week in San Francisco, with time on the x-axis and temperature on the y-axis. The code loads CSV data using d3.csv, then uses d3.scaleTime and d3.scaleLinear to map the data range to SVG coordinates. Axes are rendered with d3.axisBottom and d3.axisLeft, including grid lines, while each data point appears as a steelblue circle. The title "A Week in SF" labels the chart, and the README indicates an accompanying video explains the visualization's construction.

Apr 25, 2020

Loading thumbnail…

Interactable time table

This interactive visualization combines a world map of missing migrant incidents with a linked time-series histogram. The map uses a natural Earth projection rendered with `d3.geoPath` to plot bubble-scaled circles representing the total dead and missing at each location, while a brushable histogram below allows filtering the map by reported date. React hooks like `useMemo` optimize rendering performance, and the data comes from the Missing Migrants Project dataset. The visualization is built with React, D3 v5, and TopoJSON for country boundaries.

Apr 25, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of ten countries, using a linear scale for the x-axis and a categorical point scale for the y-axis. Circles are positioned based on population and country name, with all points styled in steel blue. The visualization is built with D3 v5, using `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the chart. Data is loaded from a local CSV file and rendered as SVG, with grid lines and formatted tick labels showing population values in billions.

Apr 13, 2020

Loading thumbnail…

Customizing Axes

A bar chart displays the population of the top 10 countries, with a custom x-axis that formats large numbers into billions (e.g., "3.41B"). Built with D3 v5, the visualization uses `d3.scaleLinear` and `d3.scaleBand` for the axes, and `d3.axisBottom` with a custom tick format. The y-axis labels are left-aligned, and gridlines extend across the chart via `tickSize`. Data is loaded from a CSV file using `d3.csv`, and the squares are rendered as SVG rectangles.

Apr 12, 2020

Loading thumbnail…

Customizing Axes

This example demonstrates a bar chart displaying the population of ten countries, including China and India, sorted by value, with customized axes. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map population counts and country names, while `axisBottom` and `axisLeft` render the axes. The x-axis applies a `tickFormat` with the `.3s` specifier to abbreviate large numbers. Data is loaded from a CSV file via `csv`, and the visualization is rendered as SVG rectangles with steelblue fills.

Apr 12, 2020

Loading thumbnail…

Covid-19 Time Series(I Forked)

This interactive map visualizes the global spread of confirmed COVID-19 cases over time, using a world map with proportional orange circles sized by case count for each location. Users scrub through dates via a slider to animate changes in outbreak severity. The visualization loads geographic boundaries from the `world-atlas` TopoJSON feed and pulls time-series data from the Johns Hopkins COVID-19 dataset via `d3.csv`. It employs `d3.geoMercator` for projection and `d3.geoPath` for rendering, with circle radii scaled using `d3.scaleSqrt` and transitions animated through `d3.transition` on the slider input.

Apr 12, 2020