Skip to main content
100%

Moving Forward Line - 20s Loop

✓ Published0🌍 Public
Aaltocumulus
Last edited Nov 27, 2015
Created on Nov 26, 2015

A line chart animates a 20-second loop of a sinusoidal dataset, with a red circle tracing the line's leading edge as it draws and erases. The line uses an SVG path with a stroke-dasharray and stroke-dashoffset to simulate continuous updating. D3 v3's transition and tween function calculate the point’s position along the path via `getPointAtLength`, while the line’s interpolation is set to 'cardinal'. The animation repeats indefinitely through a recursive `tick` function.

AI-generated description

This gist shows a line that appears to be updating with live data over time - and a point marking the front of the line.

See this d3.js animation at http://bl.ocks.org/benshope/bbbefc9dbd553141649b

The difficult part was animating the point to remain on the end of the animating line.

I wish there were a much simpler way to make this animation. If anyone sees this and has an idea, fork this or message me.

forked from <a href='http://bl.ocks.org/benshope/'>benshope</a>'s block: <a href='http://bl.ocks.org/benshope/bbbefc9dbd553141649b'>Moving Forward Line - 20s Loop</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/5c7bc79b4aee2b977c35'>Moving Forward Line - 20s Loop</a>

Similar vizzes

Loading thumbnail…

animated line

An animated line chart displays the changing popularity of a fictional topic over time, with an update button that regenerates the data to show the line redrawing itself with a smooth sinusoid easing. Built with D3.js (v7.8.5), the chart uses `scaleLinear` for axes, `line` for the path generator, and the `transition` API with `easeSin` to animate the stroke-dashoffset over 2.5 seconds. The SVG rendering includes axes and a steelblue path, with fake data defined in JavaScript rather than from an external source.

NNeeraj Kumar
79% match
Loading thumbnail…

Line Transition1

This example demonstrates a smooth scrolling line chart that continuously updates with new data points while sliding old ones off the left edge. A line chart displays 40 data points sampled from a normal distribution, with a new point appended and the oldest removed in each cycle. The visualization uses `d3.line` and `d3.scaleLinear` for chart construction, and animates via `transition()` with `d3.easeLinear`. A `clipPath` element hides the line outside the chart area, while the `transform` attribute translates the path leftward to create the sliding effect.

深深度碎片
78% match
Loading thumbnail…

Line Transition (Broken)

A continuous line chart animates as new random data points, drawn from a normal distribution, are appended and old ones removed. The animation uses a standard transition on the `d` attribute, demonstrating the default string interpolation that pairs numbers sequentially. This causes the line to move vertically instead of sliding horizontally, because the paired x-coordinates remain constant across the two paths. The code uses D3 v4, including `d3.randomNormal`, `d3.scaleLinear`, and a `d3.line` generator to construct the path.

Mmbostock
76% match
Loading thumbnail…

Fork of Moving Dots - getting fancy

This example visualizes a dynamic wave pattern of 40 circles and connecting lines that oscillate vertically and change size over time. The circles and lines move in a sine-wave formation, with their positions and widths updating continuously to create a flowing, animated effect. The code uses D3.js version 6.6.1 with the `select`, `range`, and `join` APIs to efficiently update SVG elements, and runs an animation loop at 60 frames per second via `setInterval`. The chart renders entirely in SVG with no external data source, purely generated from mathematical functions.

Llt_vandegrift@live.com
76% match
Loading thumbnail…

Fork of moving stuff

A line of twenty gold circles with black outlines moves vertically down the viewport, then reverses direction and moves up, bouncing between the top and bottom edges. The animation updates every 200 milliseconds using `setInterval`, with each frame positioning circles via `d3.selectAll('circle').data().join()`. The `cx` and `cy` attributes are computed from the circle radius and an incrementing time variable, creating a simple looping motion. Rendered as SVG with D3 v7, the example fills the browser window.

Pparag776
76% match
Loading thumbnail…

Path Transitions

A real-time scrolling line chart demonstrates a surprising visual artifact when animating the path. The chart displays a sliding window of 40 random data points, with new values entering from the right and old ones exiting left. The example uses D3's `transition` API and SVG path interpolation to animate the line. It reveals that default path interpolation parses the `d` attribute's numbers and pairs them in order, causing vertical "wiggling" as control points move in place. The solution involves interpolating the chart's transform instead of the path data.

GGerHobbelt
76% match
Loading thumbnail…

Real time chart

This example demonstrates a real-time line chart that continuously updates with new data points. The visualization shows a scrolling line graph where new random values are appended and old ones shift out of view every half second. The chart uses D3 v5 to generate data with `d3.randomNormal`, and displays an animated SVG path created with `d3.line`. The updating mechanism relies on D3 transitions with `easeLinear`, using `transition.attrTween` (via the `tick` function) to slide the line horizontally while clipped by a clipPath.

PPiotr Paszek
75% match
Loading thumbnail…

line_Transition_4

This example shows a real-time updating line chart that scrolls new data points across an SVG canvas as the page is scrolled. The line continuously shifts left as new random values are appended and old ones removed. The implementation uses d3.line and d3.scaleTime for the x-axis, d3.axisBottom for the labels, and transitions tied to the window scroll event, with d3.randomNormal generating the initial data.

深深度碎片
75% match