zach b.

21 - interactive filtering - choropleth map - dataviz 2018

This interactive choropleth map displays world countries colored by economy category, with a linked legend that filters the map by category. Users click a country or legend label to select or deselect a category, or click the ocean to clear the selection; non-selected countries fade to 30% opacity. Built with d3.v5, it uses `geoNaturalEarth1` projection and `geoPath` for rendering, `topojson` for world atlas data (from world-atlas npm package), and `scaleOrdinal` with `schemeSpectral` for colors. Zooming is implemented via d3’s `zoom` behavior.

Nov 7, 2025

16 - let's make a map better - dataviz 2018

This example displays an interactive world map using a natural Earth projection, with countries rendered as SVG paths and a hover effect that changes their fill color. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, then projects it using D3’s `geoNaturalEarth1` and `geoPath`. It incorporates `d3.zoom` for pan and zoom interactions, and uses the TopoJSON `feature` function to convert the topology into GeoJSON features, with country names added via tooltips from the TSV mapping.

May 13, 2024

MI ZIP Code Pop.

This visualization shows the population distribution across Michigan ZIP codes, with each ZIP code region colored and opacified based on its population density. The map uses an azimuthal equal-area projection, rendering ZIP code boundaries and administrative land features as SVG paths via `d3.geoPath`. Population data from michigan-demographics.com drives a linear opacity scale (`d3.scaleLinear`), mapping lower populations to more transparent regions and higher populations to more opaque ones. Hovering over a region reveals the ZIP code and its population in a tooltip.

Jun 21, 2023

Fork of Scatter Plot Simple

This scatter plot visualizes the Iris Dataset, showing the relationship between sepal length and petal length across three species. The chart displays colored circles without axes, using D3 v7's `scaleLinear` and `extent` functions to map data values to SVG coordinates. The visualization is made responsive by applying a `viewBox` attribute instead of fixed width and height, while CSS `clamp` controls the SVG's displayed size. Data is loaded from a CSV file and parsed with `csvParse` before rendering.

Jun 1, 2023

GR

This interactive map overlays four geographic layers for Grand Rapids, Michigan: city commission wards, neighborhoods, neighborhood associations, and population data by block. Each layer uses Leaflet’s `L.geoJSON` to render GeoJSON data, with D3’s `d3.json` fetching the files from GitHub Gists. Wards are colored with fixed hues, while neighborhoods and associations use a custom `randomRGB` function to generate varied colors. A Leaflet layer control toggles visibility for each set, with popups showing ward numbers, neighborhood names, association names, and resident counts.

May 12, 2023

hello turf.js

This visualization demonstrates the integration of Leaflet, Turf.js, and D3.js to explore spatial analysis on a map of Nepal's districts. It displays district areas and headquarters as interactive layers with popups showing computed area, center, and bounding box values. The code uses Turf’s `area`, `center`, `bbox`, and `buffer` functions to calculate spatial metrics, and also constructs overlapping polygons to visualize union, difference, and intersection operations. A base OpenStreetMap tile layer provides geographic context, with layer controls to toggle between the OSM, district, and headquarters overlays. The map is initialized and rendered entirely in the browser using Leaflet’s API.

May 12, 2023

Mouse & Touch Follow

A red circle follows the mouse pointer across an SVG canvas, with its radius dynamically linked to touch contact size when interacting via touchscreen. Built with React and ReactDOM, the visualization uses state management via `useState` and `useCallback` hooks to update the circle’s position on mouse and touch events. The code imports React 16.9 from a UMD bundle and renders fully client-side, displaying the current touch radius as text while the circle responds to pointer movement.

Apr 29, 2023

dv2020-ep14-viz14 - Mouse Follow

A circle follows the mouse as it moves over an SVG canvas. The visualization tracks the cursor’s client coordinates and updates the circle’s center position in real time. Built with React hooks (`useState` and `useCallback`), it handles mouse movement via the SVG `onMouseMove` event, re-rendering the circle’s `cx` and `cy` attributes. The example uses React 16.9 and ReactDOM for rendering, with a static SVG viewport of 960 by 500 pixels.

Apr 29, 2023

dv2020-ep13-viz13 - Loading Data

This example demonstrates how to load and inspect external CSV data in the browser console. It fetches a raw CSV file hosted on GitHub Gist and logs its contents directly to the console. The code uses the modern asynchronous `fetch` API combined with `response.text()` to retrieve the data, wrapped in an async function called `fetchText`. No visualization is rendered; the focus is purely on the data-loading step using standard browser JavaScript without any external libraries.

Apr 5, 2023

dv2020-ep43-viz44 - missing migrants map & histogram (cleaned up)

This visualization combines a bubble map and histogram to explore the Missing Migrants Dataset. The map uses a natural Earth projection with D3’s `geoPath` and `geoNaturalEarth1` to plot incident locations as scaled circles, while the histogram aggregates reported deaths by month using `d3.bin` and `scaleTime`. Built with React and D3 v5, the SVG rendering overlays graticules, country borders, and shorelines from TopoJSON world-atlas data, with circles sized by a square-root scale. The histogram’s axes and bars are generated with `scaleLinear`, `scaleTime`, and `timeMonths`, presenting temporal patterns alongside geographic distribution.

Apr 4, 2023

dv2020-ep48-viz47 - choropleth map

A choropleth map visualizes the share of the population infected with HIV in 2017. Countries are colored using a yellow-to-red sequential scale, with gray indicating missing data. Built with D3 v5 and React, it uses `geoNaturalEarth1` projection, `geoPath`, and TopoJSON world data. Hovering reveals a country name and its percentage, sourced from the IHME HIV prevalence dataset.

Apr 3, 2023

dv2020-ep47-viz46 - missing migrants scatter plot - log scale

A scatter plot displays individual events from the Missing Migrants Dataset, plotting reported dates on the x-axis against the total dead and missing on a logarithmic y-scale. Each circle represents one event, with tooltips showing the date and casualty count. The visualization uses React with D3 v5 scales (`scaleTime`, `scaleLog`) and renders SVG components, including custom axis components. Data loads asynchronously via `d3.csv` from a GitHub gist, filtered to exclude zero-casualty entries.

Apr 3, 2023

dv2020-ep44-viz45 - missing migrants brushing

A bubble map and histogram visualize the Missing Migrants Dataset, showing the geographic distribution and monthly counts of dead and missing migrants. The histogram uses a brushing interaction via `d3.brushX` to filter the map’s bubbles by date range. The map is rendered with `d3.geoPath` and a natural Earth projection, while data is loaded through `d3.csv` and world map topology via `d3.json` with TopoJSON. The React-based interface uses D3 scales and SVG elements for rendering.

Mar 30, 2023

dv2020-ep45-viz46 - missing migrants brushing - optimized

This visualization combines a bubble map and a time-series histogram to explore the Missing Migrants Dataset, with brushing linking the two views. The map uses d3.geoNaturalEarth1 and d3.geoPath to render country borders, shorelines, and graticules, with circle sizes scaled by d3.scaleSqrt. The histogram aggregates monthly totals via d3.histogram, while d3.brushX enables selecting a date range that filters the map’s bubbles. React manages state for the brush selection, and SVG renders all elements.

Mar 30, 2023

dv2020-ep41-viz43 - missing migrants map & histogram

