rvdv

D3 grouped line chart: Daily temperature in Belgium between 2017 and 2021

This example visualizes daily average air temperatures in Belgium from 2017 to 2021, with each year represented as a separate line. The data is loaded from a CSV file using d3.csv, then grouped by year with d3.nest. The chart uses React for rendering SVG elements, with scales from d3.scaleTime and d3.scaleLinear mapping dates and temperatures. Lines are drawn using d3.line with a curveBasis interpolation, and colors are assigned via d3.scaleOrdinal with schemeCategory10. A color legend is generated using a custom d3 selection-based function.

Jan 9, 2022

Points on a map

This example projects the world’s countries as SVG paths onto a Natural Earth projection using the `geoNaturalEarth1` projection and `geoPath` from D3 v7. It displays graticules and sphere outlines alongside landmasses, with a topological mesh of country borders drawn from the `world-atlas` dataset. The React app fetches TopoJSON, converts it to GeoJSON via `topojson.feature` and `topojson.mesh`, and styles the resulting shapes with CSS.

Jan 6, 2022

Interactive color legend

This interactive scatter plot visualizes penguin measurements of bill depth and length, colored by species. The visualization uses React with D3 v7 to render SVG circles, mapping species to an ordinal color scale. An interactive color legend allows users to hover over a species name, which triggers a cross-filtering effect: other species' marks fade to 20% opacity while the selected species remain prominent. The axis components are custom-built, utilizing D3’s scaleLinear with nice ticks and a formatter that abbreviates large numbers.

Jan 6, 2022

Test

This line chart shows the monthly stock prices of Microsoft, Amazon, and IBM from January 2000 to March 2010, with each company’s price trend drawn as a separate colored line. The visualization uses the D3.js library (version 3.5.17) to parse dates, scale the axes, and render the SVG paths. Data is loaded from a CSV file, then grouped by symbol using `d3.nest()`, with the lines drawn using `d3.svg.line()` and the axes created via `d3.svg.axis()`. The color scale is generated dynamically with `d3.scale.category10()`.

Jan 6, 2022

Scatter plot with color legend

This scatter plot visualizes the relationship between bill depth and bill length for penguin species, colored by species with a categorical legend. The React-based visualization uses D3 v7 scales (scaleLinear, scaleOrdinal) to map data to SVG circle positions and colors, with data loaded from a CSV file. Custom axis components generate tick marks and labels, while tooltips display formatted values on hover.

Jan 3, 2022

Scatter plot with color

This scatter plot displays the relationship between bill depth and bill length for penguins, with each point colored by species. Built with React and D3 v7, it renders as an SVG using modular components for axes and marks. The data loads from a remote CSV via `d3.csv`, and the visualization uses `scaleLinear` for the x and y axes, `scaleOrdinal` for species-based coloring, and `extent` to set the domain. The axis labels are rotated, and tick marks are styled with a light gray color.

Jan 3, 2022

Polished scatter plot with menus

This example shows a scatter plot of Palmer penguin measurements, where users can interactively choose which numerical or categorical attributes to plot on the x- and y-axes via two dropdown menus. The visualization uses React with the `react-dropdown` component for the controls, while D3 v7 functions like `scaleLinear`, `extent`, and `csv` handle data loading, scaling, and axis generation. The plot is rendered as an SVG, with marks drawn as circles and a tooltip showing the x-axis value on hover.

Jan 3, 2022

Scatter plot with menus

This interactive scatter plot displays penguin measurements from a CSV dataset, allowing viewers to change both the x- and y-axes via dropdown menus while the points re-scale dynamically. Built with React and D3 v7 (including `scaleLinear`, `extent`, and `csv` for data loading), it renders as SVG circles with native `<title>` tooltips. Axis tick marks, labels, and a light grid are drawn in separate React components, with dot color fixed to dodger blue. The menus let users explore correlations among attributes like bill length, flipper length, and body mass.

Menus with React

This example demonstrates a simple interactive menu built with React. It shows a dropdown select field where the user can choose a pet from a predefined list, and the selected value is logged to the console and stored in state. The code uses React’s `useState` hook to manage the selected value and renders a custom `Dropdown` component that wraps a native HTML `<select>` element. It relies on ReactDOM to mount the app into the DOM, with React and ReactDOM loaded from UMD production builds.

React Starter

This example demonstrates a minimal React application that renders the text "Hello React!" onto a blank, full-screen HTML page. It shows how React DOM mounts a functional component into the DOM through the `ReactDOM.render` method. The code uses the React 17 and ReactDOM 17 libraries loaded via UMD scripts, with the component defined using JSX. The visualization serves as a starting point for building more complex data-driven interfaces, with no data source or rendering technique beyond basic DOM manipulation.

World map

