Skip to main content
Explore
Solutions
Bespoke Studio
Pricing
Quick Start
Demo
Log in
Send feedback
✕
Tell us what works and what could be better. We read every submission.
Send feedback
✕
Tell us what works and what could be better. We read every submission.
Home
•
Fork Viz
Fork Viz
Create your own copy of this visualization.
Forking from
D3 Selections (with lines)
Title
*
Description
This example demonstrates the difference between D3's `join` and `merge` operations by animating a dynamic set of circles and vertical lines. As the data count shifts with a sine wave, the `d3.select` API's `join` method incrementally updates the SVG elements, seamlessly adding or removing nodes. Circles are positioned and sized based on generated data, with a `d3.scaleLinear` color mapping from white to green applied to both the circle strokes and the lines descending from each circle to the chart's bottom. The animation runs at roughly 60 frames per second using `setInterval`.
Visibility
Public
Private (only you), Pro
Unlisted (anyone with link)
Private work requires Pro.
Upgrade
Cancel
Fork Viz