This visualization combines a bubble map and a histogram to explore the Missing Migrants Dataset. The map uses a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to plot incident locations, with circle radii scaled by the square root of the "Total Dead and Missing" count using `scaleSqrt`. A histogram below bins the same data by reported date, aggregating monthly totals with `d3.histogram` and `timeMonths`. Both charts are rendered as SVG within a React component, pulling geographic and CSV data from external URLs.

Mar 28, 2023

dv2020-ep40-viz42 - missing migrants bubble map

A bubble map visualizes global migration incidents from the Missing Migrants Dataset, with circle size encoding the total dead and missing per location. The visualization uses a React component structure with D3’s `geoNaturalEarth1` projection and `geoPath` to render country boundaries, graticules, and shorelines from TopoJSON world-atlas data. A `scaleSqrt` maps data values to circle radii, while SVG circles are positioned via the projection coordinates. Interactive updates are handled through React state and hooks, with data loaded asynchronously via D3’s `csv` and `json` functions.

Mar 28, 2023

dv2020-ep39-viz41 - missing migrants histogram

This histogram visualizes the total dead and missing migrants over time, with monthly bins from the Missing Migrants Dataset. The visualization uses a React and D3 v5 architecture, rendering SVG graphics with `scaleTime` for the x-axis and `scaleLinear` for the y-axis. The data is processed through D3's `bin` and `timeMonths` functions to aggregate counts into monthly sums, while `csv` loads the dataset asynchronously via a custom `useData` hook.

Mar 28, 2023

dv2020-ep38-viz40 - missing migrants scatter plot

A scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single event’s reported date against the total number of dead and missing. The D3 scales (scaleTime and scaleLinear) map data to SVG coordinates, while React components render the axes and marks. The plot uses d3.csv for data loading and timeFormat for tick labels, set against a bold lime background with semi-transparent blue circles and red tick text.

Mar 27, 2023

dv2020-ep37-viz39 - points on a map, using size

This visualization displays world cities as circles on an interactive map, with circle size encoding population using a square-root scale. The map uses a natural Earth projection rendered via `d3.geoPath`, with country borders, shorelines, and graticules from World Atlas TopoJSON data. City coordinates come from a Simplemaps CSV, filtered to populations above 50,000. React manages the component state, while D3 handles geographic projections, scaling, and SVG rendering.

Mar 27, 2023

dv2020-ep30-viz30 - React Starter

This starter example demonstrates how to integrate D3 into a React application, rendering a simple "Hello React!" message on an otherwise blank canvas. The code imports the `arc` function from D3 but does not yet use it, instead focusing on the minimal setup required for React and D3 to coexist. It loads React 16.9.0, ReactDOM, and D3 v5.11.0 via CDN, then uses `ReactDOM.render` to mount the App component into the `#root` div. The example serves as a foundation for future episodes involving more complex D3 visualizations within React components.

Mar 27, 2023

dv2020-ep36-viz38 - points on a map

This visualization displays a world map with over 50,000 cities plotted as points, using the Natural Earth dataset via the `topojson` library for geographic boundaries and a CSV of global city coordinates from Simplemaps. The map uses the `geoNaturalEarth1` projection and `geoPath` from d3 v5 to render countries, borders, shorelines, and graticules as SVG paths, with city data filtered by population and drawn as small circles. The React-based app loads data asynchronously and renders the interactive SVG within a fixed canvas, styled with a dark background and semi-transparent fills.

Mar 24, 2023

dv2020-ep35-viz37 - scatter plot w/ interactive color legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flower specimens. A color legend categorizes data points by species, and hovering over a legend item highlights that species while fading all other points. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical coloring, and SVG-based rendering. The data is loaded remotely via D3’s `csv` function, while hover interactions manage opacity through a `hoveredValue` state.

dv2020-ep35-viz36 - scatter plot w/ interactive color legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width with points colored by species. An interactive color legend on the right allows users to hover over a species name, which highlights points of that species by fading all other circles to partial opacity. The visualization uses React with D3 v5 scales and SVG rendering, employing `scaleLinear`, `scaleOrdinal`, and custom React components for axes, marks, and the legend. Data is loaded asynchronously via D3's `csv` method from a GitHub gist.

dv2020-ep34-viz35 - scatter plot w/ color legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for three iris species. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color encoding by species, and d3.csv for data loading. React components render SVG circles with opacity, complemented by custom axis components and a color legend. The chart includes a legend title, axis labels, and tooltips showing measurements in centimeters.

dv2020-ep33-viz34 - scatter plot w/ color

A scatter plot visualizes the Iris Dataset, showing petal length against sepal width for individual flowers. Each circle is colored by species using a `scaleOrdinal` with a custom color range, and points are semi-transparent to reveal overlapping data. The visualization is built with React and D3 v5, using `scaleLinear` for both axes with padded domains and axis components for tick rendering. The iris data is loaded as CSV and parsed into numeric values for the plot.

dv2020-ep32-viz33 - scatter plot w/ menus

This interactive scatter plot displays the Iris Dataset, allowing users to explore relationships between four measured attributes. The visualization uses dropdown menus to select which attributes are plotted on the x and y axes, with the chart updating dynamically. Built with React and D3 v5, the SVG rendering uses `scaleLinear` for axes and circle marks with tooltips. The data is loaded from a CSV file, and the menus are implemented using the `react-dropdown` library.

Mar 22, 2023

dv2020-ep31-viz32 - scatter plot w/ menus (basic)

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. Built with React and D3.js (d3.scaleLinear, d3.csv), it renders SVG circles with tooltips showing the selected values, while axis labels update dynamically based on menu choices. The visualization uses d3.extent, d3.min, and d3.max for scale domains, with a D3 tick system for axis generation.

Mar 22, 2023

dv2020-ep30-viz31 - menus

This example shows a React component that renders a dropdown menu for selecting a pet from a fixed list of options. The selected pet name appears as the dropdown’s current value, and the app manages that selection state with React’s `useState`. The `Dropdown` component maps over the `options` array to produce `<option>` elements, marking the selected one with the `selected` attribute, and triggers an `onChange` event to update the parent’s state via `onSelectedValueChange`. The code uses React 16.9 and a custom `Dropdown` functional component, with no external data source beyond the hardcoded list.

Mar 22, 2023

world map w/ cities & countries pop!

A world map depicts countries with their population encoded in color opacity, alongside cities sized by population via a square-root scale. A graticule and geographic lines overlay the landmasses. The visualization uses React to render SVG marks with D3’s `geoNaturalEarth1` projection and `geoPath`, integrating country boundaries from the world-atlas TopoJSON and city data from the Simplemaps World Cities Database. Country population data from the UN Population 2019 CSV is joined onto the TopoJSON features, with no-data countries displayed uniformly.

Mar 20, 2023

dv2020-ep29-viz29 - world map 01

This example renders a world map using world-atlas TopoJSON data, converted to GeoJSON and drawn as SVG paths. The map shows countries filled in green, with red borders, blue shorelines, a glowing blue sphere, and semi-transparent red graticule lines. It uses d3.geoNaturalEarth1 for projection, d3.geoPath for path generation, and d3.geoGraticule for the grid, with projection.fitSize to scale the map to the viewport. React manages the component state and rendering.

Mar 20, 2023

dv2020-ep27-viz27 - line graph (step two)

