Shuyu Zheng

Barometer

A radial barometer chart displays the population of the top 10 most populous countries from the 2017 World Population Prospects estimate. Using D3.js v6 with SVG rendering, the visualization maps population values to a semicircular gauge with a color gradient, major and minor graduation marks, and annotation labels. The chart employs D3's arc generator, scale functions, and data binding to render the population data, with a needle positioned to indicate a percentage value derived from the dataset.

Jan 24, 2021

RoseWind-line

A radial plot compares consumer preferences for three smartphone brands—iPhone, Samsung, and Nokia Smartphone—across eight attributes such as battery life, brand, and price. Each brand forms a distinct polygon over three concentric percentage rings, using d3.scaleOrdinal for colors and d3.scaleLinear for radii. The chart renders as SVG with d3.v6, drawing circular grids, axes, and labeled polygons to visualize the multidimensional survey data.

Jan 24, 2021

Bowl of Fruit - Hover to select

A fruit bowl visualization displays apples and lemons as colored circles. Hovering over a fruit highlights it with a black stroke, and the selection is cleared on mouseout. The code uses D3.js v6 with `scaleOrdinal` for color and radius mapping. Circle positions and radii animate via `transition().duration(1000)`, with enter and exit transitions growing or shrinking circles. The data, generated randomly, is updated through timeouts that remove or reassign fruit types, demonstrating dynamic SVG updates.

Jan 22, 2021

Bowl of Fruit - Click to select

Five fruit circles sit in a row and animate with color and size changes when apples are eaten or replaced by lemons. Clicking a fruit selects it with a black outline, re-rendering the chart. Using d3 v6 with SVG and transitions, the code employs scaleOrdinal for color and radius mapping, data joins with enter/merge/exit, and transition.attr for animated updates.

Jan 22, 2021

3d surface

This example shows a 3D surface plot generated from mathematical formulas, with a menu to switch between three different datasets. The surface is rendered as an SVG path, with projected 3D coordinates transformed into 2D space. The code uses D3 v5 to bind data and create the SVG elements, while the surface geometry is derived from functions like sine and cosine applied to a grid of x and y values. Users can click list items to select a dataset, which updates the displayed surface.

Jan 13, 2021

Bowl of Fruit - General Update Pattern - Nested Object

A bowl of fruit demonstrates the general update pattern with nested selections in D3 v6. Apples and lemons are rendered as SVG circles in a bowl, with color and radius determined by fruit type via `scaleOrdinal`. The example shows how entering, updating, and exiting elements are handled through `selection.merge`, `groups.exit().remove()`, and re-bound data arrays. Timed transitions remove fruits, replace an apple with a lemon, and filter an element, illustrating how nested object data with unique IDs drives stable updates.

Temperature in San Francisco Line Plot

This visualization displays San Francisco temperature readings over time using a line plot. A smooth curve connects data points through d3.line with curveBasis, with temporal values on the x-axis and temperature on the y-axis. The chart uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for scaling, and d3.axisBottom and d3.axisLeft for labeled axes. Data comes from the temperature-in-san-francisco.csv dataset, rendered as SVG with a maroon stroke path and clear axis labels.

Temperature in San Francisco Scatter Plot

This scatter plot visualizes temperature readings in San Francisco over time, with time on the x-axis and temperature on the y-axis. The data is loaded from a CSV file and rendered as steelblue circles. The visualization uses D3 v6 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, with the SVG output generated through D3’s selection and attribute methods. Axis labels and a title are added directly within the SVG.

Cars Scatter Plot

This scatter plot from the UCI Auto MPG dataset visualizes the relationship between fuel efficiency (MPG) and horsepower for various car models, with each semi-transparent steel-blue circle representing a car. The chart uses D3 v6 scales and axes to map the data, featuring rotated axis labels and a title. The rendering relies on SVG, with the `scaleLinear` function establishing coordinate ranges and `axisBottom`/`axisLeft` drawing ticks, while the CSV data is loaded asynchronously and parsed numerically before plotting.

Scatter plot

This scatter plot displays the top 10 most populous countries, with circles positioned along a linear population scale and a point scale for country names. It uses D3 v6’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG axes and marks. Population values from the 2018 UN World Population Prospects are loaded via `csv`, formatted with `format('.3s')`, and drawn as steelblue circles.

Rose Wind Plot

This wind rose plot visualizes the frequency of wind speeds and directions across eight compass points, with color-coded stacked bars representing wind speed ranges (0–1, 1–2, ..., 6+). The circular chart uses an SVG rendering with a radial scale (`d3.scaleRadial`) and `d3.arc` to draw the concentric segments. The code loads data from a CSV file, constructs a stacked layout with `d3.stack`, and adds axis labels, a legend, and grid circles using `d3.axisLeft` and `d3.scaleLinear`.

