Skip to main content
Log in
P

peterjchan

@peterjchan·20 public vizzes

Loading thumbnail…

Choropleth World Map w/ Interactive Filtering

This choropleth map displays world countries colored by economic category, with an interactive legend that filters the map to highlight selected regions while dimming others. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render country shapes from TopoJSON data sourced from the World Atlas, with d3.zoom enabling pan and zoom navigation. A d3.scaleOrdinal with schemeSpectral maps economic groups to colors, while legend clicks toggle the highlighted selection and adjust opacity for unselected countries.

Apr 5, 2020
Loading thumbnail…

Choropleth World Map w/ D3.js

A choropleth world map colors countries by income group using a spectral color scale, with a legend showing the categorical mapping. The visualization is built with D3.js v5 and rendered as SVG paths projected via `d3.geoNaturalEarth1` and `d3.geoPath`. Country boundaries come from TopoJSON data (world-atlas), enriched with income attributes from a TSV file. Zooming is supported through `d3.zoom`, and the legend’s circles and labels are generated using a reusable `colorLegend` function.

Apr 4, 2020
Loading thumbnail…

Color and Size Legends

This example demonstrates two types of chart legends rendered side-by-side as SVG. A color legend uses `d3.scaleOrdinal` to map fruit names to distinct colors, while a size legend uses `d3.scaleSqrt` to encode numeric values through circle radii. Both legends animate with `transition().duration()`, and the size legend filters out zero values from its ticks. Styling comes from CSS classes applied to the tick groups, with text and circles positioned dynamically.

Apr 4, 2020
Loading thumbnail…

World Countries Tree

This visualization presents the hierarchical structure of world countries, organized by continent and subregion, as an interactive tree diagram. It uses D3.js (v5) to process the JSON data with the `d3.hierarchy` and `d3.tree` layouts, rendering horizontal links via `d3.linkHorizontal` and text labels in SVG. The chart employs the `d3.zoom` API for panning and zooming, with node text sized inversely to depth.

Apr 2, 2020
Loading thumbnail…

Make an Interative World Map w/ D3.js

This interactive world map displays country boundaries projected with a natural Earth projection, rendered as SVG paths that change color on hover and support zooming and panning. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for geographic rendering, d3.zoom for interaction, and TopoJSON to convert world-atlas data. Country names come from a TSV file matched by ISO numeric codes, with tooltips showing each nation’s name via SVG title elements.

Apr 1, 2020
Loading thumbnail…

Cheap Tricks for Interaction

This example shows a zoomable world map with country name tooltips, rendered as an SVG using D3 v5 and TopoJSON data from the world-atlas package. It displays natural Earth projection with interactive pan and zoom via d3.zoom, while country boundaries are drawn with d3.geoPath. Hovering highlights countries in orange through CSS, and each path appends a <title> element populated from the TSV dataset for native browser tooltips. The map uses a simple geoNaturalEarth1 projection with a steelblue sphere background.

Apr 1, 2020
Loading thumbnail…

Make a World Map w/ D3.js

This example shows a world map rendered as an SVG with countries filled in light green against a steel-blue sphere, using the Natural Earth projection. The code loads geographic data from the `world-atlas` package and builds the map with `d3.geoPath` and `d3.geoNaturalEarth1`. It employs `topojson.feature` to extract country boundaries, then appends each path to the SVG. The visualization relies on D3 v5 and the TopoJSON library, with styling defined in a separate stylesheet.

Apr 1, 2020
Loading thumbnail…

Bowl of Fruits: Hover to Select

Five apples and a lemon sit in a brown bowl on a light background. Hovering over any fruit highlights it with a black outline. The fruit bowl uses D3 v5 data joins and ordinal scales for color and radius, with transitions animating the addition and removal of fruit over time.

Apr 1, 2020
Loading thumbnail…

Bowl of Fruits: Click to Select

A bowl of fruits displays five apples with an animated entrance, then removes one after a second, swaps an apple for a lemon at two seconds, and deletes another fruit immediately afterward. Clicking any fruit highlights it with a black outline and re-renders the selection. The visualization uses D3 v5 with `select`, `range`, and `scaleOrdinal` APIs, alongside SVG `circle`, `text`, and `rect` elements, plus D3 transitions for smooth position and appearance changes.

Apr 1, 2020
Loading thumbnail…

Bowl of Fruits: General Update Pattern

This example demonstrates the general update pattern in D3 v5 by animating a bowl of fruit through data joins. It shows how entering, updating, and exiting selections are handled as apples are removed, replaced with lemons, and filtered over timed intervals. The visualization uses `selection.data()`, `selection.enter()`, `selection.exit()`, and `transition()` to smoothly move and resize fruit circles and labels. SVG elements are rendered with ordinal scales for color and radius, while the bowl itself is a static rectangle.

