AnimatedOpenSAPLines

100%

AnimatedOpenSAPLines

✓ Published0🌍 Public

Last edited May 20, 2016

Created on May 14, 2016

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.

AI-generated description

This experiment makes the lines look like they are being drawn live (animated paths). What's really happening is a #FFF rect is drawn and it's width is manipulated, in the same way a curtain reveals the stage on Broadway. Built with D3.js.

forked from <a href='http://bl.ocks.org/markmarkoh/'>markmarkoh</a>'s block: <a href='http://bl.ocks.org/markmarkoh/8700606'>AnimatedOpenSAPLines</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…

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

78% match

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

77% match

Loading thumbnail…

Animated area chart with linear gradients

Three synthetic datasets are drawn as smooth, gradient-filled area charts, with each series represented by a different color from the D3 `schemeDark2` palette. The visualization shows how three numeric trends evolve over 30 evenly spaced points, using `d3.area` with `curveMonotoneX` and linear gradients defined in SVG `defs` to fade each fill to white. A legend with interactive mouseover, mouseout, and click handlers toggles series emphasis, while custom axes with dashed gridlines and bold labels are rendered via `d3.axisBottom` and `d3.axisLeft`. The animation is implied by the static SVG, though no transition is present in the code.

AAlexDaGr8

75% match

Loading thumbnail…

Untitled

This example demonstrates a dual-line chart tracking a dataset's open and close values over time. Two separate line series, one steelblue and one red, are rendered using SVG paths within a shared time-scaled x-axis and linear y-axis. The code uses D3 version 7 with `d3.csv` to fetch remote data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` generators to map data points. Axes are added with `d3.axisBottom` and `d3.axisLeft`.

YYiHeng822

74% match

Loading thumbnail…

Time based moving graph with no labels

Four time-series data columns—Partner, PCL, GOLAN, and DriveU—scroll horizontally across the SVG canvas, updating continuously. The animated chart uses D3's `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with lines drawn via `line` and `curveBasis` geometry. A `transition` with `easeLinear` animates the sideways movement, clipped by a `clipPath` to reveal new data points. Each line has a distinct color from a `scaleOrdinal` range, and the visualization loads data from a CSV file.

PPiotr Paszek

74% match

Loading thumbnail…

Untitled

This example demonstrates animated line drawing in SVG using D3.js. Four data points (x, y coordinates) are plotted as circles colored yellow or blue based on their x-value, with a natural cubic spline curve passing through them. The line initially appears with a dash offset and transitions to full visibility over three seconds using D3's `transition()`, `easeLinear`, and a repeating `on("end")` callback. The `d3.line()` function with `curveNatural` generates the path geometry in a React environment.

Ssubratanp

74% match

Loading thumbnail…

Labels on multiple lines v4

This example shows a multi-line chart with two time-series lines for stock open and close prices, with labels placed directly at the end of each line. The labels “Open” and “Close” are positioned manually using SVG text elements, colored to match their respective lines (red and steelblue), and anchored to the final data points. The visualization uses d3.csv to load the data, d3.timeParse to parse dates, and d3.line with d3.scaleTime and d3.scaleLinear to render the paths in an SVG canvas.

Dd3noob

73% match