Chris Briggs

Force Directed Graph Starter

This example demonstrates a minimal force-directed graph with three nodes connected by two links using D3's force simulation. It shows how SVG circles and lines update their positions on each simulation tick. The code defines data arrays for nodes and links, then applies `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` forces. Rendering targets an SVG container of 960 by 500 pixels, using the standard D3 data join pattern to manage elements.

Nov 21, 2021

Country Coronavirus Deaths Over Time With Voronoi Overlay and Labels

This line chart displays cumulative COVID-19 death counts over time for various countries, using a logarithmic y-axis to accommodate wide value ranges. A Voronoi overlay, built with `d3.Delaunay`, enables interactive hover detection, highlighting the nearest data point and displaying a tooltip with the country name, death total, and date. The visualization is rendered as an SVG using React and D3 v5, with the data sourced from the John Hopkins Coronavirus Dataset.

Country Coronavirus Deaths Over Time With Voronoi Overlay

A line chart displays cumulative COVID-19 deaths per country over time, sourced from the John Hopkins University dataset. Using a log-scaled y-axis and a D3 `scaleTime` x-axis, each country’s trajectory appears as a thin gray path; hovering activates a Voronoi overlay (built with `d3.Delaunay`) to highlight the nearest country’s line in black. A marker line indicates the 1 million death threshold. The chart is implemented in React with SVG rendering, D3 v5, and the `d3-delaunay` library for spatial proximity queries.

Per Country Coronavirus Deaths Over Time

This visualization shows cumulative COVID-19 deaths over time for each country, with each country drawn as a separate colored line on a logarithmic y-axis. The chart includes marker lines at 1 million deaths and November 18, 2020. The data comes from the John Hopkins Coronavirus Dataset, processed with d3.csv and timeParse. React components render the SVG, while d3’s scaleTime, scaleLog, and line generator handle the plotting, with axes created using d3.axisBottom and d3.axisLeft.

Coronavirus Visualisation Labels

A line chart displays global cumulative COVID-19 deaths over time from the Johns Hopkins dataset, using a logarithmic y-axis and a red marker line at 1 million deaths. The React app with D3 v5 uses `scaleTime` and `scaleLog` for axes, `line` to generate the SVG path, and `axisBottom`/`axisLeft` for labeled ticks. Axis labels and the marker lines annotate the chart, while CSS styles the gridlines and typography.

Coronavirus Linear X Axis

This chart visualizes cumulative COVID-19 deaths over time from the Johns Hopkins dataset, using a logarithmic y-axis to accommodate exponential growth. A red horizontal marker line emphasizes the 1 million death threshold, while a vertical marker highlights a specific date. The line chart is rendered as SVG using React and D3 v5, with `d3.scaleTime`, `d3.scaleLog`, `d3.line`, and axis components created via `d3.axisBottom` and `d3.axisLeft`. Data fetching employs `d3.csv` and `d3.timeParse`.

Coronavirus Linear Y Axis

A line chart displaying cumulative global COVID-19 deaths over time, with a red marker line at the 1 million death threshold. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to map dates and death totals, with `line()` generating the SVG path. Data comes from the John Hopkins Coronavirus dataset, aggregated by summing daily death totals across all countries. Gridlines from `axisBottom` and `axisLeft` provide reference, while the marker annotations label the 1M threshold and its corresponding date.

Coronavirus Linear Y Axis

Coronavirus Line Chart with D3 Axes

A line chart visualizes the cumulative global COVID-19 death toll over time using the John Hopkins Coronavirus Dataset. It plots daily death totals on a linear scale and dates on a time scale, with a red marker line highlighting the 1 million death milestone and an "now" marker at the most recent date. The chart is built with React and renders SVG paths using D3 v5’s `scaleTime`, `scaleLinear`, and `line` generators, while axes are drawn declaratively via `axisBottom` and custom marker-line components. Grid lines are styled with CSS.

Coronavirus Line Chart With Margin Convention

A line chart tracks cumulative global COVID-19 deaths over time using the Johns Hopkins dataset, with a red horizontal marker at one million deaths and a vertical “now” marker at the most recent date. The React component builds a time-scaled `d3.line` path within an SVG, applying explicit margin offsets to position axes. It uses `d3.scaleTime`, `d3.scaleLinear`, `d3.extent`, and `d3.max` to map data, while custom `XMarkerLine` and `YMarkerLine` components place annotation lines and labels.