This visualization displays daily temperature variations in San Francisco over a week, using a line graph with circular markers that show exact values on hover. It employs React and D3 v5's `scaleTime`, `scaleLinear`, and `line` with `curveCardinal` to plot timestamps against temperatures, rendered as SVG elements. The chart includes labeled axes for time and temperature, with data sourced from the Sense Your City dataset, and uses custom axis components for tick generation and styling.

Mar 17, 2023

dv2020-ep26-viz26 - line graph (step one)

A line graph visualizes San Francisco temperatures over a week, with a scatter of semi-transparent circular marks. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to map timestamps and temperatures to SVG coordinates. Custom React components render the axes, while the Marks component adds `<title>` elements for hover tooltips. Data loads via `d3.csv` from the Data Canvas Sense Your City dataset.

Mar 17, 2023

dv2020-ep25-viz25 - scatter plot

A scatter plot of the Iris Dataset shows petal length on the x-axis and sepal width on the y-axis, with semi-transparent circular marks. Built with React and D3 v5, it uses `scaleLinear` with `.nice()` for continuous scales, custom `AxisBottom` and `AxisLeft` components for tick rendering, and a `Marks` component that maps data to SVG circles with native `<title>` tooltips. The visualization loads CSV data via D3's `csv` function and displays axis labels for both dimensions.

Mar 17, 2023

dv2020-ep24-viz24 - bar chart, stylized

This bar chart displays the top 9 most populous countries in 2019, using horizontal bars sorted by population size. Styled with a bright yellow background and red tick labels, the chart highlights the distribution of populations across nations. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with data from the UN World Population Prospects 2019. SVG rendering includes custom axes and tooltips that format population values using D3’s `format` function.

Mar 16, 2023

dv2020-ep23-viz23 - bar chart, refactor

This bar chart displays the top 8 most populous countries in 2020, sorted in descending order, using data from the UN World Population Prospects 2019. The visualization refactors a previous episode into reusable React components, with the SVG rendered via React elements. It uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.csv for data loading. Axes and marks are extracted into separate modules, improving code organization and reusability across episodes.

dv2020-ep22-viz21 - bar chart, margin convention

A horizontal bar chart ranks the 20 most populous countries by 2020 population estimates from UN World Population Prospects 2019. D3’s `scaleBand` positions bars vertically, while `scaleLinear` maps population values to bar widths. The React component loads CSV data via `d3.csv`, sorts it descending, and renders an SVG with the classic margin convention, translating a group for axes-free inner dimensions.

dv2020-ep22-viz22 - bar chart, axes

A horizontal bar chart displays the top five most populous countries in 2020, sorted in descending order. The visualization uses d3.csv to load UN World Population Prospects 2019 data, then applies d3.scaleBand for the categorical y-axis and d3.scaleLinear with d3.max for the quantitative x-axis. React manages the component state, while SVG renders the ticks, gridlines, text labels, and rectangles. The background is set to a light yellow-green, with margins positioning the plot area.

dv2020-ep21-viz20 - bar chart

A horizontal bar chart displays the 20 most populous countries in 2020, ranked in descending order by population. The visualization uses React to render SVG rectangles, with D3's `scaleBand` and `scaleLinear` mapping country names to y-coordinates and population values to bar widths. Data comes from the UN World Population Prospects 2019, loaded via D3's `csv` parser and sorted with `d3.descending`. The chart updates dynamically as React re-renders when the asynchronous data fetch completes.

dv2020-ep20-viz19 - Rendering Data w/ React

This example renders a color palette as a pie chart using React and D3. It loads color data from a CSV file, where each row contains an RGB hex value. The D3 pie generator and arc generator create the chart’s segments, with each slice filled by its corresponding hex color. React’s useState and useEffect hooks manage the asynchronous data loading, and the visualization updates once the CSV arrives.

dv2020-ep20-viz18 - Rendering Data w/ React

This example visualizes a dataset of CSS color hex values by rendering each row as a thin horizontal strip, producing a dense color spectrum. The React component uses `useState` and `useEffect` to load the CSV data asynchronously via d3’s `csv` function, then maps over the rows to create `<div>` elements whose background color comes from the `RGB hex value` column. The visualization relies on React’s declarative rendering rather than D3’s data-join methods, with data fetched from a gist URL.

dv2020-ep16-viz17 - Loading Data into React

This example demonstrates how to load and parse a CSV dataset within a React application, displaying basic statistics about the data as text. It uses D3’s `csv` function to fetch the file from a GitHub gist and React’s `useState` and `useEffect` hooks to manage the asynchronous data loading and trigger a re-render once the data arrives. The `message` function formats the output using `d3.csvFormat`, showing the file size in kilobytes, the number of rows, and the number of columns, while initially displaying a "loading..." placeholder.

Mar 14, 2023

dv2020-ep15-viz16 - Parsing Data with D3 (short way)

This example displays a simple text report about a remote CSV dataset, showing its size in kilobytes, row count, and column count directly in the browser. It fetches the data from a GitHub gist using the `d3.csv` method, then parses the loaded rows to compute these statistics. The code formats the data back into a CSV string with `d3.csvFormat` to measure its length, and accesses the parsed array’s `length` and `columns` properties. The results are rendered into a `<pre>` element using standard DOM text content assignment.

Mar 12, 2023

dv2020-ep15-viz15 - Parsing Data with D3 (long way)

This example demonstrates a minimal workflow for parsing fetched CSV data with D3, displaying the resulting file size, row count, and column count as plain text. It fetches a raw text file from a GitHub gist using the Fetch API, then parses it with `d3.csvParse`. The parsed data’s `length` and `columns` properties are used to compute the summary, which is rendered inside a `<pre>` element. The visualization relies on D3 v5 and highlights the distinction between raw text and structured data parsing.

Mar 12, 2023

dv2020-ep10-viz12 - Faces

A grid of eighteen yellow circular faces with black stroke outlines, eyes, and mouths, each generated with randomized proportions and positioned in a fixed layout. The face components are built using React and rendered as SVG elements, with D3 v5 utilities `d3.range` for iteration and `d3.arc` for constructing the mouth path. Each face is independently parameterized by random scaling factors applied to face radius, stroke width, eye placement, and mouth dimensions. The example demonstrates modular component composition within a React rendering pipeline, where all faces share the same `faceSize` and `mouthWidth` inputs.

dv2020-ep10-viz11 - Faces

The visualization shows a grid of eighteen identical cartoon faces, each rendered with yellow circular heads, black eyes, and a simple arched mouth. Built with React components, each face is composed of separate nested SVG elements—FaceCircle, Eyes, and Mouth—that are assembled inside a FaceContainer. The mouth shape is generated using the D3 arc generator, with its width controlled by a radian value, while the face dimensions and stroke widths are derived proportionally from a fixed faceRadius.

dv2020-ep10-viz10 - Faces

Two identical cartoon faces sit side by side on a yellow background, each with black outlined circles, two black eyes, and an open mouth formed by a thick arc. The faces are constructed from reusable React components, including `Face`, `FaceCircle`, `Eyes`, and `Mouth`, which compute their geometry from parameters like `faceSize` and `mouthWidth`. The `Mouth` component uses the `d3.arc` API to generate the mouth path, while the entire scene is drawn as an SVG rendered by React 16.9 and D3 v5.11.

dv2020-ep10-viz09 - Face

A smiling yellow face is rendered at the center of an SVG canvas, defined by a construction of reusable React components. D3's `arc` API generates the mouth shape, with its width controlled by a radian parameter, while circles compose the eyes and face outline. The visualization demonstrates component-based composition, separating concerns like `FaceContainer`, `FaceCircle`, `Eyes`, and `Mouth` for modularity.

