Matthew Bruffey

@mdbruffey·12 public vizzes

Animated Scatterplot with Menus

This animated scatterplot displays the Iris dataset, plotting sepal length against petal width with points colored by species. The visualization uses D3.js to render circles that transition smoothly between positions when the x-axis mapping changes between four different measurements via a menu. The chart includes labeled axes, a title, and sequential animations that delay each point's movement for a staggered effect. The reusable chart component follows Mike Bostock's conventions, allowing configurable accessors, radii, and margins with default values.

Aug 3, 2023

Loading thumbnail…

Animated Reusable D3 Scatterplot

This example presents an animated scatterplot of the Iris dataset, cycling through different x-axis measurements every three seconds. The chart is built as a reusable D3 module using the `scatterPlot` function, which configures scales, axes, and transitions. It leverages `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.transition` to animate point positions and axis label fade-ins, with circles entering and exiting via `selection.join`. Data is loaded as CSV, and SVG rendering handles all visual elements.

Jul 12, 2023

Loading thumbnail…

Dynamic D3 Scatterplot

The dynamic D3 scatterplot visualizes the Iris dataset, cycling through petal width, sepal width, petal length, and sepal length on the x-axis every two seconds while sepal length remains on the y-axis. It uses SVG rendering with D3 scales, axes, ordinal symbols for species, and a reusable chart function following Mike Bostock's convention. The chart updates via `setInterval`, calling the chart with new accessor functions, while axes and labels adjust to data ranges extended by ten percent.

Jul 12, 2023

Loading thumbnail…

Reusable D3 Scatterplot with Default Values

This reusable scatterplot displays the Iris dataset, plotting petal width against sepal length with points encoded by species and adjustable point size, chart title, and axis labels. Built as a reusable D3 chart following Mike Bostock’s “Towards Reusable Charts” convention, it exposes setter functions for width, height, data, xValue, yValue, size, symbolValue, margin, and labels. The code uses D3 v3 APIs like `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom`. Axis ranges extend 10% beyond data extremes, and all options except data fall back to defaults when unspecified.

Jul 10, 2023

Loading thumbnail…

War Length vs Deaths Scatterplot

This scatterplot visualizes the relationship between war duration in years and the number of battle deaths, excluding WWI and WWII to avoid scale distortion. Each circle represents a conflict, with hover tooltips revealing the war’s name, duration, and death toll. Built with D3.js, it uses `scaleLinear` for axes, `csv` for data loading from Curran’s Repository, and SVG rendering. The chart includes labeled axes, a title, and custom tooltip styling via CSS.

Jul 10, 2023

Loading thumbnail…

Reusable D3 Scatterplot

This scatterplot displays the Iris dataset, plotting petal width against sepal length and encoding species with distinct symbols. Built as a reusable React component, it uses the D3.js library’s `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` APIs, with marks rendered as SVG paths via the `symbol` function. The chart automatically sizes to the browser window, applies margins, and includes labeled axes, regenerating whenever input parameters change.

Jul 9, 2023

Loading thumbnail…

D3 Scatterplot

This example displays the classic Iris dataset as an SVG scatterplot, plotting petal width against sepal length. The visualization uses D3’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data values to pixel coordinates and render labeled axes. Data is loaded asynchronously with `csv()` and parsed to numeric fields. Circles are drawn using D3’s `selectAll().data().join()` pattern, with the plot sized to fill the browser window.

Jul 8, 2023

Loading thumbnail…

D3 Selection Exploration

Animated sine waves rendered as thick black polylines on a full-window SVG. The visualization uses D3 v7's `select`, `range`, and data joins to update 1,000 linked line segments at 6 frames per second, with each point’s y-position oscillating via a sine function of its index and time. The entire scene is redrawn per tick, shifting hues and motion continuously.

Jul 7, 2023

Loading thumbnail…

JS in HTML

This example shows a minimal setup for using D3 within an HTML page with JavaScript modules. It demonstrates how to import functions from D3 and from a local module, logging both a custom string and the `select` function to the browser console. The code uses D3 v7 via a CDN link, React is referenced only in the README, and the visible behavior is limited to console output with no visualization rendered.

Jul 7, 2023

Loading thumbnail…

JavaScript Arrays

This example demonstrates JavaScript array manipulation using D3’s `ascending` import, with a custom `range` function that builds an array of 30 numbers. It shows filtering, sorting, mapping, and reducing operations on that array, logging each result to the console. The final step reduces an array of key-value entries into a single object, illustrating how `reduce` can transform data structures. No visual elements are rendered; the output is purely the console log of the processed arrays and objects.

Jul 6, 2023

Loading thumbnail…

Full Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using D3 to generate SVG shapes. Alternating vertical and horizontal striped rectangles are layered beneath two masks, creating a geometric composition where the pattern changes across the canvas. Each mask contains alternating black and white regions with D3 symbol paths—including circles, crosses, and diamonds—positioned at intervals. The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to build the visualization, with the masks inverted relative to each other for a contrasting effect.

Jul 4, 2023

Loading thumbnail…

Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt-inspired geometric composition using overlapping vertical and horizontal stripes, each masked by repeating symbol shapes. Two SVG masks alternate between black and white backgrounds with contrasting symbol cutouts, creating intersecting patterns of circles, crosses, and diamonds across the full viewport. The code uses D3 selections with `join` for data-driven rectangle generation, plus D3’s `symbol` and `symbols` to render mask shapes. Rendering occurs via SVG elements dynamically sized to `window.innerWidth` and `window.innerHeight`.

Jul 4, 2023