Animated path multi-series line chart

100%

Animated path multi-series line chart

✓ Published0🌍 Public

Last edited Jul 20, 2018

Created on Jul 20, 2018

Two time series lines, for Airbus and Boeing stock prices, animate drawing themselves across a shared date axis. Each line uses D3’s SVG path transition with `stroke-dasharray` and `stroke-dashoffset` to reveal itself over 15 seconds, with a green line for Airbus and black for Boeing. Data comes from a TSV file parsed by `d3.tsv`, and axes are built with `d3.svg.axis` and `d3.time.scale`.

AI-generated description

forked from <a href='http://bl.ocks.org/atmccann/'>atmccann</a>'s block: <a href='http://bl.ocks.org/atmccann/8966400'>Animated path multi-series line chart </a>

forked from <a href='http://bl.ocks.org/sandravizmad/'>sandravizmad</a>'s block: <a href='http://bl.ocks.org/sandravizmad/167b9092814222e07a8adeaab34e6685'>Animated path multi-series line chart </a>

mit Licensed

Similar vizzes

Loading thumbnail…

Animated path multi-series line chart

This example demonstrates a multi-series line chart where two data lines—Airbus and Boeing stock values over time—are drawn progressively using SVG path animations. The chart uses D3.js v3 with a time-scaled x-axis and a linear y-axis, rendering the monthly data points from the provided TSV file. Each series animates along its path, creating a dynamic reveal of the data. The chart includes labeled axes, a legend, and hover tooltips for interactivity, making it easy to compare the two manufacturers' performance trends over the displayed period.

663anp3ca

92% match

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

75% match

Loading thumbnail…

AnimatedOpenSAPLines

This example demonstrates a line chart with animated drawing, using D3.js and SVG. Six time-series datasets are plotted, with each line colored via a categorical scale. The animation is achieved by overlaying a white SVG `rect` that is resized via a transition, acting as a curtain to reveal the lines as if they were being drawn live. A vertical guideline sweeps across the chart in sync with the reveal, and a checkbox toggles the guideline and curtain visibility.

CCBasis

75% match

Loading thumbnail…

tp2 dataviz

This example animates a multi-series line chart, plotting monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. It first draws each series as a dark, interpolated path in its own small multiples panel, highlighting the latest point with a colored circle. The animation then transitions each panel into a horizon chart, layering three clipped, stacked area fills to show the same data with greater vertical resolution. The code uses d3.svg.line and d3.svg.area generators, d3.time.scale for dates, and d3.select transitions to orchestrate the sequential reveal of lines and horizons.

EEnzoTheBrown

75% match

Loading thumbnail…

stock

A multi-line chart animates banking stock prices over time, with each series plotted in its own horizontal band and labeled by symbol. The visualization first draws lines progressively using a `d3.timer`, then transitions into horizon charts by stacking filled areas with a `clipPath`. Data is loaded via `d3.csv` from a gist and parsed with `d3.time.format`. The SVG rendering uses `d3.svg.line`, `d3.svg.area`, and `d3.scale.linear` to map dates and prices, with color assigned by `d3.scale.category10`.

SSheela2930

75% match

Loading thumbnail…

tp2 dataviz

This example animates a transition from multi-line charts to horizon charts for stock price data. It first draws time-series lines for each symbol, with a moving marker tracing the data over time. The view then transforms each line into a stacked horizon plot using color-coded bands to encode value ranges. The code uses D3 v3’s SVG line and area generators, `d3.nest` for grouping, and `d3.timer` with transitions to animate the shift. Data comes from a CSV of monthly prices for MSFT, AMZN, and IBM.

RRomainCandy

75% match

Loading thumbnail…

Animated Sparkline Chart with d3

This example shows a single sparkline chart that animates its line drawing from left to right over two seconds. The chart plots a small dataset of 23 numeric values using an SVG path with a natural curve, rendered at 200 by 30 pixels. The animation is achieved by first measuring the path’s total length, then using `stroke-dasharray` and `stroke-dashoffset` with a D3 transition and linear easing. The code uses `d3.line`, `d3.scaleLinear`, and `d3.select` within a React framework, drawing to SVG.

111abhisharma

73% match

Loading thumbnail…

Untitled

A line chart displays stock closing prices over time for two datasets. An "Update" button triggers an animated transition between the datasets, smoothly interpolating both the line path and the x- and y-axes using D3.js transitions with a 750-millisecond duration. The visualization uses d3.svg.line, d3.time.scale for time-based x-axis formatting, and d3.svg.axis, with data loaded from CSV files via d3.csv. The SVG path and axes are updated in place, demonstrating dynamic data swapping.

CChase Hall

73% match