Customizing Axes

This bar chart displays the 2018 populations of the top 10 most populous countries, using data from World Population Prospects 2017. It uses `d3.scaleLinear` and `d3.scaleBand` for positioning, with `d3.axisLeft` and `d3.axisBottom` for axes. The x-axis tick format converts numbers to abbreviated forms like “B” via `d3.format`, and grid lines are created by setting `tickSize` to the full chart height. Countries are ordered by population with bars rendered as SVG rectangles in steelblue.

Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from World Population Prospects 2017. The chart uses D3 v6 with an SVG rendering approach, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Population values, loaded from a CSV file, are scaled by 1000 before being drawn as steelblue rectangles. The visualization includes left and bottom axes using `axisLeft` and `axisBottom`.

Let's make a face with D3.js!

A cartoon face is drawn from SVG shapes, with a yellow circular head, two eyes, and eyebrows. The eyebrows are animated with a continuous bouncing motion, moving down and up over two seconds each way. The mouth is created as a path using an arc with specified inner and outer radii. This example uses D3.js v6 methods such as `select`, `append`, `attr`, `transition`, and the `arc` generator to build and animate the SVG scene.

Shapes with SCG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—stylized through both inline attributes and CSS rules. The code uses raw SVG elements within an HTML document, with a `g` element applying transforms for scaling and translation. CSS classes like `lines` and `lines path` control stroke color, width, and line joining for the line and path elements, while inline `fill` and `stroke` attributes override or complement those styles. The visualization shows how SVG presentation attributes interact with CSS specificity and inheritance.

Cars Report

This example demonstrates a text-based report of cars filtered by a maximum price, displayed in a web page. It shows how JavaScript modules, arrays, and objects work together to process and format data. The code uses asynchronous data retrieval with a Promise and `setTimeout` to simulate loading, then filters the car list and formats each entry into a readable string. The report is rendered in an HTML `<pre>` element, using standard JavaScript APIs like `JSON.parse` and `Promise`.

Untitled

This example shows a 3D surface plot of a mathematical function, where the height at each point is determined by a cosine wave based on distance from the origin, scaled by a random factor. Users can drag the surface to rotate it in three dimensions, or click the "update" button to generate a new surface with a different random amplitude. The visualization uses d3._3d to project and draw the surface as SVG paths, with d3-scale-chromatic's interpolateSpectral for coloring and d3.drag for interaction. Each update transitions the new surface in over one second, dynamically recalculating the color scale domain based on the new height range.

Dec 29, 2020

HIV/AIDS Choropleth Map

This choropleth map visualizes the global prevalence of HIV/AIDS among adults aged 15–49 in 2017. Countries are colored on a yellow-to-red sequential scale based on infection rates, with missing data rendered in grey. The visualization uses React to manage state and D3's `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render the map projection, graticule, and country boundaries from World Atlas TopoJSON data. The color scale is defined with `scaleSequential` and `interpolateYlOrRd`, mapping numeric prevalence values from a CSV file.

Log scale Missing Migrants Scatter Plot

This scatter plot visualizes missing migrant incidents over time, with each point representing a single event and the y-axis using a log scale to display the "Total Dead and Missing" count. Built with React and D3 v5, the visualization renders as an SVG, using `scaleTime` for the x-axis, `scaleLog` for the y-axis, and custom `AxisBottom`, `AxisLeft`, and `Marks` components to draw tick marks and circles. Data comes from the Missing Migrants Dataset, loaded via D3’s `csv` function, with tooltips showing the reported date on hover.

Optimize Multiple view with brushing

This interactive visualization combines a bubble map and a date histogram to explore global migrant deaths and disappearances in 2019. Users brush the histogram to filter the map, which displays circles sized by total dead and missing per location using d3.scaleSqrt. The map uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule over a TopoJSON world atlas, while the histogram bins data by month with d3.histogram. Brushing is implemented with d3.brushX, and the React app manages state for the brush extent.

Multiple view with brushing

This visualization combines a bubble map and a date histogram to explore global migrant deaths and disappearances. The map uses a natural Earth projection with proportional circle sizes via `d3.scaleSqrt`, while the histogram bins the same data by month using `d3.histogram`. Users can brush the histogram with `d3.brushX` to filter the map’s circles, linking the two views. The React-based SVG rendering loads CSV data from Missing Migrants and world-atlas TopoJSON for geographic basemaps.

Multiple view Missing Migrants on Map

