Chris Knight

Missing Migrants on a Map with Brushing

This visualization combines a natural Earth projection map and a time-series histogram to explore missing migrant incidents. A brushing interaction on the date histogram filters the map’s proportional circles, which encode the total dead and missing per location. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with World Atlas TopoJSON data, while the histogram aggregates monthly totals using `d3.bin` and `d3.brushX`. Rendering is done in SVG with React, and the dataset comes from the Missing Migrants Project.

Missing Migrants on a Map with Size + Date Histogram

This visualization combines a world map with a date histogram to explore missing migrant incidents. The map uses a square-root size scale to encode the total dead and missing per event, plotted as semi-transparent circles over a natural Earth projection rendered with `d3.geoPath`. The histogram below aggregates the same data by reported date and total casualties using `d3.histogram` and `d3.timeMonths`. Both views are built with React and rendered as SVG, with the map using D3 v5’s `geoNaturalEarth1` projection and the histogram using linear and time scales, all sourced from a CSV of global missing migrant records.

Missing Migrants on a Map with Size

This example visualizes missing migrant incidents on a world map, with each circle’s radius proportional to the total number of dead and missing individuals at that location. The map uses the natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with land, graticules, and country interiors rendered from World Atlas TopoJSON data. Circle sizes are scaled using `d3.scaleSqrt`. The React app loads CSV data from a static gist and renders the visualization with SVG, overlaying semi-transparent teal circles on a gray map.

Migrant Deaths

This histogram visualizes migrant deaths over time, showing the total number of dead and missing individuals per month. The visualization uses a bar chart where each bar represents a month, with height proportional to the cumulative death count for that period. Built with React and D3 v5, the code employs `d3.bin` with `timeMonths` thresholds to aggregate data, `scaleTime` and `scaleLinear` for axes, and renders SVG rectangles via the Marks component. The dataset comes from the Missing Migrants Global subset, with tooltips displaying exact values on hover.

Points on a Map with Size

A world map displays cities as semi-transparent circles, with circle size encoding each city’s population using a square-root scale. The map renders geographic landmasses, graticules, and country borders from the World Atlas TopoJSON, projected with `d3.geoNaturalEarth1`. City data loads from a CSV via `d3.csv`, while React components manage state and render the SVG, using `d3.geoPath` to draw map features and `d3.scaleSqrt` for sizing.

Scatterplot with Interactive Color Legend

This interactive scatterplot displays the Iris dataset, plotting petal length against sepal width. Users can switch the X and Y axes using dropdown menus, and hover over the color legend to isolate a specific species of iris. The visualization uses D3 to handle data loading, scales, and layout, while React components render the SVG elements, including the axes, data points, and interactive legend.

Scatterplot with Color Legend

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Users can dynamically select which attributes to plot on the X and Y axes via dropdown menus, while a color legend distinguishes species using a categorical d3 scaleOrdinal palette. The visualization is rendered as an SVG using React components, with d3 scaleLinear handling axis scaling and the d3 csv loader fetching the dataset. Marks are drawn as circles with tooltips showing the x-axis value.

Scatterplot with Color

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. The chart uses D3’s `scaleLinear` and `scaleOrdinal` for axes and color encoding, with species mapped to a categorical palette. Built with React, the visualization renders marks as SVG circles, with dropdown menus dynamically updating the X and Y axes. Tooltips display formatted values, while D3’s `csv` loads the data asynchronously. The visible grid lines and axis labels enhance readability, making it easy to compare species clusters.

Scatterplot with Menus

A scatterplot of the Iris Dataset rendered as SVG, with dropdown menus that let the viewer select which numeric attribute appears on the X and Y axes. The chart uses D3 v5 scales and extent functions to compute domains, and React components (AxisBottom, AxisLeft, Marks) to draw ticks, labels, and circles. Data is loaded as CSV via d3.csv, with numeric parsing in a custom row function.

React Menus

This example shows a React-based dropdown menu for selecting a pet from a list of six options, with the chosen value displayed as text. The interface updates the selected pet’s label in real time as the user changes the selection. The code uses React’s `useState` hook to manage the selected value and a custom `Dropdown` component that renders a native HTML `<select>` element. The options array defines the available pets, and the dropdown’s `onChange` event triggers the state update, demonstrating basic React form handling with unidirectional data flow.