dv2020-ep10-viz08 - Face

This visualization shows a simple, stylized smiley face composed of a yellow circle, two black eyes, and a smiling mouth. It is built with React and rendered as SVG, using D3’s `arc` generator to create the mouth path. The face is centered within a 960×500 viewport, with all facial features sized relative to the main circle’s radius. The code demonstrates a modular component approach, separating the face container, circle, eyes, and mouth into distinct React components.

dv2020-ep9-viz07 - Face

A minimalist SVG face drawn with React components renders a yellow circle, two black eyes, and a curved mouth on a blank canvas. The face is centered at 960×500 pixels, with features sized proportionally to the face radius. The mouth uses d3.arc() to create a smile path, while the eyes and face are simple React circle elements. All geometry is computed from constant variables in index.js, demonstrating modular component composition without any external data.

dv2020-ep8-viz06 - Face

A yellow circle with a black outline forms a face, with two black circular eyes and a curved smile drawn as a filled arc path. The face is centered in a 960-by-500 SVG canvas and constructed as a React component. The code uses React and ReactDOM to render the SVG, while D3’s `arc` helper generates the mouth path with specified inner and outer radii, start and end angles, and a corner radius. The face, eyes, and stroke widths are proportionally defined relative to a base `faceSize` value.

dv2020-ep7-viz05 - Face

A simple smiling face is drawn in SVG using React and D3. The face consists of a yellow circle with a black stroke, two black eyes, and an arc-based mouth. The mouth is created with a d3.arc generator, which uses radius, stroke width, and angle calculations to position and shape it. The code renders the entire composition as a single SVG group translated to the center of a 960 by 500 canvas.

dv2020-ep7-viz04 - Face

A minimalist yellow face with black eyes and a thick black mouth arc is drawn using D3.js v5 within a React 16.9 application, rendered as an SVG. The code uses the `d3.arc` function to compute the mouth path, while circles define the face and eyes. The static composition centers on a 960x500 canvas, with the face’s diameter matching the canvas height.

dv2020-ep6-viz03 - Face

A stylized face is drawn with two black circles for eyes centered on a larger yellow circle, all rendered as SVG elements. The face uses computed positions and radii from constants such as `eyeRadius`, `eyeOffsetX`, and `eyeOffsetY`, with a black stroke for the head outline. The React application imports `React` and `ReactDOM` to render the `<svg>` directly into the DOM, using inline JSX and attributes like `stroke-width` to define visual properties.

dv2020-ep5-viz02 - Face

A hand-drawn face appears as a yellow circle with black eyes on a blank SVG canvas. The code manually positions three circle elements—one for the head and two for the eyes—using hardcoded coordinates, with the head outlined in black. This example uses no external data or libraries, relying solely on raw SVG markup within an HTML document. The rendering approach is direct manual SVG code, illustrating the foundational step of creating shapes without any JavaScript or visualization framework. The fixed dimensions of 960 by 500 pixels frame the static, non-interactive composition.

dv2020-ep5-viz01 - Hello HTML (fork)

This example shows a nearly empty HTML page with a title and no visible content. It is a minimal starting point for the Episode 5 tutorial, demonstrating the bare structure of an HTML document. The code uses no external libraries, APIs, or data sources, relying solely on standard HTML elements and the `<title>` tag. It provides a clean foundation for adding interactive visualizations in subsequent steps.

dv.30 - react starter code

This example demonstrates a minimal React application that renders a green full-screen background with the text “hello react.” The code loads React 16.9, ReactDOM, and D3 v5 from CDNs, then uses `ReactDOM.render` to mount a functional component called `App` into a `<div id="root">` element. The component returns a plain JSX div, showing how to set up a basic React environment with D3 available for future visualization work. The styling applies a light green background and removes default margins.

dv.5-10 - Smiley Face

A grid of eighteen randomly generated smiley faces continuously re-renders every 400 milliseconds. Each face is composed of React components that use SVG circles for the background and eyes, and a D3 arc generator for the mouth. The code applies random values to facial features like eye radius, stroke width, and mouth dimensions, while the face background color is randomly assigned via RGB values. The example demonstrates building modular, reusable visualization components in React with D3.

Feb 13, 2023

MI

This visualization displays Michigan counties, municipalities, and electoral boundaries on an interactive Leaflet map. It loads GeoJSON data for counties, municipalities, voting precincts, state house and senate districts, and school districts via d3.json, then renders each as a layer toggleable through Leaflet’s control panel. The map uses OSM tiles from OpenStreetMap as its base layer, with Turf.js loaded for potential spatial analysis. Data is fetched asynchronously from Gist-hosted URLs, organized by category in useMiData.js.

Feb 24, 2022

d3 blank canvas

This example demonstrates a minimal d3.js setup using a Model-View-Controller pattern, rendering a fixed lime-green rectangle and a centered "Hello World!" text message from `data.json` onto an SVG canvas. The code imports `select` from d3, fetches the JSON data via `d3.json`, and uses a separate `render.js` module to append the SVG shapes. The visualization is responsive, sizing the canvas to the browser window’s client dimensions.

Feb 19, 2022

23 - scatta'plot w/ menus - dataviz 2018

This interactive scatter plot explores relationships among car attributes from the UCI Auto MPG dataset, with dropdown menus letting users choose which columns to plot on each axis. The visualization updates smoothly, animating circles to their new positions over a one-second transition with a staggered delay. Built with D3 v7, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and a custom dropdown menu module to handle selection changes. The SVG renders semi-transparent steelblue circles, while axis labels and tick styling are customized via CSS.

Feb 17, 2022

hello leaflet.js

This example displays a map of Nepal with its district boundaries and headquarters, overlaid on an OpenStreetMap base layer. Built with Leaflet, Turf, and D3, it loads district and headquarters GeoJSON data via D3’s `d3.json` method, then renders both as interactive vector layers using Leaflet’s `geoJSON` and `tileLayer` APIs. A layer control panel allows toggling the OSM base map, district polygons, and HQ points, demonstrating a straightforward approach to combining spatial datasets in a web map.

Feb 16, 2022

20 - choropleth map - dataviz 2018

A choropleth map of the world colors each country according to its economic classification, with a color legend on the left. The map uses a natural Earth projection rendered with `d3.geoPath`, and country data comes from the `world-atlas` TopoJSON and TSV files. A sequential color scale based on `d3.scaleOrdinal` and `schemeSpectral` assigns hues, and hovering turns a country red via SVG CSS. The visualization is built with D3 v5 and the `topojson` library's `feature` function, with zoom capability via a custom `zoom` callback.

Feb 16, 2022

27 - melting data for multiple lines - dataviz 2018

A multi-line chart displays population trends over time for various countries and regions, using the United Nations population estimates and projections dataset. The visualization employs multiple vertical reference lines to highlight the current year, a hovered year, and a selected year, which users can change by clicking on the chart. The D3 code uses `d3.nest` to group data by region and `d3.line` with `d3.curveBasis` to draw the smoothed paths, while `d3.scaleOrdinal` and `d3.schemeCategory10` assign colors. A custom color legend function renders the region names and color swatches.

14.c - fruit bowl - hover & click select - dataviz 2018

