danheavern

Ep. 11 Scatter Plot (Animated) w/ Menu

This interactive scatter plot displays the classic Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across species. Two dropdown menus, built with a custom `d3.dispatch`-based menu component, let viewers select which measurement appears on each axis. When a selection changes, the visualization animates smoothly, with circles transitioning to new positions using `d3.transition`. The chart is rendered as SVG, with axes and circles updated dynamically, while colors encode species using `d3.scaleOrdinal` with `schemeCategory10`. Hovering temporarily enlarges circles via CSS.

Fork of Ep. 10 Idempotent Scatter Plot (Animated)

This animated scatter plot cycles through four Iris flower measurements (sepal and petal length/width) as the x-axis variable while keeping sepal length on the y-axis, updating every five seconds. It uses D3's scaleLinear, scaleOrdinal, axisLeft, axisBottom, and transition APIs to smoothly interpolate circle positions and axis scales over one-second durations. The visualization loads the classic Iris dataset from a GitHub gist via d3.csv, renders 150 colored circles (one per species) in SVG, and uses a CSS hover rule to enlarge points on mouseover.

Ep. 10 Idempotent Scatter Plot

An idempotent scatter plot cycles through four Iris flower measurements every two seconds, animating between different x-axis variables while keeping sepal length on the y-axis. Built with React and D3 v7, it uses `scaleLinear`, `scaleOrdinal` with `schemeCategory10`, and `axisLeft`/`axisBottom` to render SVG circles with hover effects. Data loads from a CSV via `d3.csv`, and the reusable `scatterPlot` function updates axes and marks through `selection.join`, creating a seamless, repeatable transition.

Ep. 09 Reusable Charts Scatter Plot

A reusable D3.js scatter plot displays the Iris dataset, plotting petal length against sepal length. Each point is colored by species using `scaleOrdinal` with `schemeCategory10`, and includes a hover tooltip via an appended `title`. The example uses a builder-pattern API to configure the plot, with `scaleLinear` for axes and `axisLeft`/`axisBottom` for ticks. SVG circles are rendered with transitions on hover, managed through D3's selection and join operations. Data is loaded asynchronously from a CSV URL and parsed with numeric coercion.

D3 Scatter Plot

This example uses D3 v7 to render an interactive scatter plot of the Iris dataset, loaded via `d3.csv` from a GitHub gist. The visualization maps petal length on the x-axis and sepal length on the y-axis using `scaleLinear` and `extent`, with points colored by species via `scaleOrdinal` and `schemeCategory10`. SVG circles are bound to data with `join`, and each carries a `<title>` tooltip. Hovering triggers a CSS transition that enlarges the circle’s radius, while `axisLeft` and `axisBottom` add labeled axes.

JS basics

This example demonstrates a minimal web page that uses JavaScript with the D3 library to dynamically insert a personalized heading. It shows how to combine a custom JavaScript module, `epic-package`, with D3's `select` API to manipulate the DOM. The page renders "Welcome Back, Dan Heavern" by importing exported constants from the module and appending an `h1` element to the document body. The setup includes a minimal HTML structure and a `package.json` file specifying D3 version 7.4.4 as a dependency.

Exercise for D3 Selection Exploration

This example is an exercise in using D3.js selection and join operations to create an animated visualization. It shows a dynamic set of 15 circles moving vertically in a sine wave pattern, with black vertical lines extending from each point and a polyline connecting them all. The animation updates at 60 frames per second using `setInterval`, and the positions are calculated with `Math.sin` in the `makeData` function. The code uses D3's `select`, `range`, and `line` functions, along with the `.join()` method to efficiently add or update SVG circles and path elements.

Fork of D3 Selection Exploration

This example explores D3 data joins with animated circles. A set of circles moves vertically based on a sine wave, with the number of circles oscillating over time. The code uses d3.select, d3.range, and the selection.join method to update the SVG. Data is generated in makeData.js and rendered as circles with attributes for radius, cx, and cy, refreshed every 60 frames per second.

D3 Selection Exploration

This example demonstrates D3’s data join and selection patterns by animating a row of circles whose count and vertical positions oscillate with a sine wave. The code uses `d3.select`, `d3.range`, and `selectAll().data().join()` to update SVG circles at 60 frames per second, while a commented-out version shows the older `enter()`/`merge()`/`exit()` workflow. The visualization renders directly into the browser window via an SVG element sized to `window.innerWidth` and `window.innerHeight`, with no external data source.

Fork of Sol LeWitt w/ D3

A grid of thin horizontal and vertical white lines is drawn across a black canvas, intersecting to form a dense woven pattern. Two circular masks selectively reveal the grid: one centered rectangle masks the horizontal lines, while an inverted mask reveals the vertical lines, creating a layered, offset visual effect reminiscent of Sol LeWitt’s geometric art. The example uses D3 v7’s `select`, `range`, `symbol`, and `symbols` APIs to generate the lines and SVG masks programmatically.

Sol LeWitt

This visualization recreates Sol LeWitt’s geometric wall drawings using overlapping horizontal and vertical striped bands. A central circular mask reveals the intersection of both patterns, while the surrounding areas remain blank. The code builds SVG elements manually with `createElementNS`, applying two separate circle-based masks to clip groups of thin rectangles. No external libraries are used; rendering relies entirely on raw SVG masks and rect primitives at a fixed 100-line count per direction.