Warren-Fitzhenry

Blank Canvas

This example demonstrates a simple, blank SVG canvas with rounded corners, filling the entire browser viewport. The visualization uses JavaScript and the D3.js library (version 5) to select the SVG element and dynamically set its width and height to match the body's client dimensions. A single `rect` element is appended to the SVG, with its dimensions set to the full viewport size and a corner radius of 40 pixels. The accompanying CSS fixes the body to the viewport edges and defines styling for potential axis, line, and circle elements, though the displayed chart contains no data or additional marks.

Jan 5, 2020

Bowl of Fruit - General Update Pattern

Five apples rendered as red circles transition in and out of a bowl over time, demonstrating the D3 general update pattern in SVG. The code uses `selectAll` and `.data()` joins, followed by `.enter()` and `.merge()` to handle entering and updating elements, while `.exit().remove()` removes disappearing fruits. A `scaleOrdinal` maps fruit types to colors and radii, with 1000ms transitions animating radius and fill changes as fruit is eaten, replaced by a lemon, or filtered out.

Jan 5, 2020

Scatter Plot with Menus

This example displays a scatter plot of car weight against horsepower, with each vehicle represented by a semi-transparent red circle. The visualization uses D3 version 5 to load the auto-mpg dataset from a CSV file, map the data to linear scales, and render the axes and points in an SVG canvas. The code defines value accessors for the x and y variables, applies axis guides with tick lines, and includes axis labels and a title, all styled via an external stylesheet.

Choropleth Map with interactions

An interactive choropleth map encodes a country's economy category through a spectral color scale. Pan and zoom via D3's `zoom` and `event` APIs manipulate the SVG projection, while clicking a legend tick highlights only countries in that category. Hovering reveals the country name and value via a `title` element. The map uses `d3.geoPath` and `geoNaturalEarth1` on World Atlas TopoJSON, with the legend built from `scaleOrdinal` and `schemeSpectral`.

Easy map interactions

This example demonstrates an interactive map of world countries, colored by economic classification using a spectral color scale. Users can zoom and pan the map, and click the color legend to filter countries by economy type, which fades non-selected categories. Built with D3 v5, it uses `d3.geoPath` for map projection and `d3.geoNaturalEarth1` for geometry, coupled with `d3.zoom` for pan/zoom interactions. Data comes from the world-atlas package, merging TopoJSON geometry with TSV tabular data. The map renders as SVG paths, with hover effects and animated transitions for legend interactions.

TODO Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal circles, with point size scaled by population using a square root scale. The map renders via React and D3, using `geoNaturalEarth1` projection and `geoPath` for country boundaries, graticules, and sphere outlines. City coordinates and populations load from a CSV via `d3.csv`, while country topology comes from TopoJSON through `d3.json` and `topojson.feature`/`mesh`.

Color and Size Legends

This example demonstrates two distinct legend types rendered side by side in SVG. A color legend uses `d3.scaleOrdinal` to map fruit categories—apple, lemon, lime, and orange—to distinct hues, with each entry displayed as a filled circle and label. A size legend uses `d3.scaleSqrt` to encode a numeric domain from 0 to 10 through varying circle radii, generating tick values via `sizeScale.ticks`. Both legends are constructed with reusable D3 functions that bind data to groups, updating circle and text elements on enter and merge.

Jan 3, 2020

Colour and Size Legends

Animated fruit icons show how ordinal color and size scales encode categorical data. In this D3 v5 example, apples and lemons appear as red and yellow circles whose radius reflects a separate size scale. The `colorLegend` function uses the data join pattern, animating new circles from radius zero through `transition().duration(1000)`, while exits are removed. SVG rendering and the `scaleOrdinal` API handle the legend mappings.

Jan 3, 2020

TODO D3 Example

This example visualizes the religious composition of the world's 20 most populous countries using a stacked horizontal bar chart. Each bar represents a country's total population segmented by religion, with colors distinguishing religious groups and a legend that highlights specific segments on hover. Built with React and D3.js, it employs `d3.layout.stack` for stacking, `d3.svg.axis` for scales, `d3.legend.color` for the interactive legend, and `d3-tip` for tooltips. Data comes from a CSV file showing population counts per religion and country, rendered as SVG with animated hover effects.

Jan 2, 2020

Tree Diagram

This interactive tree diagram displays a hierarchical dataset of world geography, starting from the root "World" and branching into continents, regions, and countries. It is rendered using D3 v5 with an SVG output, employing the `tree` layout and `hierarchy` functions. The visualization uses `linkHorizontal` to draw curved links between nodes and supports zooming and panning via the `zoom` behavior. Text labels are positioned based on node coordinates, with font sizes scaling by depth, and the data is loaded from a JSON file.

Jan 2, 2020

Easy map interactions

This example displays an interactive world map rendered with SVG, using natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. The map loads country boundaries and names from the world-atlas TopoJSON and TSV datasets. Users can pan and zoom using d3.zoom, which applies a transform to the map group. Hovering highlights individual countries in red, and each country includes a native SVG title element displaying its name as a tooltip.

Jan 1, 2020

Making a map

This example displays a static world map with country boundaries and a blue sphere backdrop, rendered entirely as SVG paths. It uses a Natural Earth projection from `d3.geoNaturalEarth1`, with `d3.geoPath` generating the geographic shapes. The country data comes from the World Atlas TopoJSON dataset, processed through `topojson.feature`. The visualization shows the map in green fill, black strokes, and a dark blue ocean, with a light blue page background.

Jan 1, 2020

Bowl of Fruit - Hover to Select