World Map

This world map visualizes country boundaries using a Natural Earth projection, with landmasses rendered in teal and interior borders in a lighter shade, overlaid on graticule lines and a gray sphere background. It leverages React components to render SVG paths via `d3.geoPath` and `geoNaturalEarth1`, while `d3.json` loads the World Atlas TopoJSON dataset. The code converts TopoJSON to GeoJSON using `feature` and `mesh` from the topojson library, highlighting the geographic data pipeline from raw source to interactive visual.

Stylised LineChart

This stylised line chart visualizes San Francisco temperature readings over a week. The SVG rendering uses React components for the axes and marks, with D3 v5's `scaleTime`, `scaleLinear`, `line`, and `curveNatural` APIs to draw a smooth path. Data comes from the Data Canvas Sense Your City dataset, loaded via `csv`. The chart features circular points with tooltips, a Poppins font, and custom colors for ticks and the series.

Iris Scatterplot

This scatterplot visualizes the Iris dataset, plotting sepal length on the x-axis against sepal width on the y-axis for each flower sample. The visualization uses React to render SVG circles within an HTML5 page, while D3 version 5 utilities—including `csv`, `scaleLinear`, `extent`, and `max`—handle data loading, scaling, and axis generation. Axis components leverage D3’s tick generation, with formatted labels and grid lines. Selections display tooltips via SVG `<title>` elements, and the layout employs fixed margins with Poppins typography for a polished presentation.

Styled BarChart

This styled bar chart visualizes the top 10 countries by population in 2020, using horizontal bars to represent each country's population. The chart, built with React and D3 v5, loads data from a CSV file containing UN population estimates. It uses D3's `scaleBand` and `scaleLinear` for axes and scaling, with `Marks` rendering SVG rectangles. The styling includes a Poppins font, custom tick colors, and a tooltip that formats population values using `format(".2s")` to display values in billions with a 'B' suffix.

Refactored BarChart

This example shows a horizontal bar chart of population data for ten countries, drawn as SVG rectangles whose lengths encode each country’s 2020 population. The code uses React hooks (`useState`, `useEffect`) to load and transform the data via D3’s `csv` utility, then renders the chart with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Axis components and marks are extracted into separate React files, with D3’s `max` and scale functions driving the layout.

Axes with react and D3

A horizontal bar chart displays the top 10 most populous countries for 2020, loaded from a CSV file via D3's `csv` utility. React renders the SVG, with D3's `scaleBand` and `scaleLinear` mapping country names and population values to positions and bar lengths. Axes include tick marks and labels generated from `xScale.ticks()` and the band domain, while rectangles encode the data values.

Fork of Rendering Data with React

This example visualizes United Nations population data for 2020 as a horizontal bar chart, showing the top 10 countries by population. The React application uses `useState` and `useEffect` to fetch the CSV data via D3's `csv` utility, then renders SVG rectangles positioned with `scaleBand` and `scaleLinear`. React and ReactDOM handle the component lifecycle and DOM rendering, while D3 provides data parsing, scaling, and maximum value calculation. The visualization updates dynamically once the asynchronous data loading completes.

Fork of Rendering Data with React

This radial burst visualization displays CSS named colors as a circular pie chart, with each color represented by an arc segment of equal size. The visualization loads raw CSV data from a GitHub gist containing color names and their RGB hex values using D3’s `csv` function. React manages the asynchronous data fetching and rendering, while D3’s `pie` and `arc` utilities compute the arc paths, which are then drawn as SVG paths with fills set to the corresponding hex values. The chart is centered within a 960×500 SVG canvas.

Rendering Data with React

This example renders a vertical stack of colored horizontal bars representing CSS named colors. The page loads color data from a CSV file using D3’s `csv` utility, then passes the parsed array to React components via `useState` and `useEffect`. Each row’s `RGB hex value` becomes the `backgroundColor` of a full-width `<div>` strip. While the data loads, React displays a “Loading…” message in a `<pre>` element. The visualization demonstrates a minimal React-D3 integration, where D3 handles data fetching and React handles the DOM rendering.