Five apples sit in a bowl, selectable by click and hover, with each fruit’s outline changing color to indicate state. The code uses D3 v7’s data join and transition methods to animate fruit radius, position, and label opacity as items are removed or change type. The `renderFruitBowl` function handles enter, update, and exit selections, while `scaleOrdinal` maps fruit types to colors and radii. Apple and lemon labels appear via SVG text elements.

14.b - fruit bowl - hover to select - dataviz 2018

A fruit bowl shows five apples arranged in a shallow dish, and hovering over any fruit highlights it with a black stroke. The visualization uses D3 v7's selection and transition APIs to animate new fruits entering, exiting, and changing type, such as when an apple transforms into a lemon. The code demonstrates enter, update, and exit states using `selectAll`, `merge`, and `transition().duration()`, with interactions driven by `mouseover` and `mouseout` events. All rendering is done in SVG.

14.a - fruit bowl - click to select - dataviz 2018

Five apples and a bowl render as SVG shapes. Clicking a fruit selects it, drawing a black outline. A timelapse removes apples, changes one into a lemon, and removes another, demonstrating D3's enter, update, and exit transitions. The example uses `selection.transition()` for animations, `scaleOrdinal` for colors, and `transition.duration` to animate `attr('r')`, `attr('opacity')`, and transforms.

12.c - fruit bowl - d3 update pattern, nested elements w/ transitions - dataviz 2018

A fruit bowl visualization demonstrates the D3 update pattern for nested elements with transitions. The SVG scene shows apples and lemons positioned inside a bowl, with fruits entering, exiting, and changing type over time. Using d3.select, d3.range, and d3.scaleOrdinal, the code manages enter, update, and exit states via selection.transition().duration(), animating circle radii, fill colors, and text opacity. The example uses fruitGroups.select('circle') and fruitGroups.select('text') to handle sub-elements independently, with Math.random() generating unique IDs for data tracking.

25 - circles on a map - dataviz 2018

A world map displays population data from the UN World Population Data, with circles sized by population using a square root scale. Countries are colored green or red to indicate whether 2018 population data exists, with missing data shown in red. The visualization uses D3 v5's `geoNaturalEarth1` projection, `geoPath`, and `geoCentroid` to position circles on the map, along with `scaleSqrt` for sizing and zoom functionality. TopoJSON from world-atlas provides country boundaries, while a custom size legend shows population values.

Jan 12, 2022

26 - line chart w/ multiple lines - dataviz 2018

A multi-line chart displays a week of temperature readings across multiple cities, with each city drawn as a distinct colored path using smooth curved lines. The visualization sorts city series by their final temperature value in descending order and includes a color legend. Built with D3 v5.6 and SVG, the code uses `d3.nest` for data grouping, `d3.line` with `curveBasis`, and scales for time and temperature axes. Data comes from a CSV file loaded via `d3.csv`.

Jan 12, 2022

11.b - sanfran temp line chart - dataviz 2018

This line chart displays one week of temperature data in San Francisco, sourced from the Data Canvas - Sense Your City project. The visualization uses D3 v7 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for the smoothed path, and circles for individual data points. The chart includes custom margins, gridlines via `tickSize`, and clear axis labels, with styling applied through external CSS.

Jan 12, 2022

19 - legends: color & size - dataviz 2018

Two custom legends demonstrate ordinal color and quantitative size encodings in D3 v7. The color legend uses `scaleOrdinal` to map fruit categories to distinct fills, while the size legend uses `scaleSqrt` to map numeric ticks to circle radii. Both are rendered as SVG groups with circle and text elements, updated through D3’s selection-merging API. The example highlights reusable legend construction patterns within a single static visualization.

Jan 5, 2022

18 - world countries tree visualization - dataviz 2018

This visualization shows the hierarchical structure of world countries, organized by continent and subregion, using a tree layout. The root node labeled “World” branches into continents like Asia, which further divide into subregions such as Southern Asia and Western Asia, eventually listing individual countries. Built with D3 v7, it uses the `tree` layout and `linkHorizontal` path generator to draw curved links, while text labels are positioned by depth with decreasing font size. The SVG canvas supports zooming via `d3.zoom` for interactive exploration. The data originates from a local JSON file.

Jan 4, 2022

17. blank canvas - dataviz 2018

A lime-green, rounded rectangle fills the entire browser viewport, created as a single SVG `<rect>` element. The example demonstrates a minimal blank canvas using D3 v7, with the `select` function targeting the `svg` element. The rectangle's dimensions and position are derived from `document.body.clientWidth` and `document.body.clientHeight`, and its color is set via the `fill` attribute to `#ddf054`. The SVG is styled with a fixed, full-screen body layout from `styles.css`.

Jan 3, 2022

15 - let's make a map - dataviz 2018

A map of the world is drawn using an SVG projection, with countries filled in green and outlined in black against a light teal ocean sphere. The visualization fetches country boundaries from the world-atlas TopoJSON dataset via a URL, then converts them to GeoJSON using the `feature` method. The map renders with the `geoNaturalEarth1` projection and `geoPath` from D3 v7, appending separate path elements for the sphere outline and each country.

Dec 21, 2021

MI ZIP Codes Pop. Density

A choropleth map of Michigan ZIP code tabulation areas visualizes population density using an azimuthal equal-area projection, with each postal region colored by its population-per-land-area ratio. The visualization uses D3.js's `geoAzimuthalEqualArea` projection and `geoPath` to render SVG paths, overlaying administrative boundaries from TopoJSON. Population data from Michigan-demographics.com is joined with ZIP code geometries, and a linear scale maps density values to opacity levels between 0.3 and 1. Hovering reveals the ZIP code and total population.

Dec 21, 2021

MI ZIP Codes

A map of Michigan ZIP code boundaries highlights Grand Rapids ZIP codes in pink against yellow regions. The visualization uses d3.geoPath with an azimuthal equal-area projection rotated to center on Grand Rapids, rendering topojson data from a GitHub repository. React manages the component structure while d3 handles geographic path generation, with hover states and tooltips showing ZIP codes.

Dec 21, 2021

12.a - fruit bowl - d3 update pattern - dataviz 2018

Balls representing apples and lemons enter, update, and exit a horizontal row on an SVG canvas, using the D3 v7 data join pattern. The example demonstrates the enter-merge-exit sequence with `selection.data()`, `.enter().append('circle')`, `.merge()`, and `.exit().remove()`, animating circle radius and x-position via `.transition().duration()`. Colors and radii map ordinal scales (`scaleOrdinal`) for fruit types, while JavaScript `setTimeout` calls drive state changes. SVG circles render the fruit bowl, with transitions smoothly resizing and repositioning elements.

Nov 24, 2021

12.b - fruit bowl - d3 update pattern, nested elements - dataviz 2018

A fruit bowl visualization demonstrates the D3 update pattern with nested elements, showing apples and lemons as circles in a bowl that changes over timed intervals. The code uses d3.scaleOrdinal for colors and radius mapping, with d3-selection’s enter, merge, and exit methods to handle dynamic data updates. An SVG renders the bowl as a rounded rectangle, while each fruit is a group containing a circle and text label. The example includes a deliberate data mutation where an apple becomes a lemon, illustrating how the update pattern reuses existing DOM nodes efficiently.

Nov 24, 2021

11.d - world pop area chart - dataviz 2018

