Joe Hutchins

Missing Migrants Scatter Plot Log Scale

A scatter plot visualizes the Missing Migrants Dataset, with each point representing a single event. The x-axis maps reported dates using a time scale, while the y-axis uses a log scale for total dead and missing counts, enabling comparison across vastly different magnitudes. The visualization is built with React and D3 v7, using SVG rendering and custom axis components. Data is loaded asynchronously via d3.csv, with marks rendered as circles featuring tooltips that display formatted dates.

Missing Migrants Scatter Plot

This scatter plot visualizes the Missing Migrants Dataset, where each point represents a single migration event, plotting reported dates against the total number of dead and missing. The visualization uses React with D3 v7 scales (scaleTime and scaleLinear) to map data to SVG circles. The code loads data via d3.csv and renders axes using custom React components, with tooltips provided through SVG title elements on each circle.

Missing Migrants Date Histogram

This visualization shows the total number of dead and missing migrants per month over time as a histogram. React renders SVG rectangles for each bin via the Marks component, with scales for time and linear values. D3’s `bin()` and `timeMonths()` create the monthly aggregation while `sum()` totals the casualties. The data comes from the Missing Migrants Dataset, loaded through D3’s `csv()` fetch with a React effect hook. Axis components generate tick marks and labels, and hover tooltips display exact values.

Multiple Views with Fast Brushing

This example shows a world map of migrant deaths and disappearances from 2014 to 2022, overlaid with a brushing timeline. A geographic map displays circles scaled by the total dead and missing, while a histogram below shows counts over time. Brushing the histogram filters the map’s circles in real time, using React’s `useMemo` for performance. Built with D3 v7, it uses `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` for mapping, while the histogram uses `scaleTime`, `bin`, and `brushX` for interactive filtering.

Missing Migrants Multiple Views & Cleanup

This visualization combines a bubble map and a time-series histogram to show the global distribution and monthly trends of missing migrants. The map uses d3.geoNaturalEarth1 and d3.geoPath to render world landmasses, with circle sizes scaled by the square root of the “Total Dead and Missing” count per location. The histogram bins reported dates by month using d3.bin and timeMonths, summing fatalities per bin, with axes drawn via d3.scaleTime and d3.scaleLinear. Both views render as SVG within a React app, pulling data from a CSV of Missing Migrants Global Figures.

Feb 28, 2022

Missing Migrants On A Map

This example visualizes the global scale of migrant deaths and disappearances using a natural Earth projection. Sized circles, colored in a translucent blue, are positioned at the recorded coordinates of each incident, with the circle’s area encoding the total number of dead and missing individuals. The map is rendered as an SVG using `d3.geoPath` for landmasses and graticules, which are displayed atop a light gray sphere. Data is loaded from a CSV file containing global figures, and the circle sizes are scaled using `d3.scaleSqrt`, all within a React application that fetches the world atlas topology via `topojson`.

Feb 27, 2022

Sized Points On A Map

This example shows a world map with circles sized by city population, where each city is positioned by its latitude and longitude. The map uses a stereographic projection and includes graticules, land masses, and country borders. React manages the component state while D3’s `csv` loader fetches city data from a GitHub gist, and `scaleSqrt` maps population values to circle radii. The visualization renders in SVG, with semi-transparent blue circles over a light gray map.

Feb 26, 2022

Points On A Map

This example plots thousands of world cities as a cloud of semi-transparent points on an interactive SVG map. Using a stereographic projection, D3’s geoPath renders the sphere, graticule, landmasses, and country borders, while circle elements position each city according to its latitude and longitude. The city data comes from a clean CSV sourced via simplemaps.com. React components manage data fetching with hooks, and D3’s csv and topojson helpers load and parse the datasets.

Feb 26, 2022

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, displaying petal length against sepal width with points colored by species. A color legend on the right allows hovering over a species name to highlight only its corresponding data points while fading the others to 20% opacity. The visualization is built using React with D3 scales (`d3.scaleLinear`, `d3.scaleOrdinal`) and SVG rendering. Data is fetched via `d3.csv`. The code includes custom components for axes, color legend, and marks, with hover state managed through React hooks.

Feb 25, 2022

Scatter Plot with Color Legend

A scatter plot of the Iris dataset maps petal length against sepal width, with points colored by species and a legend identifying each category. Built with React and D3 v5, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and SVG circles for marks. Data is loaded via `d3.csv` and parsed into numeric values, while axes and legend are rendered as reusable React components.

Feb 25, 2022

World Map

This world map visualization displays global landmasses and country boundaries using a stereographic projection. The map shows the sphere, graticules, and land features as SVG paths, with country interiors highlighted in a distinct color. The visualization uses d3.geoPath and d3.geoGraticule within a React framework, pulling geographic data from the world-atlas TopoJSON source. Land and interior features are rendered as styled path elements, with a muted color palette for the sphere and graticules.