Coronavirus Line Chart With 1M Marker

A line chart tracks cumulative COVID-19 deaths worldwide over time, using data from the Johns Hopkins Coronavirus Dataset. A horizontal black marker line highlights the point where total deaths reach one million. The visualization is built with React and D3 v5, employing `scaleTime`, `scaleLinear`, and `line` to generate the SVG path, while a separate `<line>` element marks the one-million death threshold. Data is loaded via `csv` and transformed by summing daily death totals across all countries.

Summarising Coronavirus CSV Data

This example fetches the John Hopkins Coronavirus time-series CSV and displays a single summary message: the total global deaths and the latest date column, formatted with commas. It uses D3 v5’s `d3.csv` to parse the remote data, then maps over rows to sum the final column’s values with a reduce operation. The result is rendered as large red text in a `<pre>` element, updating the DOM via `document.getElementById`. The code also comments alternative approaches using `fetch`, `async/await`, and `d3.csvParse`.

Loading and Parsing Coronavirus CSV Data

This example demonstrates loading and parsing the Johns Hopkins Coronavirus global deaths time-series CSV dataset, displaying its size in kilobytes, row count, and column count. It uses d3.csv to fetch and parse the remote CSV file, then calls d3.csvFormat on the resulting data to measure its formatted length. The interface presents these metrics in a large HTML `<pre>` element, with the React framework integrating the D3 v5 code. The code also comments on alternative approaches using fetch, async/await, and nested promises.

HIV/AIDS Choropleth Map