This example visualizes world population by year using a time-series area chart, with a smooth curve filled in steelblue beneath a semi-transparent black line and maroon circles marking each data point. The chart displays population values on the y-axis and dates on the x-axis, with axis labels and grid lines. The code uses d3.csv to load data from a remote CSV file, d3.scaleTime and d3.scaleLinear for scales, and d3.area with d3.curveBasis to generate the filled area path. SVG rendering is used throughout, with axes created via d3.axisBottom and d3.axisLeft.

11.c - sanfran temp area chart - dataviz 2018

A week of San Francisco temperatures appears as a smooth blue area chart with a black line overlay and maroon points marking each reading. The chart uses a time-based x-axis and a linear y-axis for degrees Celsius. Built with D3 v7, it employs `scaleTime`, `scaleLinear`, `d3.line`, `d3.area`, and `curveBasis` for smoothing. Data is loaded via `d3.csv` from a VizHub-hosted CSV. SVG rendering includes gridlines, axis labels, and a title, with styling handled through CSS classes.

11.a - sanfran temp scatta'plot - dataviz 2018

This visualization shows a week of temperature measurements in San Francisco as a scatterplot, with each circle representing a temperature reading over time. The data comes from the Data Canvas - Sense Your City project and is loaded via `d3.csv`. The code uses D3 v7 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while circles are rendered in SVG with a fixed radius and semi-transparent steelblue fill. Gridlines are drawn via tick marks, and the chart includes labeled axes for temperature and time.

10 - cars scatta'plot - dataviz 2018

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each circle represents a car, with opacity to reveal overlapping points. The chart uses d3.csv to load data, d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and d3.extent to set domains. SVG circles are rendered with d3 selections, while styled axis labels and gridlines are drawn via tickSize and tickPadding. The background and circle styling come from CSS in the accompanying stylesheet.

10 - scatta'plot - dataviz 2018

This scatter plot displays the population of the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. The chart uses D3 v7 with SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the categorical y-axis. Axes are customized with `d3.axisBottom` and `d3.axisLeft`, including tick formatting via `d3.format` to abbreviate large numbers. Circle elements represent each country, with data loaded from a CSV file using `d3.csv`.

Nov 22, 2021

04 - let's make a face - dataviz 2018

A smiley face built with SVG and animation shows a yellow circle with two eyes, a grin, and rectangular eyebrows that repeatedly raise and lower. The face is centered in a 960 by 500 viewport, with features positioned via explicit coordinates in the D3 v7 selection and arc API. The eyebrows use chained `transition.attrTween` calls on the `eyeBrows` group to loop between two transforms, while the mouth is drawn with `d3.arc()` using inner and outer radii and angle offsets.

Nov 20, 2021

09 - customizing axes - dataviz 2018

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The chart uses D3 v7’s `scaleLinear` and `scaleBand` for axes, with a customized `axisBottom` that formats tick labels (e.g., converting G to B) and removes domain lines. Left axis labels are simplified by deleting ticks. The SVG rendering includes a title and axis labels, with styling applied via CSS classes.

07 - let's make a bar chart - dataviz 2018

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to horizontal bar lengths and country names to vertical bands. Data is loaded from a CSV file via `d3.csv`, with population values multiplied by 1,000 during preprocessing. The SVG rendering applies a steelblue fill to bars, with margins and axes configured to organize the categorical comparison clearly.

let's make a list from a data file! (rss)

This example demonstrates loading an external RSS feed and rendering its entries as a list. It uses D3 v7’s `xml` method to fetch a YouTube channel feed, then selects all `name` nodes from the parsed XML document and appends them as list items via `selectAll` and `data`. The page also calls `json` on a placeholder API, logging the response to the console. The code illustrates basic data fetching and DOM binding with D3’s selection utilities.

let's make a list from a data file! (xml)

This example uses a small XML file to generate an HTML list. It reads the data from `data.xml` using D3's `xml()` function, then maps the parsed XML elements to list items. The code selects the `<ul>` element, applies D3's selection and data-binding API, and appends an `<li>` for each `<memo>` node, displaying its text content. The visualization highlights how server-side XML data can be directly transformed into client-side DOM elements within a D3.js workflow.

let's make a list from a data file! (json)

This example renders a simple bulleted list from a JSON data file using D3.js. It demonstrates loading external data with `d3.json` and binding an array of strings to list items via `selectAll('li').data()` and the `.enter().append('li')` pattern. The data file contains repeated "one" strings and a final phrase, which are displayed as text inside each `<li>` element. The page consists of a bare `<ul>` element, with all list creation handled programmatically in JavaScript.

let's make a list from a data file! (csv)

This example displays a simple bulleted list generated from a CSV file, rendering each row’s "memo" field as a list item. It uses D3 v7’s `csv` method to asynchronously load the data, then binds it to `li` elements via `selectAll`, `data`, and `enter`. The page also applies basic styling from an external stylesheet, though the visible aesthetic remains minimal.

let's make a list!

This example demonstrates how to render a simple HTML list using D3.js. The code utilizes `d3.select` to target the `ul` element and `d3.selectAll` to create list items from a hardcoded array of strings, with the final element being a playful "banana" pun. Each generated `<li>` element receives the CSS class "poop" and displays its text content through the `.html()` method, resulting in a brown-colored list. The visualization relies on D3’s data-binding API and CSS styling to produce the output.

dv.13 - Loading and Parsing CSV Data

This example demonstrates how to fetch and display raw CSV data as plain text in a web page. It uses the Fetch API to retrieve a CSS named colors dataset from a GitHub gist, then inserts the response text into a `<pre>` element. The code defines an asynchronous `fetchText` helper that reads the response body as text, and handles the promise chain by assigning the resulting string to the page’s root element, showing the comma-separated values without any parsing or visualization.

Mar 24, 2021

Fork of orientation

This visualization showcases ten different texture patterns—hexagons, crosses, caps, woven, waves, squares, circles, complement circles, lines with varying orientations, and nylon—each rendered inside a distinct square outlined in black. Built with D3.js and the texture.js library, the patterns are generated using textures.paths(), textures.circles(), and textures.lines(), with each texture applied as a fill to an SVG rectangle via t.url(). Custom colors, stroke widths, and backgrounds differentiate the patterns.

Mar 22, 2021

dv.45 - missing migrants - part VII - make it fast!

This interactive visualization maps global migrant deaths and disappearances, with bubble size representing the total dead and missing per location. A linked time-series bar chart below displays monthly totals and incident counts, with a brushed time range filtering the map’s data. Built with React and D3, it uses `d3-geo` projections via `geoNaturalEarth1` and `geoPath`, `d3-scale`’s `scaleSqrt`, and `d3-brush` for the histogram selection. Data comes from the Missing Migrants Dataset.

dv.22.1 - the margin convention

This example shows a horizontal bar chart of the top 20 most populous countries, with only rectangular bars and no axes or labels. The chart uses the margin convention by defining a margin object and translating an inner `<g>` element by those offsets, leaving space around the plot area. React state stores the CSV data from the United Nations World Population Prospects 2019, loaded via `d3.csv` with a row function that parses the '2020' population field. Bars are rendered as SVG `<rect>` elements sized using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis.

dv.44 - missing migrants - part VI - brushing

This interactive visualization combines a world map and time-series histogram to explore the Missing Migrants Dataset. A brushed time range filters the map’s proportionally sized circles, which represent monthly death tolls at specific coordinates. The map uses `geoNaturalEarth1` projection with `geoPath` and `geoGraticule` for land and graticules, while the histogram uses `brushX`, `scaleTime`, and `histogram` to bin events. Country boundaries come from World Atlas TopoJSON, with geographic lines from a supplementary JSON source.