Feb 24, 2022

Scatter Plot with Color

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. The chart displays data points colored by species, with dropdown menus to switch which attributes appear on the x and y axes. Built with React and D3 v7, it uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical coloring, and d3.csv, d3.extent, and d3.max for data processing and scale domains. SVG rendering with React components handles axes, marks, and hover tooltips.

Polished Scatter Plot with Menus

This interactive scatter plot explores the classic Iris dataset, showing how sepal and petal measurements vary across flower species. It uses React to render SVG circles, with dropdown menus letting users choose which attributes appear on the x- and y-axes. The visualization leverages D3 utilities like `scaleLinear`, `extent`, and `csv` for data loading and axis construction, while the axes and marks are built as reusable React components. Hovering over a point reveals its value via a native SVG `<title>` tooltip.

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between different measurements of iris flowers. Through dropdown menus, viewers can dynamically select which attribute controls the x-axis (sepal length/width, petal length/width) and which controls the y-axis (sepal length/width, petal length/width), with labeled axes updating accordingly. Built with React and D3 v7, the visualization uses D3's `scaleLinear` and `extent` functions to compute scales from the CSV data, rendered as SVG circles with tooltips.

Menus with React

This example demonstrates a pet-selection menu built with React, where users choose from a list of animals. It shows a labeled dropdown interface that updates the selected value in response to user interaction. The code uses React’s `useState` hook to track the current selection, and a reusable `Dropdown` component renders the HTML `<select>` element. The dropdown options are defined as an array of objects with value-label pairs, and the selected value defaults to “hamster.” No external data source is used; the options are hardcoded in the component.

React Starter

This example demonstrates a minimal React application that renders a static “Hello React!” message inside a root `<div>` element. It uses React 16.9.0 and ReactDOM, both loaded via UMD builds from unpkg, with the component defined as a simple functional arrow function. The application is mounted by calling `ReactDOM.render()` on the `<App />` component, targeting the `#root` DOM node. No data visualization logic is present; it solely serves as a starter template for integrating React into a gallery environment.

Smiley Face

Two identical smiling faces render side by side in a React app, each constructed from modular SVG components for the background circle, eyes, pupils, mouth, and tongue. The code leverages D3’s `arc()` generator to shape the mouth and passes numeric props like eye offsets and radii to scale facial features. Both faces use the same hardcoded dimensions and coordinates, producing a mirrored, duplicated output. The SVG is centered within a 900-by-500 viewport, with each face fully drawn using primitive circles and paths.

Line Chart – Working With Time

This line chart visualizes temperature readings over time from the Data Canvas Sense Your City Dataset, showing a week of hourly measurements for San Francisco. The visualization uses React components to render SVG elements, with D3 v7’s `scaleTime`, `scaleLinear`, and `extent` functions handling the data mapping. The `line` generator with `curveNatural` smooths the temperature trend, while `timeFormat` formats the axis ticks as abbreviated weekday names. Circles mark individual data points, each with a native SVG `<title>` element providing tooltip functionality. The chart includes labeled axes positioned via React transforms, with data fetched using `csv` from the D3 library.

Working With Time

This scatter plot visualizes weekly temperature data from the Data Canvas Sense Your City dataset, displaying temperature readings over time. Each circle represents a timestamp on the x-axis and its corresponding temperature on the y-axis. The visualization uses React with D3 v7, employing `scaleTime` and `scaleLinear` for axes, `extent` to compute domains, and `timeFormat` to display abbreviated weekday labels. Data is loaded via `csv` from a GitHub-hosted CSV file, with SVG rendering and custom axis components for a clean presentation.

Stylized Bar Chart

This example displays population figures for ten OECD countries from 2006 to 2012 as a horizontal bar chart. Bars render as SVG rectangles via React components, with D3’s `scaleBand` and `scaleLinear` mapping countries and population values to positions and widths. The chart uses `d3.csv` to load remote data, `d3.format` to abbreviate tick labels, and includes custom axis components and tooltips.

Stylized Scatter Plot

This visualization displays the classic Iris Dataset as a scatter plot, mapping sepal length on the x-axis and sepal width on the y-axis. It uses d3-scale’s `scaleLinear` with `extent` and `nice` to compute domains, while React components render the SVG axes and circular marks. The code imports d3 helpers like `csv` for data loading and `format` for tick labels, and uses `useData` from `useData.js` to fetch and parse the data. Styling is applied via CSS classes for ticks and marks.

Axes with React & D3

