Brett Cunningham

@MrSankofa·12 public vizzes

Basic Circle Pack - Add or Remove Trees from the DOM

A circle-packing visualization displays a hierarchical dataset as nested circles, with buttons to add or remove data nodes from the DOM. Using D3 v5’s `d3.pack` layout and `d3.hierarchy`, the SVG renders each node’s size proportional to its value. Clicking a circle zooms via a tween that interpolates the view, while mouseover and mouseout events add or remove stroke outlines. The code uses D3 selections, transitions, and the `transition.tween` API for smooth animation.

Nov 20, 2019

Loading thumbnail…

Basic Circle Pack

A hierarchical circle-packing visualization displays nested data as clustered bubbles, with zooming and panning via mouse clicks. The demo uses D3.js v5 to construct the SVG layout, apply an HSL color scale by depth, and animate transitions between hierarchy levels using `transition` and `interpolateZoom`. Buttons add or remove data nodes, while the pack layout is generated with `d3.pack` and `d3.hierarchy`. The dataset is hardcoded from a “flare” file structure.

Nov 20, 2019

Loading thumbnail…

Basic Circle Pack 2 - working

This example shows an interactive circle packing visualization of hierarchical data. Circles represent nodes in a tree, with nested circles indicating parent-child relationships, and clicking a circle zooms to expand that branch. The visualization uses d3.pack for layout and d3.hierarchy with sum and sort for data preparation. Add and remove buttons trigger rendering, each creating a new group of circles with different data. The code uses d3.scaleLinear with interpolateHcl for color encoding, d3.interpolateZoom for animated transitions, and SVG for rendering with click, mouseover, and mouseout event handlers.

Nov 19, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows move in response to button clicks. The page provides "Add Data" and "Remove Data" buttons that trigger animated updates to the face’s features. The code uses d3.select to target the SVG element, d3.scaleLinear with d3.interpolateHcl for color transitions, and d3.pack to flatten hierarchical data into circle layouts. The rendering relies on SVG elements and D3’s enter/exit pattern, with animations driven by D3 transitions. The data comes from a nested JSON hierarchy (flare dataset) that is visualized through the packing layout.

Nov 19, 2019

Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with SVG is animated so its eyebrows move, demonstrating fundamental DOM manipulation in D3.js. The example uses a linear color scale with `d3.interpolateHcl` for the gradient background and D3’s selection methods to bind and update elements. The code also loads a hierarchy dataset and applies `d3.pack` for circular packing, though the visible rendering focuses on the animated face. Rendering is SVG-based with transitions, shown via a video and live code.

Nov 19, 2019

Loading thumbnail…

Selection Join

This example demonstrates D3’s selection join by rendering a row of red circles that appear and disappear as users click the “Add Data” and “Remove Data” buttons. The circles are generated from a small array of fruit objects, which the buttons mutate by pushing or popping elements before re-rendering. The code uses `selectAll` with `data` and the `join` method to bind the array to SVG circle elements, updating positions via `attr`. It relies on `d3.select` and `d3.range`, with SVG output. The color is overridden to none, leaving black-outlined circles.

Nov 19, 2019

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the General Update Pattern in D3 v5, showing how to add and remove circles representing fruit from a bowl. Users click buttons to push or pop apples from an array, and the visualization updates accordingly. The code uses `selection.data()`, `enter()`, `exit()`, and `merge()` to handle entering and exiting elements, while a separate `fruitBowl` module creates the bowl shape and fruit groups with `scaleOrdinal` for color and radius. The rendering uses SVG with animated transitions between states.

Nov 19, 2019

Loading thumbnail…

Circle Packs

A circle-packing visualization displays a horizontal row of fruit icons, each rendered as a colored circle with a text label, inside a rounded rectangular bowl. A color scale and a radius scale map fruit types to distinct hues and sizes. Users can add or remove apples via buttons, triggering enter, update, and exit selections that animate the circles through D3’s data join. The example uses D3 v5 with SVG, ordinal scales, and explicit selection methods to manage dynamic data.

Nov 17, 2019

Loading thumbnail…

Let's explore data joins with a bar char

This example uses a bar chart to illustrate data joins in D3.js, showing population figures for nine countries from a CSV file. The bars are rendered as SVG rectangles, with their heights mapped through `scaleBand` and widths through `scaleLinear`. The code loads data with `d3.csv`, converts population values to numbers, and appends rects via `selectAll().data().enter()`, demonstrating the fundamental enter selection pattern. The chart itself displays the sorted country population distribution, with China and India leading by a wide margin.

Nov 16, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It shows how to customize D3 axes by removing the default domain lines, styling tick lines in a light gray, and formatting x-axis labels to abbreviate large numbers (e.g., converting gigas to billions) via tickFormat. The chart is rendered as an SVG, built with D3 v5, using scaleLinear for the x-axis, scaleBand for the y-axis, and axisBottom to generate the customized axes.

Nov 16, 2019

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn in SVG animates as its eyebrows bounce up and down. Built with D3.js v5, the example constructs circles for the eyes and a path using the `arc` generator for the mouth, then applies chained `transition()` calls to shift the eyebrow group’s transform. The code demonstrates core DOM selection and manipulation via `d3.select`, plus attribute setting and SVG grouping, with no external data source.

Nov 15, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—positioned and styled through SVG attributes and CSS classes. It shows how shapes inherit fill and stroke properties from a parent `<g>` element, how transforms like `scale` and `translate` reposition entire groups, and how CSS rules can assign stroke color and width to line elements. The code uses raw SVG markup and linked CSS styles, with no JavaScript or external visualization libraries.

Nov 15, 2019