This interactive visualization combines a geographic bubble map with a time-series histogram to explore migrant deaths and disappearances globally. The map uses d3.geoNaturalEarth1 projection and d3.geoPath to render world atlas landmasses, with circle sizes scaled by the square root of the "Total Dead and Missing" value per location. The histogram bins reported dates by month using d3.bin and displays the summed fatalities via SVG rectangles. Both views are built with React components, leveraging d3.scaleSqrt, d3.scaleTime, and d3.scaleLinear to map data to visual encodings.

Missing Migrants on Map

This visualization displays the global distribution of missing migrants, with each circle representing a location where deaths or disappearances have been recorded. Circle size encodes the total number of dead and missing individuals at that site. The map uses a natural Earth projection rendered as SVG via `d3.geoNaturalEarth1` and `d3.geoPath`, with graticules and country landmasses from a TopoJSON world atlas. Circle radii are scaled using `d3.scaleSqrt` based on the maximum reported count. Data comes from a CSV of Missing Migrants Project records.

Missing migrant

A histogram displays the monthly count of dead and missing migrants from the Missing Migrants Project dataset. React renders an SVG chart using D3 scales and axes, with `d3.bin` and `timeMonths` aggregating reported dates, and `d3.sum` totaling fatalities per bin. Color-coded bars show the distribution over time, with axis labels and tooltips providing precise values.

Points on Map

This visualization displays a natural Earth map with circles representing global cities, where each circle’s radius is scaled by population using a square root scale. The map is rendered as SVG through React, using d3.geoNaturalEarth1 for projection and d3.geoPath for drawing land, graticules, and country borders. City data comes from a CSV of world cities, while the map topology is loaded from world-atlas TopoJSON.

Scatter plot with interactive color legend

This interactive scatter plot displays the Iris dataset, letting users explore relationships between sepal and petal measurements through dropdown menus for the x and y axes. The visualization uses React with D3 scales and SVG rendering, featuring an interactive color legend where hovering over a species name highlights those data points while fading the rest. The legend and marks respond to hover state, with the dataset loaded via d3.csv from a GitHub gist.

Fork of Scatter plot with color legend

This visualization displays the Iris dataset using an interactive scatter plot with linked dropdown menus for selecting the X and Y axes. Each point represents a flower specimen, colored by species with a corresponding color legend on the right side. The code uses React with hooks for state management and d3-scale's scaleLinear, scaleOrdinal, and extent functions, while rendering axes and marks as SVG elements through custom React components.

Scatter plot with color

This interactive scatter plot visualizes the Iris Dataset, displaying species colored by a categorical scale. Using React with D3 scales, the chart allows users to select which sepal and petal measurements appear on the x and y axes via dropdown menus. The SVG rendering employs `scaleLinear` and `scaleOrdinal` to map data values to positions and colors, with tooltips showing exact values on each point.

Polished scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between four measurements (sepal and petal length/width) through dropdown menus that select which attribute appears on each axis. The visualization renders as an SVG using React components, with D3 v5 handling data loading via `d3.csv` and scale construction through `scaleLinear` and `extent`. Axis ticks are generated manually from the scales, and hovering over a point reveals its x-value via an SVG `<title>` element. The chart includes styled axes, labels, and a clean layout with margins.

Scatter plot with menus

This interactive scatter plot displays the Iris dataset, with dropdown menus allowing users to select which attributes appear on the x- and y-axes. Built with React and D3 v5, the visualization uses `scaleLinear` and `extent` to compute scales, mapping the chosen columns to positions of SVG circles. Axis components render ticks and labels, while the `Marks` component adds tooltips via SVG `<title>` elements. The data is loaded asynchronously from a CSV file using D3’s `csv` function.

Menus with React

A React app renders a dropdown menu to select a pet, with the chosen value displayed in the console. The interface uses React's `useState` hook to manage the selected option and passes it to a reusable `Dropdown` component built with native `<select>` and `<option>` elements. The visualization includes a yellow background circle, eyes, and a mouth drawn with `d3.arc`, though these shapes do not change in response to the dropdown selection.

React start code

This example presents a minimal React application that renders a styled circle to the screen. The code defines reusable components for a background circle, eyes, and a mouth, with the mouth’s path generated using the D3 `arc` function. The main `App` component initially displays only the text "Hello React!", while the additional components are prepared for future use. React and ReactDOM are loaded from CDN, and the visualization is mounted into a root div, demonstrating component composition and D3 integration for SVG shapes.

World Map