This example displays a world map using the Natural Earth projection, with landmasses filled in blue and country borders drawn as interior lines. A gray graticule grid overlays the sphere, and the entire map is rendered as SVG. The visualization uses React to manage the component structure, D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to compute projections and paths, and TopoJSON to convert country and land topology from the world-atlas dataset into GeoJSON features.

Stylized bar chart with React & D3

This stylized bar chart displays the population of 15 countries, with horizontal bars scaled proportionally to their 2020 population estimates and a custom tooltip showing the formatted value on hover. Built with React and D3 v7, the chart uses D3's `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and renders SVG elements via React components for axes and marks. The styling employs a light gray grid and dodgerblue bars, with the data loaded from a remote CSV using D3's `csv` parser and formatted with the `format` function.

Dec 26, 2021

Scatter plot with React & D3

This scatter plot visualizes the relationship between bill depth and bill length for penguins, using data loaded from a CSV file via `d3.csv`. Each circle represents a penguin, with a native SVG `<title>` element providing tooltip information. Built with React components that render D3 scales, the chart uses `d3.scaleLinear`, `extent`, and `format` for axis ticks, with axes and marks created by custom React components. The visualization demonstrates a React-D3 integration pattern where D3 handles data scaling and formatting while React manages the SVG rendering.

Dec 26, 2021

Refactored bar chart with React & D3

This example shows a horizontal bar chart ranking the 15 most populous countries based on UN Population data from 2019. The visualization uses React components to render SVG elements, with D3 scales handling the positioning. The code separates axis and mark rendering into distinct functional components, using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. Data is loaded asynchronously via a custom `useData` hook that fetches and parses the CSV dataset.

Dec 24, 2021

Axes with React & D3

This example shows a horizontal bar chart of the top 20 countries by 2020 population, with custom axes rendered as React components. The code uses D3's `csv` loader to fetch UN population data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. Instead of D3's axis generator, it manually maps over `xScale.ticks()` and `yScale.domain()` to produce SVG `<line>` and `<text>` elements for tick marks and labels. The visualization is built with React 17 and D3 v7, rendering SVGs directly in the DOM.

The margin convention

This example demonstrates the margin convention in D3, a common pattern for reserving space around a chart’s plotting area. It renders a horizontal bar chart of the top 20 countries by 2020 population from a CSV dataset. The code uses React hooks to fetch and parse the data, then applies `d3.scaleBand` and `d3.scaleLinear` to map countries and populations to SVG rectangles. A `<g>` element is translated by the margin offsets, ensuring axes and labels fit neatly within the overall SVG canvas.

Disappointing bar chart

This bar chart displays the populations of 20 countries using data from the UN Population 2019 CSV. The visualization encodes values horizontally with SVG rectangles, where the x-axis uses a d3.scaleLinear and the y-axis uses a d3.scaleBand. Data is loaded via d3.csv, and the chart is rendered through React components managing state with useState and useEffect. The example uses React 17, D3 v7, and SVG rendering.

Rendering data with React & D3

This example visualizes the CSS named colors as a pie chart, where each slice corresponds to one color value. React manages the component state and lifecycle, fetching the data from a CSV file via `d3.csv` and rendering the SVG paths. D3’s `pie` generator and `arc` function compute the slice geometry, with each `<path>` filled using the color’s RGB hex value from the dataset. The visualization demonstrates a React-D3 integration pattern, using React for DOM updates and D3 for data calculations.

Visualizing data with React & D3

This example visualizes the CSS named colors dataset loaded from a CSV file, displaying each color as a horizontal bar. The bars are stacked vertically, with each bar’s background color set to the corresponding RGB hex value from the data. The visualization uses React’s `useState` and `useEffect` hooks to manage asynchronous loading of the CSV via D3’s `csv` function, and renders the colored divs with React’s `ReactDOM.render`. While D3 is imported, it is used solely for CSV parsing, not for any chart layout or scales.

Anscombe Vega-Lite API

This visualization displays Anscombe's quartet, a set of four datasets with identical statistical properties but distinct visual patterns, rendered as a faceted scatter plot. Circles encode the x and y coordinates, with color distinguishing the four groups. Built using the Vega-Lite API, the example dynamically loads data from a CSV file hosted on Gist, which is sourced from the UCI Machine Learning Repository's Auto MPG dataset. The code creates the visualization in JavaScript using the vega-lite-api library, which is configured with a custom color scheme and font sizes for improved readability, and renders the final chart to SVG.

Vega-Lite API Template

This example demonstrates a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing the relationship between fuel efficiency (miles per gallon) and horsepower. Points are colored by region of origin, sized by vehicle weight, and include tooltips showing model names. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification, then renders it with Vega 5 and D3 v5 for SVG output. Custom configuration and a Vega Tooltip handler enhance readability, while the chart automatically fits the viewport dimensions.

Loading data with React & D3