dv.43 - missing migrants - part V - multi-view cleanup

A composite visualization of the Missing Migrants Dataset combines a world map with a monthly histogram. The map uses a natural Earth projection to plot incidents as scaled circles, with geographic lines overlaid. The histogram below displays monthly death tolls. Built with React, the visualization employs D3 modules including `geoPath`, `scaleSqrt`, `scaleTime`, and `bin` for histograms, rendering data from CSV and TopoJSON sources.

dv.41 - missing migrants - part IV - multi-views

This interactive visualization combines a world map and a time-series histogram to explore the Missing Migrants Dataset. The map uses a d3-geo-projection natural Earth projection with proportional circles sized by the total dead and missing, while the histogram aggregates monthly totals using d3.bin and d3.timeMonths. Both views render as SVG within a React component, with geographic lines overlaid on the map.

dv.40 - missing migrants - part III - world map

This world map visualizes the Missing Migrants Dataset, with circles sized by the total number of dead and missing individuals at each location. Using React for rendering and d3-geo-projection’s `geoNaturalEarth1` projection with `d3.geoPath`, the map layers country boundaries, graticules, and geographic lines. Circle radii scale via `d3.scaleSqrt`. The data comes from a CSV, while world atlas and line geometries are loaded from TopoJSON.

dv.38 - missing migrants - part I - scatter plot

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single migration event. The x-axis maps the reported date using a time scale, while the y-axis shows the total number of dead and missing individuals. Rendered as an SVG using React and D3 v6, the visualization employs functions like `scaleTime` and `scaleLinear` for scaling, with axes and marks built through custom components like `AxisBottom` and `Marks`.

dv.39 - missing migrants - part II - histogram

This histogram shows the total number of dead and missing migrants per month, aggregated from the Missing Migrants Dataset. The visualization uses d3.bin to group reported dates into monthly buckets and d3.sum to calculate the total for each bin. React renders SVG rectangles via the Marks component, with axes built from d3.scaleTime and d3.scaleLinear. Hovering reveals precise totals using the native SVG title tooltip.

dv.29 - map: usa

This example displays a stylized map of the United States, showing state boundaries and graticules, with land areas shaded and states that highlight on hover. Built with React and D3 v6, it uses `geoAlbersUsa`, `geoPath`, and `geoGraticule` to project and render the map. Data comes from the US Atlas TopoJSON, processed via `feature` and `mesh` from topojson, and is drawn as SVG paths with CSS styling for visual polish.

dv.34 - snazzy scatter plot: w/ color legend

This scatter plot visualizes the Iris flower dataset, displaying four numeric measurements (sepal and petal length/width) on the X and Y axes with interactive dropdown menus for selecting which attributes to compare. Species are encoded through a color ordinal scale with a legend in the right margin, and each point includes a hover tooltip showing the species and coordinate values. Built with React and D3 v6, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, rendering as SVG circles.

dv.35 - interactive color legend

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting axes via React dropdowns or swapping them with a button. The visualization uses D3 scales for positioning and an ordinal color scale to encode species, rendered as SVG circles. An interactive color legend highlights points of a selected species by fading others, implemented with React state and mouse event handlers.

dv.26 - working with time

A scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset. The x-axis uses d3.scaleTime to display timestamps with a day-of-week format, while the y-axis uses d3.scaleLinear for temperature values. React components render SVG circles for each data point, with axes generated by custom AxisBottom and AxisLeft components using D3 ticks. Native SVG `<title>` elements provide tooltips showing the temperature value per point.

dv.25 - scatter plot: sepals

A scatter plot of the Iris Dataset, showing sepal length against sepal width with points colored by species using a plasma color scale. The visualization is built with React and D3 v6, using `scaleLinear` for axes, `scaleOrdinal` for species colors, and SVG circles rendered via the `Marks` component. Axis ticks are labeled using the `format` function, and hover tooltips display species and values. Data is loaded asynchronously with `csv` from a GitHub gist.

dv.32 - snazzy scatter plot: w/ menus

This interactive scatter plot visualizes the Iris Dataset, displaying measurements of sepal and petal dimensions with points colored by species. Two dropdown menus allow users to select which attribute appears on the X and Y axes, re-scaling the plot accordingly. Built with React and D3 v6, it uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for species colors, and renders SVG circles with tooltips showing exact values.

dv.31 - scatter plot: w/ menus

This interactive scatter plot visualizes the Iris Dataset, showing measurements of sepal and petal dimensions for three flower species. Users can dynamically select which attribute to display on the x-axis and y-axis via dropdown menus that populate the D3.js linear scales. The React application renders circles in SVG format, with species color-coded using d3.scaleOrdinal with the schemeCategory10 palette. Hovering over any circle reveals a tooltip with the species name and exact coordinates, while axis labels update to reflect the current selections.

dv.30 - menus w/ react

A pet-selection interface shows a dropdown menu listing six animals—dog, cat, hamster, parrot, spider, and goldfish—with the parrot preselected. A React state variable stores the current choice, and selecting a new value logs it to the console. The custom `Dropdown` component uses React’s `useState`, `onChange`, and `defaultValue` attributes, while D3 v5 and ReactDOM 16.9 are loaded via unpkg, with the menu styled through global CSS.

dv.27 - stylin' line chart

This stylin' line chart visualizes one week of temperature data from the Data Canvas Sense Your City Dataset. React manages the component tree, while D3 v6 scales and axes map timestamps to temperatures, with a smooth natural curve connecting the points. The SVG rendering includes circular markers with native `<title>` tooltips and a custom Poppins font, styled with bold orange strokes and minimal gray ticks.

dv.25 - scatter plot: petals

A scatter plot of the Iris dataset displays petal length on the x-axis and petal width on the y-axis, with each point colored by species and showing tooltips on hover. Built with React and D3 v6, it uses scaleLinear for axes, scaleOrdinal with schemeCategory10 for species colors, and scaleLinear for spacing. SVG circles render the marks, while custom AxisBottom and AxisLeft components generate tick lines and labels. The data loads as CSV via d3.csv.

dv.24 - dressed-up bar chart

A dressed-up bar chart displays the top 30 most populous countries using data from the United Nations World Population Prospects 2019. Horizontal bars rendered as golden SVG rectangles show each country’s population, with a formatted log-scaled axis converting values to billions. The chart uses React for component structure, D3 scales (scaleBand, scaleLinear) for positioning, and includes native SVG tooltips via the `<title>` element. The right-aligned country labels come from a custom AxisLeft component.

dv.23 - refactored bar chart

This example shows the top 20 most populous countries as horizontal bars, with country names on the left axis and population values on the bottom axis. The React app loads CSV data from the UN World Population Prospects 2019, sorts by 2020 population, and renders SVG rectangles using d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. Axis labels and tick marks are generated by custom React components that use d3 scale methods to position text and lines. The chart updates automatically when the data loads asynchronously via d3.csv.

dv.22.2 - axes & labels w/ react & d3

This bar chart displays the 20 most populous countries, with populations from the United Nations World Population Prospects 2019 dataset. D3.js scales map country names to the y-axis and population values to the x-axis. React renders the SVG, with map methods generating axis ticks and labels. The chart uses `scaleBand` and `scaleLinear` from D3, and React's `useState` and `useEffect` for data loading and state management.

dv.21 - basic bar chart