This interactive map visualizes the global distribution of HIV/AIDS prevalence among adults aged 15-49 in 2017. A sequential color scale using d3.scaleSequential with interpolateYlOrRd maps infection rates, with gray indicating missing data. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render country boundaries from World Atlas TopoJSON, enhanced with graticules and interior borders. Data comes from IHME’s HIV prevalence dataset, joined to country codes via ISO-3166 CSV data, and the React application loads remote resources asynchronously.

Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants dataset, with each point representing a single migration event. The x-axis encodes the reported date using a time scale, while the y-axis uses a logarithmic scale to show the total number of dead and missing individuals. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLog`, and `extent` to compute scales, and custom SVG components for axes and marks. Data is loaded asynchronously via `d3.csv` from a GitHub gist, with each point rendered as a circle containing a tooltip.

Migrant Deaths Linked Views with Fast Brushing

This example shows global migrant deaths using a natural Earth projection world map, where circles sized by the square root of total dead and missing are placed at recorded coordinates. A linked time-series histogram below displays monthly death totals, and brushing a date range on the histogram filters the map’s circles in real time. The visualization uses React with hooks like `useMemo` for efficient re-renders, D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `brushX`, and `histogram`, and renders as SVG. Data comes from the Missing Migrants Global subset, with country boundaries from World Atlas TopoJSON.

Multiple Views Cleanup

This interactive visualization combines a world map with a time-series histogram to explore missing migrant data. The map uses a D3 geoNaturalEarth1 projection to render country boundaries from the World Atlas TopoJSON, with circles scaled by the square root of the death toll. The lower panel, built with d3.bin and timeMonths thresholds, aggregates deaths by reported date. The React component loads data from a CSV of the Missing Migrants Project, using d3.csv and topojson.feature to process geographic and tabular information.

Missing Migrants Multiple Views

This visualization displays recorded incidents of missing migrants, combining a world map with a time-series histogram to reveal both geographic and temporal patterns. Proportional circles on the map represent the total number of dead and missing per location, while the histogram aggregates these totals by month. Built with React and D3 v5, the map uses `geoNaturalEarth1` and `geoPath` to render land and graticules, and the histogram uses `histogram` and `timeMonths` for binning. Data comes from the Missing Migrants Project subset CSV.

Missing Migrants on a Map

A world map visualizes missing migrant incidents, with each semi-transparent circle representing a single event and sized proportionally to the total number of dead and missing. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render landmasses, graticules, and country boundaries from World Atlas TopoJSON. Circle radii are scaled using `d3.scaleSqrt`, and the data comes from the Missing Migrants Dataset CSV, processed with React hooks and rendered as SVG.

Points on a Map

This example visualizes the geographic distribution of cities as small, semi-transparent points overlaid on a world map. The map is rendered using React and D3, with landmasses and graticules drawn via `d3.geoPath` and `d3.geoGraticule` from a Natural Earth TopoJSON source. City coordinates are loaded from a CSV file and projected using `d3.geoNaturalEarth1`, with each point plotted as an SVG circle. The styling uses a light gray for land and graticules, contrasting with the teal city points.

Missing Migrants DataSet I

This visualization displays monthly totals of dead and missing migrants from the Missing Migrants Global dataset, aggregated by reported date using a histogram. The bar chart shows the sum of casualties per month over time, with a time-scaled x-axis and linear y-axis. Built with React and d3.v5, it uses d3.csv for data loading, d3.bin with d3.timeMonths for binning, and custom SVG axis and mark components. The bars include native tooltips showing exact monthly totals.

Sized Points on a Map

This example displays a natural Earth projection world map with cities rendered as semi-transparent points, where point size encodes population using a square root scale. The visualization layers graticules, land masses, and country borders using `geoPath` and `geoGraticule` from D3 v5, while React manages the component state and SVG rendering. City data is loaded from a CSV file with population values, and the map uses geographic coordinates projected through `geoNaturalEarth1`. The visualization demonstrates how to combine D3’s geographic and scaling utilities within a React-based SVG scene.

Interactive Colour Legend

This interactive scatter plot displays the Iris dataset, mapping petal length against sepal width with species indicated by color. The React-based visualization uses D3.js scales (scaleLinear, scaleOrdinal) and SVG rendering. Users can hover over the color legend to highlight points from a specific species while dimming others, achieved through React state management (useState) that toggles opacity values on the marks and legend items. The data loads asynchronously via D3's csv parser.

Scatter Plot with Colour Legend

This interactive scatter plot visualizes the Iris dataset, plotting petal length against sepal width. Each point is colored by species, with a categorical color legend displaying the three species types (setosa, versicolor, and virginica) using distinct colors. Built with React and D3 v5, the visualization uses `scaleLinear` for the x and y axes, `scaleOrdinal` for the color encoding, and renders as an SVG with circles representing individual data points. The code includes hover tooltips showing the petal length value, and the data is loaded from a CSV file containing 150 iris flower measurements.

Scatter Plot with Colour

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width. Each of the 150 data points is rendered as a colored circle, with color encoding species type (setosa, versicolor, virginica) using a d3.scaleOrdinal with a categorical color range. Users can hover over any point to see its petal length value in a native browser tooltip. The visualization is built with React for component management and D3 v5 for scales, axes, and data loading via d3.csv, rendered as SVG with custom AxisBottom and AxisLeft components.

Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to select which flower measurements appear on the x- and y-axes via dropdown menus. The visualization renders points as SVG circles using React components and D3 scales, with axes generated through reusable AxisBottom and AxisLeft components. Dropdown selection updates state in the React app, which re-renders the scatter plot with new scale domains and labels. The Iris data is loaded asynchronously from a CSV file using D3's csv function.

Scatter Plot with Menus

This interactive scatter plot, built with React and D3, visualizes Fisher's Iris dataset. Users can independently select which of four flower measurements to plot on the X and Y axes through dropdown menus. The visualization updates the scatter plot and its axis labels dynamically upon selection. D3's `scaleLinear` and `extent` functions handle the scaling, while React manages the application state. The plot uses SVG circles for each data point and includes native tooltips for precise value inspection.

Scatter Plot with Menus

A scatter plot with menus demonstrates interactive data filtering through dropdown selection. The visualization uses React with hooks, specifically `useState` to manage the currently selected pet option from a menu containing dogs, cats, hamsters, parrots, spiders, and goldfish. The `Dropdown` component renders a standard HTML `<select>` element, triggering `onSelectedValueChange` callbacks to update the application state. The example displays a simple interface with a label and selection menu, though no actual scatter plot data or rendering logic is present in the provided code.

Menus with React

A React page presents a dropdown menu for selecting a pet from a hardcoded list of six options (dog, cat, hamster, parrot, spider, goldfish), with the hamster preselected. It demonstrates state management via React's `useState` hook and a reusable `Dropdown` component that maps over options to render `<option>` elements. The selection updates through an `onSelectedValueChange` callback passed to the component. The example relies on React 16.9 and ReactDOM to render the interface into a single `#root` div, with inline CSS styling for readability.