This example shows a horizontal bar chart of the ten most populated OECD countries in 2012, rendered as SVG. React manages the component state and DOM updates, while D3 handles data loading with `d3.csv`, scales with `d3.scaleBand` and `d3.scaleLinear`, and computes axis tick marks. D3-generated x-axis ticks are drawn as lines and labels, while the y-axis uses categorical labels positioned with scale-band methods. Bar widths map linearly to population values, with margins and dimensions defined explicitly.

Refactored Bar Chart

This visualization displays the top ten OECD countries by population in 2012 using a horizontal bar chart rendered with SVG. React components structure the visualization, while D3 v7 utilities handle data loading via `d3.csv` and scales (`scaleBand`, `scaleLinear`). The reusable `Marks`, `AxisBottom`, and `AxisLeft` components render bars and axes from the CSS color data source.

The Margin Convention

This example demonstrates the margin convention by rendering a horizontal bar chart of OECD population data for 2012. It shows ten countries with bar lengths proportional to their populations, using D3 scales for positioning and sizing within an SVG rendered by React. The code loads CSV data with `d3.csv`, applies a row-parsing function to convert strings to numbers, and uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The chart is nested inside a translated SVG group element to apply the margin spacing.

Feb 20, 2022

Pathetic Bar Chart

This example visualizes the 2012 population figures for the first ten countries in an OECD dataset. It renders a horizontal bar chart using React components and SVG rectangles. The code fetches CSV data with d3.csv, then scales the bars with d3.scaleBand and d3.scaleLinear. Each country’s population determines the rectangle width, with the x-axis scaled to the maximum value. The visualization updates once data loads, showing a simple loading message beforehand.

Feb 20, 2022

Rendering Data With React

A horizontal stripe chart visualizes all CSS named colors, with each color represented as a thin 4-pixel-tall bar spanning the full width of the container. The example demonstrates combining D3's `csv` loader to fetch a remote dataset of color names and hex values with React's `useState` and `useEffect` hooks to manage asynchronous data loading and render the resulting rows. Once loaded, React maps over the data array, styling each div's `backgroundColor` from the parsed CSV field, creating a continuous gradient-like ribbon of the complete CSS color palette.

Rendering Data With React & D3

This example shows CSS named colors from a CSV file rendered as a radial burst of arcs, with each color’s hex value directly filling its corresponding path. The code uses React’s `useState` and `useEffect` to fetch the data via D3’s `csv`, then computes arc angles with `d3.pie` and draws the shapes using `d3.arc`. All geometry is output as SVG elements inside a React component, with loading state handled before rendering.

Smiley Face(s)

A grid of randomly generated smiley faces fills the viewport, each face a modular composition of SVG elements built with React components. The d3 library provides the arc function for mouth shapes and a range operator to generate the face count. Each face’s features vary, including eye offsets, radii, stroke widths, and mouth dimensions, producing a playful collection. The rendering uses SVG inside React, with properties passed as props to modular components like Eyes, Pupils, and Tongue, demonstrating a reusable, data-driven approach to visual variation.

Loading Data with React & D3

This example demonstrates how to load and display basic statistics about CSS named colors using React and D3. The app fetches a CSV file from a GitHub gist via D3’s `csv` utility and stores the result in React state with `useState` and `useEffect`. Once loaded, it renders a text summary showing the file size in kilobytes, row count, and column count. The code also uses `d3.csvFormat` to compute the data size, with a simple "Loading..." fallback while the fetch is pending.

Vega-Lite API Template

This example presents a scatter plot of auto-mpg data from the UCI Machine Learning Repository, visualizing vehicle attributes across model years. Each circle’s position encodes the year and horsepower, while its color differentiates the region of origin and its size reflects vehicle weight, with tooltips revealing model names. The visualization is built using the Vega-Lite API, where `vl.x()`, `vl.y()`, `vl.color()`, and `vl.size()` are chained to define encodings. Data is loaded asynchronously via `d3.csv`, and the rendered SVG view is configured with custom axis styling and a tooltip handler from `vega-tooltip`.

Vega-Lite API Temp Template

This example visualizes temperature trends over time using a filled area chart. The visualization is built with the vega-lite-api library, which wraps the Vega-Lite grammar for programmatic chart specification, and renders through Vega with SVG output. Data is loaded asynchronously from a CSV file using d3.csv, showing temperature values on the y-axis and timestamps on the x-axis. The chart includes tooltips for individual data points, custom axis styling from a configuration object, and adapts to fit the browser window dimensions.

Feb 18, 2022

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v7. It displays the file size, row count, and column count of a CSS named colors dataset loaded from a GitHub gist. The code uses the `d3.csv` method to fetch and parse the data, then formats the results with `d3.csvFormat`. An alternative approach using the Fetch API with `d3.csvParse` is also included but commented out.

Feb 17, 2022