Mar 30, 2020
Loading thumbnail…

Bowl of Fruits: General Update Pattern

Five fruit circles enter the SVG and gradually expand, showing the general update pattern for data joins. The code uses a `d3.ordinal` scale for color and radius, mapping apple and lemon types, while `selection.data()` with an id key, `.enter()`, `.merge()`, and `.exit()` manage transitions. Timed updates remove apples, change one to a lemon, and filter another, all animating over 1-second durations. The example relies on d3.v5 and SVG transitions.

Mar 30, 2020
Loading thumbnail…

World Population Area Chart

This area chart visualizes world population from 1950 to 2015 using a smooth, filled curve to emphasize growth over time. The data, loaded from a CSV file, is rendered as an SVG with D3 v5, employing `scaleTime`, `scaleLinear`, and an `area` generator with `curveBasis` for the shaped path. Axes are drawn via `axisBottom` and `axisLeft`, with tick formatting that converts large values into billions (e.g., “7B”). The chart includes labeled axes and a title, with styling applied through an external stylesheet.

Mar 27, 2020
Loading thumbnail…

Temperature in San Francisco Line Plot

A line plot displays temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators with `curveBasis` to render a smooth orange path. Data is loaded from a CSV via `csv`, and axes are styled with grid lines and labels, all drawn as SVG elements.

Mar 27, 2020
Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses orange, semi-transparent circles to represent individual data points, making overlaps visible. It is rendered using SVG within a D3.js v5 framework. The code employs `scaleTime` and `scaleLinear` for axes, with `axisBottom` and `axisLeft` for grid lines and labels. Data is loaded from a remote CSV file, parsed, and mapped to the scales.

Mar 27, 2020
Loading thumbnail…

Car Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The visualization uses D3.js v5’s `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and SVG circles for data points. Data is loaded from a CSV file via `csv` and mapped to numeric values. The chart includes labeled axes and a title, with gridlines created by removing axis domains.

Mar 26, 2020
Loading thumbnail…

CustomiZing Axes

This example shows a horizontal bar chart of the top ten most populous countries, using population data from a CSV file. The chart customizes both axes: the y-axis removes domain lines and tick marks, while the x-axis uses `d3.axisBottom` with a tick format that converts large numbers to abbreviated labels like "1.42B". Bars are rendered with SVG `rect` elements, scaled by `d3.scaleLinear` and `d3.scaleBand`. The code imports specific D3 v5 modules via ES6 destructuring, including `select`, `csv`, `scaleLinear`, `max`, `scaleBand`, `axisLeft`, `axisBottom`, and `format`.

Mar 25, 2020
Loading thumbnail…

Make a bar chart

A horizontal bar chart displays 2018 population estimates for ten countries, ranked from China to Mexico. The visualization uses D3.js version 5 with an SVG rendering approach, employing `scaleLinear` and `scaleBand` to map population values and country names to bar dimensions. Data is loaded from a CSV file and multiplied by 1000 to reflect true population counts. Axes are generated with `axisLeft` and `axisBottom`, while a title labels the chart.

Mar 25, 2020
Loading thumbnail…

Make a face w/ D3.js

This example uses D3.js to draw a cartoon face from SVG primitives, including a yellow circular head, eyes, eyebrows, and an arc-based mouth. The brows are animated using D3's transition system, moving downward over 2.5 seconds and then returning. The code constructs the shape by translating a central group, positioning features with relative offsets, and applies rotations to the rectangular eyebrows. The mouth is generated with D3's arc generator, which defines a path using inner and outer radii and angular ranges. Rendering is purely in SVG, with no external data, relying on hardcoded geometry.

Mar 18, 2020
Loading thumbnail…

Shapes w/ SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and inline attributes. The code uses raw SVG elements in a React component, with a `<g>` transform for scaling and translation. CSS classes like `.lines` and `.lines path` control stroke properties, while individual shape attributes set fill, stroke width, and colors. The static scene shows how SVG geometry combines with stylesheet rules to produce a structured, non-interactive graphic.

Mar 17, 2020
Loading thumbnail…

HTML Cars Report

This example presents a simple HTML cars report that displays three used vehicles with their model years, names, and prices in a bulleted list. The page uses plain HTML structure with an `h1` heading and an unordered list to organize the data. CSS styling through `styles.css` sets the body font to 24pt monospace and applies red highlighting to the first list item via the `highlighted` class. The visualization demonstrates how basic markup and styling can present structured data without any JavaScript libraries or frameworks.

Mar 17, 2020