Skip to main content
SimilarExport ZIP
100%

nyc-d3-live-code

✓ Published0🌍 Public
11wheel
Last edited Aug 22, 2016
Created on Nov 5, 2013

This example demonstrates interactive SVG animations built with d3.v3. A row of circles oscillates vertically, first transitioning to a flat line, then responding to mouseover events with animated shifts in amplitude. A recursive rectangle-drawing function adds shrinking squares, and hovering over a rect triggers a d3.transition that randomly repositions it and changes its fill color. The sketch uses d3.select, d3.range, .transition(), and event listeners on SVG shapes.

AI-generated description

Similar vizzes

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This example demonstrates how to animate SVG elements with D3 v4, showing a static red circle and blue rectangle alongside small rectangles that jump to random positions and colors when a button is clicked. It illustrates data joins by binding an array of color objects to newly appended rectangles, then transitions them with `d3.transition()`. A `setInterval` loop continuously updates the rectangles' positions and fills using random values from the data array, while the initial static shapes remain unchanged. The code uses `selection.enter()`, `merge()`, and chained `.attr()` and `.style()` methods for smooth animations.

AAndrewMcKernan
80% match
Loading thumbnail…

d3js workshop - circles

This example demonstrates how to animate three circles on an SVG canvas using D3.js version 3, showing how data binds to elements and transitions update their appearance. It creates an SVG of 720 by 120 pixels, binds a simple array of three numbers to circle elements, and positions them horizontally based on their data values. The visualization uses chained `transition()` methods with configurable `duration()` and `delay()` to animate the circles’ fill color to red, and also applies radius and vertical position changes. The code relies on D3’s data-join pattern (`selectAll`, `data`, `enter`) and shows how multiple transitions can be sequenced with per-element delays.

BBillyBHWong
80% match
Loading thumbnail…

D3 Selection exploration

This example demonstrates D3 selection and data-join patterns by animating a series of circles and connecting lines across a full-screen SVG. As time progresses, the circles oscillate vertically along sine waves while lines link consecutive points. The code uses `d3.select`, `d3.range`, and the `selection.join` method to bind and update elements each frame. Rendering is driven by a `setInterval` loop that regenerates the data and re-applies the `makeCircle` and `makeLine` functions, highlighting how D3 manages enter, update, and exit states.

Rrwata97
79% match
Loading thumbnail…

d3js workshop - circles 2

Three circles animate from the top of an SVG canvas, shifting downward and turning red through a D3 transition, then revert to their original position and black fill on mouseover. Clicking a circle sets its radius to zero, removing it from view. The example uses D3 v3’s selection, data binding, and transition methods, with event handlers for mouseover and click. It renders with SVG elements and demonstrates basic interactivity, showing how D3 binds an array of numbers to visual properties like x-position and radius.

BBillyBHWong
79% match
Loading thumbnail…

d3 Animation

This example demonstrates a single-circle animation using D3 transitions. The visualization shows a red-outlined circle that starts at the left side of an SVG canvas and moves downward while changing its fill color to green over one second. The code appends an SVG element sized to the browser window, creates a circle with initial x-coordinate 200, then chains a transition with a 1000-millisecond duration to animate the y-coordinate, radius, and fill style. It uses D3 v6's `selection.transition()` and `transition.attr()` methods within a minimal HTML page.

MMTR
79% match
Loading thumbnail…

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.

Ddanheavern
79% match
Loading thumbnail…

D3 Selections

This example animates a set of circles and vertical lines in an SVG, with the circles bobbing up and down in a sine wave pattern over time. The visualization uses D3’s `select`, `append`, and `selectAll` APIs to manage the SVG elements, and the `join` method to update the DOM as new data arrays are generated each frame by `makeData`. The animation is driven by a `setInterval` timer that updates the data and redraws the scene at 60 frames per second, with line opacity varying based on the circle’s vertical position.

Jjony6290
79% match
Loading thumbnail…

D3 Sketch Test

This example demonstrates the simplest form of animation in D3: a single white circle moving horizontally back and forth across a 960x480 SVG canvas. The circle transitions from x-coordinate 40 to 900 and back, with each leg lasting 3000 milliseconds. The code uses `d3.select`, `append`, `attr`, and chained `transition` calls with `duration`, where the `on("end")` event listener handles looping. It renders via SVG within a React application, though the animation itself operates independently of React’s rendering cycle.

NNita
78% match