React Starter Code

This example demonstrates a minimal React application structure for embedding visualizations, rendering an empty `App` component into a DOM root. It loads React and ReactDOM from unpkg CDN, uses an external `bundle.js` for compiled code, and hides page overflow via inline CSS. The starter kit provides a blank canvas for integrating charting libraries, with no data or rendering logic implemented.

World Map

This world map visualization displays global landmasses and country boundaries using an equal-area Natural Earth projection. It renders a graticule grid, a light gray sphere backdrop, teal land areas, and darker interior borders. The React-based code imports d3’s geoNaturalEarth1, geoPath, and geoGraticule to project geographic features, while topojson’s feature and mesh functions process the world-atlas dataset. All elements are drawn as SVG paths, with loading state shown until the JSON data fetches successfully.

Stylized Line Chart Using Time

This stylized line chart visualizes San Francisco temperature data over time, encoded as a smooth natural curve through each daily timestamp and temperature reading. The visualization, built with React and rendered as an SVG, emphasizes the temporal sequence with a Poppins font, teal circular data points, and a thick matching stroke for the line path. The chart uses D3 v5 functions such as `scaleTime`, `scaleLinear`, `curveNatural` for interpolation, and `timeFormat` for weekday tick labels. Temperature data is loaded from a CSV via the `csv` parser and displayed with custom axis components in a clean, minimalist layout.

Stylized Iris Scatter Plot

This stylized visualization displays the classic Iris dataset as a scatter plot, showing the relationship between petal length on the x-axis and sepal width on the y-axis. Built with React and D3 v5, the component-based architecture uses separate AxisBottom, AxisLeft, and Marks components rendered as SVG circles with tooltips. The code employs d3.scaleLinear, d3.extent, and d3.csv to load and scale the data, while the Poppins font and muted teal and gray styling give the chart its distinctive minimalist aesthetic.

Stylised Bar Chart

This stylised bar chart displays the top 10 countries by population in 2020, using a horizontal bar layout with a clean, minimal aesthetic. Population values are formatted with a custom tick formatter that converts large numbers to billions with a 'Bil' suffix. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG `<rect>` elements for bars, with native `<title>` elements providing hover tooltips. The chart is styled with a Poppins font and a teal color scheme.

Refactored Bar Chart

This bar chart displays population estimates for the top 10 countries from a UN Population 2019 CSV dataset. The chart uses React components to render SVG rect elements positioned by d3.scaleBand and d3.scaleLinear scales, with axes generated as React components. The code loads data via d3.csv, applies margin conventions for layout, and renders the horizontal bars with a left-oriented categorical axis. The visualization refactors a typical D3 bar chart into reusable React components for axes and marks, demonstrating a modular approach to D3 integration in React.

Axes with React & D3