This example shows a world map rendered as an SVG using React and D3. The map displays land masses in blue, interiors in a lighter stroke, and a graticule grid over a pale sphere. It sources TopoJSON country data from the world-atlas package, then uses d3.geoPath with a geoNaturalEarth1 projection to draw the features. The visualization highlights the contrast between land areas, interior boundaries, and the graticule lines, creating a clean, stylized representation of the Earth.

Stylised scatter plot

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. The chart uses React with D3 v5 scales and SVG rendering, employing `scaleLinear` and `extent` to map data to coordinates. Axis components are custom-built with React, and data is loaded asynchronously via `d3.csv`. Styling includes custom fonts from Google Fonts and a muted color palette for circles and tick marks. Tooltips are implemented using native SVG `<title>` elements, triggered on hover.

Stylised Bar Chart

A stylised horizontal bar chart visualizes 2019 UN population data for the first ten countries from a CSV, encoding values with bar length. Built with D3 v5 and React, the visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, rendering bars as SVG `<rect>` elements via custom `Marks` components. Custom tick styling and tooltips (using `<title>`) enhance readability, while axes are generated with `AxisBottom` and `AxisLeft` components, and a 'Population' label is positioned manually.

Refactored Bar Chart

This bar chart displays population estimates for ten countries from the United Nations’ 2019 dataset. Built with React and D3 v5, it uses scaleBand and scaleLinear to map country names to the y-axis and population values to the x-axis, rendering SVG rectangles via the Marks component. Axes are generated through custom AxisBottom and AxisLeft components, which leverage scale ticks and domains to produce labels and gridlines.

Axes with React and D3

A horizontal bar chart displays the ten most populous countries in 2020, using UN population data loaded via `d3.csv`. The visualization renders with React components, while D3 v5 provides `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Axes ticks are manually generated using the scale’s `ticks()` method and drawn as SVG lines and text elements. The code explicitly shows country labels and population bars within an SVG `<g>` transform, demonstrating a straightforward integration of D3 scales with React’s declarative rendering.

The Margin Convention

The visualization presents a horizontal bar chart of the top ten countries by 2020 population, using a log-scale-like linear x-axis. Built with React and rendered as SVG, it uses D3’s `scaleBand` and `scaleLinear` to map country names and population values to coordinates. The chart, styled with a yellow circle and black stroke, displays data loaded asynchronously from a CSV via D3’s `csv` parser. The code explicitly defines margins for the plot area, though the visual output does not show them.

Render data with React & D3

This example renders a bar chart of population data for the top ten most populous countries in 2020, sourced from a CSV file. Built with React and D3 v5, it uses `useState` and `useEffect` hooks to asynchronously load and transform the data with D3’s `csv` and `max` functions. The visualization maps country names to a `scaleBand` y-axis and population values to a `scaleLinear` x-axis, producing SVG rectangles that represent each country’s population size.

Render data with React & D3

A pie chart displays the CSS named colors from a CSV file, with each color rendered as a slice filled with its corresponding RGB hex value. Using React for component state and lifecycle management, the example fetches data via `csv` from D3 v5, then computes the pie layout with `pie()` and draws the arcs with `arc()`. The chart is rendered as SVG within a React component, with the D3 `pie` function assigning equal values to each slice.

Render data with React & D3

A horizontal bar chart displays CSS named colors as stacked rows, each colored by its hex value and sized by category. The visualization loads color data from a gist-hosted CSV file using `d3.csv` within a React component. The app uses React hooks (`useState`, `useEffect`) to manage asynchronous data loading and renders the color swatches as divs with inline styles. The `message` utility calculates and displays the data size in kilobytes using `d3.csvFormat`.

Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a bubble chart of religious populations by country, sourced from the UCI Auto MPG dataset via a Gist. The visualization encodes country on the x-axis (sorted by descending population), religion on the y-axis, and population size as the bubble area, with tooltips for exact values. Code loads data via `d3.csv`, configures axes and styles through a `config` object, and renders an SVG using `vl.markCircle` with `vl.encode`, all orchestrated through `vega-lite-api` and `vega-tooltip`.

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3 v6, displaying the size, row count, and column count of the dataset in a large text block. The program fetches a CSV file containing CSS named colors from a GitHub gist via `d3.csv`, then uses `d3.csvFormat` to calculate the data size in kilobytes. It accesses the parsed array’s `length` and `columns` properties to report the number of rows and columns, finally writing the summary to the page with `document.getElementById`.

Mouse Follower

A yellow circle with a black border acts as a mouse follower, tracking the pointer's position inside an SVG space. Built with React hooks (`useState`, `useCallback`), it updates circle coordinates via `onMouseMove` events under D3 v5. The example demonstrates React-D3 integration for interactive SVG rendering without explicit data, using a fixed 960x500 viewport.