DS Aug, Code 6

100%

DS Aug, Code 6

✓ Published0🌍 Public

Last edited Mar 26, 2019

Created on Mar 26, 2019

This visualization animates the dive-by-dive performance of a synchronized springboard team, using flowing, color-coded circles to represent the execution scores of each athlete across their routine. The code renders to both a Canvas, for the animated flow lines, and an SVG, using d3.v4 scales and lodash for data processing. Each circle's radius maps to the dive's difficulty via `d3.scaleLinear`, while its path is generated through a recursive midpoint-displacement algorithm adapted from a Dan Gries tutorial. The animation length and rotation are tied to the dive’s raw score and total, with gradients reflecting the athlete’s country and gender.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/9715b2c1a5dc5b88421f694e23d925f2'>DS Aug, Code 1</a>

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/213adae2dfc5b2a114c54e785693ed9f'>DS Aug, Code 1</a>

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/3979776e97db578fb647b48de348f4cb'>DS Aug, Code 3</a>

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/0909fba07ffd7ec9a67a619d6cb5772d'>DS Aug, Code 4</a>

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/e5edf25729cb6573783d927d677a4a4d'>DS Aug, Code 5</a>

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/379ba3f8f2e196cac6d229b5c1e7fae1'>DS Aug, Code 6</a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3 yoga

The visualization displays a small dataset of six numeric values using three overlaid chart types: circles sized by radius, vertical bars, and a line path. It shows how the same values can be represented through different encodings. The code uses d3.v4 with SVG for the circles and line, and HTML div elements positioned absolutely for the bars. Linear scales map the data domain to pixel ranges for radius, bar height, and line y-coordinates. The data is hardcoded as an array in the script, with no external source. The SVG and divs are both rendered on the same page, creating a combined view.

FFlameFuel

70% match

Loading thumbnail…

Chained Transitions II

The visualization shows a vertical column of 50 black circles that move in a choreographed wave, sliding horizontally across the screen and then returning, one after another. The animation uses chained transitions to create a continuous looping sequence. Built with D3 v4, it employs `d3.active` to manage each circle’s transition chain, with `d3.scalePoint` positioning the circles vertically and `d3.scaleLinear` mapping the color gradient from yellow to blue based on the circle’s index. The code uses SVG circle elements and CSS styling, with each circle’s fill determined by its position in the modulo sequence.

HHelenaV

69% match

Loading thumbnail…

D3 Test

Fifteen circles with dynamically changing radii, positions, and colors pulse in a smooth, endless animation, driven by sine-wave values generated in the `makeData` function. The example uses the D3 library (v7.8.5) with its `select`, `range`, and data-join `join` pattern to render SVG circles directly to the document body. Animation runs via `setInterval` at roughly 60 frames per second, updating a time parameter that alters each circle’s `r`, `cx`, `cy`, and `fill` attributes. The visualization demonstrates real-time data binding and SVG attribute updates with a minimal, dependency-light setup.

NNick Hogle

69% match

Loading thumbnail…

D3 Selection

Animated circles in navy float across the screen, their sizes and vertical positions oscillating smoothly in a wave-like pattern that changes over time. The number of visible circles also fluctuates rhythmically, creating a dynamic, generative composition. Using D3.js v6 with SVG, the code computes coordinates from trigonometric functions and a time variable within a `setInterval` loop. It employs the data-join pattern with `.selectAll`, `.data`, and `.join` to update circle attributes continuously, demonstrating D3's core selection mechanics in a responsive full-viewport canvas.

EEzhil-Kalai

69% match

Loading thumbnail…

dance

The visualization shows a single large letter pair cycling through a sequence of dance-like poses, with each pose displayed in a monospaced Courier font. The text element updates every 400 milliseconds through a list of string pairs, such as "d<" and "q=", looping indefinitely. Built with D3.js (version 3.5.5), the code appends an SVG container and a grouped text element rotated 90 degrees, then uses JavaScript’s `setTimeout` inside a recursive function to sequence the pose changes. The data source is an inline array named `dance`, and the rendering relies solely on SVG text manipulation.

CCBasis

68% match

Loading thumbnail…

D3 js part 2

A looping animation of circles moves vertically in a sine-wave pattern across an SVG canvas, with the number of circles oscillating between five and fifteen over time. The code uses D3 v7's `select`, `range`, and the data-join method `.join('circle')` to bind array data to SVG elements, updating their `cx` and `cy` attributes each frame via a `setInterval` callback. The visualization highlights D3's declarative enter-update-exit pattern for dynamic datasets.

GGautier DAVID

68% match

Loading thumbnail…

animating data cleaner code

This example uses D3 v7 to create an animated, generative visualization of circles. It displays a dynamic sine-wave pattern where 10 to 15 circles move vertically and change radius over time, rendered as SVG elements on a full-window canvas. The animation runs at a 60 FPS interval, with each frame updating the `cx`, `cy`, and `r` attributes of the circles via `selectAll` and `.join`. The periodic motion is computed using `Math.sin` for both position and size, creating a smooth, evolving sine-wave composition.

KKerim

68% match

Loading thumbnail…

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

68% match