James Barbour, Jr.

@jbarbour·10 public vizzes

Blank Canvas

A single, empty SVG canvas fills the viewport with no data or marks rendered. The example demonstrates a minimal D3 v5 setup where `select` is imported from the d3 library and used to target the `svg` element, while `document.body.clientWidth` and `clientHeight` capture the available screen dimensions. The `styles.css` fixes the body to the viewport edges with hidden overflow, ensuring the blank canvas remains the sole focus. This serves as a starting template for building visualizations on a clean slate.

May 18, 2020

Loading thumbnail…

Cheap Tricks 4 Interaction

This example shows a world map with countries rendered as light green SVG paths that turn red on hover, with a blue sphere backdrop. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, pulling country boundaries from TopoJSON and names from TSV data in the world-atlas package. Pan and zoom interactions are implemented with `d3.zoom`, applying transform events to a grouped `g` element containing all country paths, while country names appear as tooltips through SVG `title` elements.

May 4, 2020

Loading thumbnail…

Let's make a map with D3.js

This example visualizes world countries on a Natural Earth projection, with landmasses rendered in light green against a blue spherical backdrop. The map is drawn as SVG paths using D3.js v5, combining the `geoNaturalEarth1` projection, `geoPath` for geometry generation, and the topojson library’s `feature` function to convert TopoJSON country boundaries. Geographic data is loaded remotely from the world-atlas package, and styling is applied via CSS classes for the sphere and country outlines.

Apr 24, 2020

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG bowl, transitioning in size and position as apples are removed or swapped for lemons over timed intervals. Clicking a circle selects it, drawing a black stroke around the chosen fruit; the code tracks the selected ID and re-renders via `fruitBowl`. It uses `d3.scaleOrdinal` for color and radius mapping, `selection.merge` for updating entered and existing nodes, and `transition.attr` for animated enter, update, and exit states.

Apr 23, 2020

Loading thumbnail…

Jim H. Budget Example

This example presents a grouped bar chart of fiscal year 2020 budget data, comparing budget, committed, obligated, and expensed amounts across different organizational units. Data from the Sample_Budget_Data.csv file is aggregated by organization using D3 v3. The visualization uses an ordinal scale for categories and a linear scale for values, rendering SVG rectangles with group colors. Tooltips provide additional detail on hover, and the y-axis fades in via a transition.

Apr 22, 2020

Loading thumbnail…

Budget Bar Chart

This bar chart visualizes sample budget data for fiscal year 2020, displaying the budget amount for each project category (Development, Field Support, Liasion, and Operations) on a linear scale. The height of each bar represents the budget in thousands of dollars, while hovering over a bar reveals a tooltip showing the OE and Expensed values for that entry. The visualization uses D3 v5 to load the CSV data, parse the currency-formatted numeric values, and render bars via SVG rect elements with a band scale for the x-axis and a linear scale for the y-axis.

Apr 20, 2020

Loading thumbnail…

Customizing Axes

This example visualizes the 20 largest countries by population in 2017 as a horizontal bar chart, using a linear x-axis scaled to population values and a band y-axis for country names. The axes are customized: the x-axis formats tick labels in compact notation (e.g., “1.41B”) and draws grid lines, while the y-axis removes its domain and tick lines. The code uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft within a React setup, rendering SVG bars with steelblue fills.

Apr 17, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern

A bowl of fruit demonstrates the D3 general update pattern, animating changes to a dataset of circles as apples are eaten or replaced with lemons. The visualization shows how entering, updating, and exiting elements are handled distinctly, with new fruits scaling up from radius zero and removed fruits shrinking away. Using d3.selectAll and data joins, the code applies ordinal scales for color and radius, then transitions positions and sizes over one-second durations. Fruit identities persist through the data key function, ensuring stable updates as the array mutates over time.

Apr 14, 2020

Loading thumbnail…

World Population

This visualization shows the growth of world population over time, using an area chart filled with maroon. The data comes from a CSV file loaded via `d3.csv`. The code uses `d3.scaleTime` for the time axis, `d3.scaleLinear` for population, and `d3.area` with `curveBasis` to generate a smooth filled path. Axis labels and ticks are rendered with `d3.axisBottom` and `d3.axisLeft`, with population formatted in billions.

Apr 14, 2020

Loading thumbnail…

Let's make a face with D3.js

This example creates a simple cartoon face from geometric shapes, with a yellow circular head, two eyes, and a mouth drawn as an arc. Built with D3.js v5 and React, the visualization uses SVG elements including `circle`, `rect`, and `path` to compose the face. The code animates the right eyebrow using chained `.transition().duration(2000).attr('y', ...)` calls, moving it down and back up over four seconds. Static facial features are positioned using absolute pixel offsets, while the mouth is generated via the `arc()` API with specified inner and outer radii and angular range.

Apr 8, 2020