Find Peaks

D3 Selections

This example demonstrates a dynamic line chart created with D3, where 15 points oscillate vertically over time based on a sine function. The visualization uses D3's `select` and `range` APIs to build an SVG canvas and animate both circles and a connected path. Using D3's `.join()` method, the code efficiently updates element attributes on each frame, with a `setInterval` timer driving the animation at 20ms intervals. The implementation uses the React framework and renders purely through SVG elements, with the data generated procedurally from a mathematical function rather than external sources.

Ddanperkins

Fflanagancarlie@gmail.com

Iterate Spotify Peak Position Scatter Plot

This scatter plot visualizes Spotify artists, plotting the number of songs each artist has in the Top 10,000 against their peak chart position, using a logarithmic scale on both axes to handle wide-ranging values. The visualization aggregates the raw Spotify songs dataset by artist, calculating the total song count and minimum peak position for each artist, then renders each as a semi-transparent circle. Built with D3 v7, the code uses `csvParse` and `flatGroup` to process the data, while `scaleLog` and D3’s axis components handle the scaling and labeling.

Nnagasai.mandalapu@gmail.com

rippls

A field of colorful expanding circles animates continuously across the screen, with each circle growing from a small point until it fades and disappears. The visualization uses D3.js v7’s `d3.interval` to spawn a new circle every 100 milliseconds, while `d3.timer` drives the animation loop that increments each circle’s radius and updates its stroke opacity. Randomly positioned circles are colored using `d3.interpolateRainbow`, and the rendering is done via SVG circle elements appended to the document body. The example demonstrates a particle system built entirely with D3’s timing and selection APIs.

Let's make some peeps

This visualization displays a grid of stylized, marshmallow-like "peep" characters, each rendered as an SVG shape composed of a head and body. The peeps are colored to represent a proportional breakdown of a dataset, with partial characters showing transitions between categories. Built with React and D3 v7, the code uses reusable React components and SVG paths to draw each figure, while a custom function calculates the distribution of colors across a 4x5 grid to visualize the data's proportions.

Aaarentoft-private

D3 Selection Exploration

This example presents an animated scatter plot and line chart driven by a sinusoidal wave. A set of circles and a connecting path update 60 times per second, with the number of points oscillating between five and fifteen and their vertical positions shifting over time. Built with React and D3.js, the code uses `d3.select`, `selectAll`, and `join` to bind data to SVG elements, while `d3.range` generates the sequence and `d3.lineGenerator` computes the path’s geometry. All rendering occurs in SVG with smooth, real-time animation.

SSubhendu Karmakar

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.

Ddanheavern

D3 Selections

Two hundred blue circles form a sine wave that continuously animates across the screen, with each circle’s vertical position shifting based on a time-driven formula. The visualization demonstrates D3’s data join pattern using `selectAll`, `data`, and the `.join()` API to efficiently update existing SVG circle elements rather than recreating them. The example runs in a React framework with SVG rendering, updating every 16 milliseconds via a JavaScript `setInterval` timer, and pulls data from a procedurally generated range of 200 points.

LLewis Ward

d3-cluster

The example demonstrates d3-cluster, a layout that groups overlapping circles into clusters and highlights the merged boundaries. After rendering 500 randomly positioned circles with varied radii and colors, the code applies the cluster layout, which sorts points by size and detects overlaps to assign each circle to a cluster. The resulting visualization overlays new circles with a distinct orange stroke, where the stroke width reflects the number of overlapping points in each cluster. The implementation uses custom d3-cluster APIs like `.x()`, `.y()`, and `.radius()`, built with d3-scale, while the initial rendering relies on d3 selections and SVG circle elements.

PPhilippe Rivière