This example displays the top 20 most populous countries as horizontal bars, ranked by their 2020 population estimates from the United Nations World Population Prospects 2019 dataset. It renders an SVG bar chart using React for component structure and d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.csv for data loading. The chart intentionally has no axes or labels, using only rectangles whose widths encode population values.

dv.20 - visualizing data with react & d3

A radial burst chart displays CSS named colors as arcs arranged around a central point, encoding each color value directly as the fill of its corresponding path. The visualization loads data from a CSV file using D3's `csv` utility, then React renders the SVG paths. D3's `arc` and `pie` functions compute the arc geometries, while the `transform` attribute centers the group. The example demonstrates integrating React for UI rendering with D3 for data processing and visualization calculations, producing a single interactive-free SVG output.

dv.16 - d3 & react: loading data

This example demonstrates how to combine React and D3 for asynchronous data loading. The app fetches a CSV file containing CSS named colors from a GitHub gist, then displays a summary of the loaded data—its size in kilobytes, row count, and column count—in large text. The React `useState` and `useEffect` hooks manage the loading state, while the D3 `csv` function handles the network request and parsing. D3’s `csvFormat` calculates the data size for the message.

dv.15 - d3: loading & parsing data

A minimal web page displays a summary of a CSV file’s size and shape, listing the data’s kilobyte count, row count, and column count as plain text. The React-based script loads the data from a GitHub gist of CSS named colors using d3.csv, then formats the message with d3.csvFormat and calculates the column count from the parsed data’s `.columns` array. The example demonstrates basic CSV loading and parsing with D3’s high-level API.

dv.14 - Mouse Follewer

A full-screen SVG circle follows the mouse cursor in real time, remaining centered on the current pointer position. The example uses React with the `useState` and `useCallback` hooks to track cursor coordinates and update the circle's `cx` and `cy` attributes. React DOM renders the SVG element, which listens for `onMouseMove` events, and the circle's radius is fixed at 30 pixels. The visualization demonstrates a simple interactive pointer-tracking effect with no external data source.

GR MI ZIP Codes

This visualization shows Grand Rapids, Michigan ZIP codes as choropleth-style regions, with population density encoded through fill opacity and color intensity. The map uses a customized azimuthal equal-area projection via `d3.geoPath` and `geoAzimuthalEqualArea`, rotated to focus on the city. ZIP code boundaries render from a GeoJSON source, while population data from city-data.com drives a `scaleLinear` mapping to opacity. Hover tooltips display each ZIP code and its population, and the map includes Michigan administrative outlines for context. React manages component state, with D3 v6 handling data loading and path generation.

Mar 7, 2021

world map w/ country names

This example displays a world map with country boundaries and names, rendered as SVG in a React component. It uses the `d3.geoPath` and `d3-geo-projection` `geoNaturalEarth1` projection to draw landmasses, graticules, and country borders, with country names shown via SVG `<title>` tooltips on hover. Data comes from the World Atlas TopoJSON, loaded with `d3.json` and processed using `topojson.feature` and `topojson.mesh`. The map is styled with CSS, including hover effects that fill individual countries.

Feb 21, 2021

world map w/ cities

This visualization displays a world map with cities whose populations exceed 50,000, using a natural Earth projection that spins to reveal different hemispheres. The map incorporates country boundaries, interior borders, graticules, and geographic lines, with land areas filled by an animated pattern. City markers are sized by population using a square-root scale, while country boundaries include tooltips on hover. The project uses React with D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, sourcing city data from Simplemaps and country shapes from World Atlas TopoJSON, all rendered as SVG elements.

Feb 7, 2021

map: MI Admin (from shapefile...not working)

This example displays the administrative boundaries of Michigan as an SVG map, rendered using a custom azimuthal equal-area projection. The visualization shows land polygons from a TopoJSON file, which is derived from MapCruzin shapefiles, and includes a graticule and sphere outline for geographic context. It uses `d3.geoPath` to project features, `d3.geoAzimuthalEqualArea` for the projection, and `topojson.feature` to convert the TopoJSON topology into GeoJSON features. The map is built with React, where hovering over a landmass reveals its name via a tooltip.

Jan 26, 2021

map: NY Counties

This interactive map displays New York State counties using a glitchy, layered rendering technique. The visualization uses D3’s geoAlbersUsa projection and geoPath to render county boundaries from a TopoJSON source, with hover effects that highlight individual counties. The map also includes world landmasses and graticules, creating an overlapping collage effect where the state’s counties appear superimposed on global geography. React manages the component state while D3’s json and topojson.feature APIs load and parse the geographic data for SVG rendering. The stylized CSS uses semi-transparent fills and hover states to emphasize the experimental aesthetic.

Jan 26, 2021

world map w/ cities

This example presents a world map visualization of cities with populations exceeding 50,000. It uses a React framework with SVG rendering, employing d3-geo-projection’s geoNaturalEarth1 projection and d3-geo’s geoPath to draw landmasses, country boundaries, graticules, and geographic lines. City locations are plotted as circles from Simplemaps’ World Cities Database, while country and land data come from World Atlas TopoJSON. The visualization includes hover tooltips showing country names, with styling applied through CSS.

Nov 10, 2020

map: geo lines

A map of the United States renders with red geographic lines overlaid, based on a TopoJSON file of geographic marks. Built with React and D3, it uses `d3.geoPath` with the `geoAlbersUsa` projection to draw the land and country boundaries, while a separate `geoNaturalEarth1` projection renders only the line features. The visualization includes a graticule and sphere, and hovering over the map highlights the land areas.

Nov 10, 2020

egg world

This map shows countries, land masses, graticules, and geographic lines from the World Atlas TopoJSON and Natural Earth datasets. The map uses D3's `geoNaturalEarth1` projection rotated with `rotate([270,90,0])`, and renders via `geoPath` in SVG. Countries are filled with a translucent color, while the sphere and graticules are drawn, and a `mesh` provides interior boundaries. Hovering over a country reveals its name via an SVG `<title>` tooltip.

Nov 9, 2020

map: usa, counties

This example renders a choropleth-style map of the United States, displaying county and state boundaries overlaid on landmasses, with graticules and a sphere outline. It uses a React component with `d3.geoAlbersUsa` for projection and `d3.geoPath` for drawing geometries. Data comes from the US Atlas TopoJSON (`us-atlas@3.0.0/counties-10m.json`), processed with `topojson.feature` and `topojson.mesh`. Interactive tooltips show county and state names on hover. The SVG output is styled with semi-transparent fills and distinctive boundary strokes.

Nov 8, 2020

map mess

This example renders a world map using the Albers USA projection, with landmasses, country borders, and a graticule overlaid on a shaded sphere. A separate mark component attempts to map Michigan voting precincts from a TopoJSON source onto the same space, but the mismatched projections produce a glitchy, unintuitive visual mess. Hovering over the malformed shapes reveals the country-level tooltips from the world map. The visualization uses d3.geoPath, d3.geoGraticule, and d3.geoNaturalEarth1 with React and SVG rendering.

Nov 8, 2020

snazzy scatter plot: w/ colors

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which numerical attributes to plot on the X and Y axes, while points are colored by species using a d3.scaleOrdinal with a semi-transparent color scheme. Built with React and D3 v6, the visualization renders as SVG elements, with axes generated via d3.scaleLinear and data loaded asynchronously from a CSV file using d3.csv.

Nov 6, 2020