Five fruit circles in a bowl render as apples and lemons across an SVG canvas. Hovering over a fruit selects it, drawing a black stroke around it, while moving the mouse away deselects it. The example uses d3’s data join with enter, update, and exit selections, and d3-transition’s `transition().duration()` to animate circle radius and position changes over one second. `d3.scaleOrdinal` maps fruit types to colors and sizes.

Dec 31, 2019

Bowl of Fruit - Click to Select

Five circles represent apples in an SVG bowl. Clicking one turns its stroke black to mark it selected. The example demonstrates the D3 data join with enter, update, and exit selections, animating circle radius, position, fill, and stroke via `transition().duration()`. Using `scaleOrdinal` for color and size, it removes fruits on a timer, filters an apple, and changes one to a lemon, all rendered with `select` and `fruitBowl`.

Dec 31, 2019

Making a face with D3

A yellow smiley face with eyes, eyebrows, and a mouth is rendered in an SVG canvas. The eyebrows animate by moving upward and then returning to their original position over two separate two-second transitions. Built with D3 v5, the code uses selection methods like `select`, `append`, and `attr`, and leverages `d3.arc` to generate the mouth path. The animation is driven by chained `transition().duration()` calls, while geometry is positioned using numeric constants for spacing and offsets.

Dec 28, 2019

World Population Area Chart

This area chart visualizes global population growth from 1960 to 2015, using a smooth filled path to emphasize the upward trend. The visualization is rendered as an SVG using D3 v5, with a time-scaled x-axis for years and a linear y-axis for population, formatted in billions. Data is loaded from a CSV file, and the area generator uses `curveBasis` to create the spline-based shape, with custom axis labels and grid lines.

Dec 28, 2019

Temperature in San Francisco Line Chart

This example visualizes a week of temperature readings in San Francisco as a smooth line chart, with time on the x-axis and temperature on the y-axis. The chart includes labeled axes, gridlines, and a title. The visualization is rendered as SVG using D3 v5, employing `scaleTime`, `scaleLinear`, `line` with `curveBasis`, and `axisLeft` and `axisBottom` for the axes. Data is loaded from a CSV file hosted on VizHub.

Dec 28, 2019

TODO: Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country, with a linked color legend that filters the map when a legend item is clicked. Hovering over a legend entry dims all other legend items and corresponding map regions to 0.1 opacity, while clicking toggles the filter on or off. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to project world boundaries from TopoJSON data, with d3.scaleOrdinal and schemeSpectral encoding the categorical values. D3 zoom enables panning and zooming, and the legend’s interactive filtering is handled via click events on SVG groups.

Cars Scatter Plot

This scatter plot from the auto-mpg dataset visualizes vehicle weight against horsepower, with each circle representing a car. The red, semi-transparent points reveal the relationship between these two variables. Built with D3 v5, the visualization uses `scaleLinear` for both axes, `axisLeft` and `axisBottom` for tick marks, and SVG `circle` elements for data points. The code applies a `nice()` function to scale domains and renders data fetched from a CSV via `csv()`. Axis labels and a title clarify the chart's purpose.

TODO Heatmap

This heatmap visualizes the frequency of TODO comments across code files, with each cell colored by intensity on a dark background. The visualization uses D3 v5’s `d3.scaleSequential` for color mapping and `d3.select` with SVG rect elements to construct the grid. Data is precomputed and rendered as a static matrix, with axis labels omitted. The page loads D3 from a CDN and applies a minimalist CSS reset, focusing entirely on the density pattern of coding tasks. The SVG canvas is 960 by 500 pixels, and the visualization reads from a bundled JavaScript file.

TODO: Migrant Deaths Linked Views with Brushing

This interactive visualization links a bubble map and a time-series histogram to explore migrant deaths and disappearances worldwide. The map displays the total dead and missing per location with bubble size scaled by magnitude, while the histogram shows monthly totals over time. Brushing a time range in the histogram filters the map’s bubbles to show only incidents within that period. The visualization uses React with d3.scaleSqrt, d3.geoNaturalEarth1, and d3.geoPath for mapping, and d3.brushX for the linked selection. Data comes from a CSV of Missing Migrants Global incidents.

Making a Bar Chart

This bar chart displays the frequency of each letter in the English alphabet, based on a CSV dataset, using D3 v5 with SVG rendering. The example highlights population data from the United Nations’ 2018 estimates for the top 10 most populous countries, though the plotted frequencies come from the provided `data.csv`. The code demonstrates customizing D3 axes by removing the y-axis domain line and adding outer tick removal on the x-axis, while using `scaleBand` and `scaleLinear` to map categorical and continuous scales.

Dec 26, 2019

Interactive Bar Chat

An interactive bar chart displays the 2018 Stack Overflow popularity ratings for ten programming languages, with each bar labeled by its percentage value. Hovering over a bar highlights it, increases its width, draws a dashed threshold line at that language's value, and reveals each bar's percentage difference relative to the highlighted language. The visualization is built with D3 v5, using `scaleBand` and `scaleLinear` for axes, SVG rects for bars, and transitions triggered by mouseenter and mouseleave events. Data comes from a local `data.js` file, with styling handled by an external stylesheet.

Dec 26, 2019

Making a Bar Chart

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 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` and `axisLeft` to render ticks, with tick labels formatted in billions (e.g., "1.42B"). The SVG rendering includes custom styling for grid lines, axis labels, and a title. Data is loaded asynchronously from a CSV file using `d3.csv`, with population values converted from strings to numbers.

Dec 24, 2019