Animated path multi-series line chart

100%

Animated path multi-series line chart

✓ Published0🌍 Public

Last edited Oct 10, 2018

Created on Oct 10, 2018

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.

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>

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

mit Licensed

Similar vizzes

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

77% 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

77% match

Loading thumbnail…

multiple line chart

This multi-line chart visualizes stock data over time, plotting a series of data points connected by lines and displaying corresponding values. Built with D3.js v4, the visualization uses SVG for rendering and includes animated transitions on mouseover—circles change color and trigger a tooltip plus a dashed guide line. The chart employs `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and processes data loaded from a JSON file with `d3.json` and `d3.dsvFormat` parsing.

EElisaDnr

76% 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

76% match

Loading thumbnail…

multiple line chart

This example shows multiple time-series lines plotted on the same axes, with each line representing a different stock symbol over several months. The chart displays price trends for various symbols, allowing easy visual comparison of their trajectories. Using D3 v4 with SVG rendering, the code loads external CSV data via `d3.text` and `d3.dsvFormat`, parses dates with `d3.timeParse`, and groups the data by symbol using `d3.nest()`. It then applies `d3.scaleTime` and `d3.scaleLinear` for the x and y axes, and draws each line with `d3.line`, while adding axis labels and a legend via text elements.

EEssohanamKouyou

75% match

Loading thumbnail…

Multi-line graph 4: Toggle

This multi-line graph displays monthly stock prices for multiple companies over time, with each line assigned a unique color via D3's category10 scale. The data is loaded from a CSV file, nested by stock symbol, and rendered as separate SVG paths using D3’s time scale for dates and linear scale for prices. A legend with clickable text labels allows users to toggle individual lines on and off; clicking a legend entry fades the corresponding line to an opacity of zero or restores it to full opacity with a 100ms transition. The chart includes axes and a dynamic color assignment, with the toggle functionality demonstrated as the fourth iteration in a series focused on building interactive multi-line graphs.

663anp3ca

74% 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

74% match

Loading thumbnail…

Multi-line graph 3 with v4: Legend

This example displays multiple stock price time series in a single SVG line chart, using D3 v4 to plot data for Microsoft, Amazon, and IBM from January 2000 through March 2010. The visualization distinguishes each company’s line with a categorical color from `d3.schemeCategory10` and adds an automatically generated legend, positioning text labels evenly across the chart’s width. The data, loaded from a CSV file, is parsed with `d3.timeParse` and nested by symbol using `d3.nest` to create separate lines. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while scales are defined via `d3.scaleTime` and `d3.scaleLinear`.

Dd3noob

74% match