This example demonstrates how to integrate React with D3 for data loading, displaying a text summary of a CSV dataset’s size and structure. The component uses React’s `useEffect` hook to fetch an Anscombe’s quartet CSV via D3’s `d3.csv` function, storing the result in state. The rendered output shows the file size in kilobytes, row count, and column count, computed with `d3.csvFormat`. While loading, the interface displays a static "Loading..." message until the asynchronous data fetch resolves. The code relies on React 17, D3 v7, and the `useState` hook.

Loading data with D3

This example demonstrates how to load and inspect a remote CSV dataset using D3. It fetches a tidy version of the Anscombe’s quartet from a GitHub gist and displays three summary metrics in large text: the file size in kilobytes, the number of rows, and the number of columns. The code uses `d3.csv` to asynchronously parse the data, `d3.csvFormat` to calculate the raw size, and the `data.length` and `data.columns.length` properties to report the dataset’s dimensions.

Loading data with Fetch

This example demonstrates how to load external data using the Fetch API and parse it with D3’s `d3.csvParse`. It fetches the Anscombe tidy dataset from a GitHub gist, then displays the file size in kilobytes, row count, and column count in large text. The code defines an async `fetchText` helper to retrieve the raw CSV and uses a promise chain to update the page’s content. The visualization is minimal, focusing on data-loading mechanics rather than graphical representation, with styling applied via a `<pre>` element.

Mouse Follower

A single blue circle tracks the mouse position within an SVG canvas. The visualization demonstrates how React state updates can drive SVG element positioning in real time. The code uses React's `useState` and `useCallback` hooks within a functional component to capture `clientX` and `clientY` coordinates from the SVG's `onMouseMove` event, updating the circle's `cx` and `cy` attributes. D3 v7 is loaded but only for its `arc` function, which is unused in the final rendering. The example renders purely with React and SVG, with no external data sources.

Let's make a face: part 3

A smiley face is drawn with SVG elements in React, using D3's `arc()` generator for the mouth. The face is centered with a `g` transform, featuring a gold circle, two black eyes, and a dark mouth arc. The React component renders the SVG directly, with D3 v7 handling the arc path calculation.

Let's make a face: part 6

Sixteen randomized smiley faces fill the screen, each generated by reusable React components that split the face into a gold background circle, two eyes, and a D3 arc-based mouth. The code composes `FaceContainer`, `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` components inside an SVG, with the `d3.range` loop in `index.js` creating multiple faces and passing random values for stroke width, eye offsets, eye radius, and mouth dimensions. Each face is rendered independently, showcasing how modular React and D3 v7 can be combined for scalable, varied data-driven graphics.

Let's make a face: part 5

A modular smiley face built with React renders gold background circles, black eyes, and a curved mouth in SVG. The component structure separates BackgroundCircle, Eyes, and Mouth into individual ES6 modules, with the mouth path generated using d3.arc. Fixed dimensions position elements via a translated group, while ReactDOM mounts the app to the DOM.

Let's make a face: part 4

This example shows a cartoon smiley face built as an SVG composition, with a gold circular face, two black eyes, and a curved mouth arc. The face is centered within a 960-by-500 viewport using a translated group element. The code defines a reusable React component for the background circle and imports the `arc` function from `d3` to generate the mouth’s path. Rendering relies on React 17 and D3 7, with explicit pixel and angle dimensions stored in constants for the facial features.

Let's make a face: part 3 tweaks

A smiley face—composed of a circular head, two eyes, and an arc mouth—is drawn using D3.js and React, with a horizontal black-to-white gradient on the face and an inverted gradient on its outline. The image is rendered as a static SVG element, using D3’s `d3.arc` to generate the mouth’s path, while eye and face circles are positioned with fixed pixel offsets. The example demonstrates how D3 geometry helpers integrate with React’s declarative component model for simple, parameterized vector graphics.

Let's make a face: part 2

This example shows a yellow smiley face rendered as two eyes on a circular head, drawn entirely with SVG circles. It demonstrates how React manages declarative SVG attributes, using `cx`, `cy`, `r`, `fill`, and `stroke` properties. The code defines constants for width, height, center coordinates, and offsets, then computes eye positions from those values. It uses React 17 and ReactDOM to render the `<App />` component into the DOM, with all geometry derived from the same base variables to keep the layout consistent. The face is partially complete, omitting the mouth for a future step.

Let's make a face: part 1

A static SVG face is drawn with a yellow circular head, a black outline, and two black eyes. The example demonstrates basic SVG shape rendering with hard-coded coordinates and attributes. The code uses native SVG elements (`<svg>`, `<circle>`) with inline styling for fill, stroke, and stroke-width. Both eyes are positioned symmetrically relative to the face’s center, with the head centered at (480, 250) and a radius of 245. No JavaScript libraries or dynamic data are involved, relying entirely on declarative markup.