This example shows a horizontal bar chart of population data for the top 10 countries in 2020, using React to render SVG elements and D3 to compute scales and ticks. It loads the UN Population 2019 dataset via `d3.csv`, then uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.max` to set the domain. Axis ticks are generated with `xScale.ticks()` and drawn as lines and text, while rectangles represent each country’s population. The chart is styled with a left margin for country labels, and axes are positioned using SVG transforms.

The Margin Convention - Bar Charts

This example demonstrates the margin convention for bar charts by rendering the top 10 most populous countries in 2020 using React and D3. It loads CSV data from the UN Population dataset via `d3.csv`, then uses `scaleBand` and `scaleLinear` to map countries and population values to SVG rectangles within a translated group element. The visualization appears as a horizontal bar chart with axes implied by the scales, while the margin object defines the inner plotting area. React hooks manage asynchronous data loading and state updates.

Visualising the Data II - Bar Charts

This example visualizes the top 10 most populous countries from the UN Population 2019 dataset using horizontal bar charts. The bars are rendered as SVG rectangles within a React component, with their widths proportional to each country's 2020 population estimate. The code uses D3's `csv` loader to fetch the data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. React manages the loading state, displaying "Loading..." until the data arrives, then renders the chart with D3 scales.

Nov 15, 2021

Visualising the Data I - Charts

This example visualizes the 148 named CSS colors from MDN as a radial burst, with each color represented by a pie-slice path arranged around a central point. The visualization uses D3’s `csv` loader to fetch the dataset, `pie` to compute the angular segments, and `arc` to generate the SVG paths. React manages the component state and renders the SVG output. The data source is the MDN Named Colors list, and the rendering is done entirely through SVG elements.

Nov 15, 2021

Visualising the Data I

This example visualizes the 148 named CSS colors from the MDN color reference as a vertical strip of colored horizontal bars. Each bar’s background color is set directly from a row in the CSV data loaded via `d3.csv`. The visualization uses React components with hooks (`useState`, `useEffect`, `useCallback`) to manage asynchronous data loading and render the bars dynamically. The page initially displays “Loading…” until the data arrives, and each bar is 960 pixels wide by 4 pixels tall, creating a compact color spectrum.

Nov 15, 2021

Temperature in San Francisco Scatter Plot

This scatter plot visualizes one week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. Each point represents a temperature reading, plotted as a circle with a radius of six pixels. The visualization uses d3.csv to load the data and d3.scaleTime, d3.scaleLinear, d3.axisLeft, and d3.axisBottom to construct the scales and axes. Grid lines are drawn using tickSize on both axes, and the data originates from Data Canvas - Sense Your City. The code renders in SVG within a 960 by 500 pixel canvas.

Scatter Plot with Small Points

This example displays a scatter plot of automobile data, plotting engine displacement against horsepower, with tooltips revealing each vehicle’s name. The visualization uses the vega-lite-api to construct the chart, which is rendered with Vega-Lite and Vega, while d3.csv loads the data from a remote URL. The mark is configured with small, fixed-size points and a custom config adjusts axis and label styling.

Vega-Lite Iteration

This visualization displays a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, mapping miles per gallon against horsepower while encoding vehicle origin by color and weight by point size. Built using the Vega-Lite API, it registers handlers through `vega`, `vega-lite`, and `vega-tooltip` to render interactive SVG graphics with hover tooltips. The code loads CSV data with `d3.csv`, applies a custom configuration for axis styling, and dynamically sizes the chart to fit the window dimensions.

Smiley Face Pt I

A grid of 18 small smiling faces, each rendered as an SVG circle with a yellow fill, black stroke, two eyes, and a curved mouth. The faces vary randomly in eye position, eye radius, and mouth dimensions, creating subtle differences across the grid. Built with React and D3 v7, the visualization uses reusable components like `Face`, `Eyes`, and `Mouth`, and leverages D3's `arc` API to generate the mouth paths. Data is synthetic, generated with `range` and random offsets.

Loading Data with React D3

This example demonstrates how to load external data into a React application using D3 utilities, displaying a summary message about the dataset after it is fetched. It asynchronously loads a CSV file via the `csv` method from d3.v5, storing the result in React state with the `useState` and `useEffect` hooks. The message, generated by a custom `message.js` function, reports the file size in kilobytes, row count, and column count using `d3.csvFormat` and properties like `data.length` and `data.columns`. While loading, the UI shows a placeholder text.

Parsing CSV Data With D3

This example shows how to parse CSV data with D3, displaying the file size, row count, and column count of a remote dataset fetched from a TinyURL-shortened URL. The code uses `d3.csv` to load and parse the data asynchronously via a Promise, then accesses `data.length` and `data.columns` to summarize the dataset. It also includes commented alternatives using `fetch`, `async/await`, and `d3.csvParse` for manual text parsing, and a nested-callback "pyramid of doom" pattern. The rendered output is plain text inside a styled `<pre>` element.

Mouse Follower

A single gray circle tracks the mouse cursor across an SVG canvas, updating its position in real time. Built with React, the app uses the `useState` hook to store the cursor’s coordinates and a `handleMouseMove` callback triggered by the SVG’s `onMouseMove` event to update them. Rendered without D3 or external data, the circle’s `cx` and `cy` attributes are bound directly to the state values.

Loading and Parsing CSV Data

This example demonstrates the initial step of loading and parsing CSV data in a web page. The code fetches a CSV file from a URL using the Fetch API and logs its raw text content to the browser console. A large "Hello HTML!" message is displayed on screen, showcasing basic CSS styling. The implementation uses `fetch` with async/await syntax to retrieve the remote dataset, though no parsing or visualization occurs yet. The example highlights the fundamental technique of retrieving external tabular data before any further processing.