Skip to main content
SimilarExport ZIP
100%

[animated charts] stocks from dataset

✓ Published0🌍 Public
SSebDelSab
Last edited Nov 30, 2017
Created on Nov 30, 2017

This example cycles through five animated chart types—area, empty area, multiple, stacked, and stream—to compare monthly stock prices for Microsoft, Amazon, and IBM from 2000 onward. The data is loaded from a CSV file via `d3.dsvFormat` and nested by symbol using `d3.nest`. Each chart is rendered as an SVG path using `d3.area` with transitions controlled by `setTimeout`, while `d3.scaleOrdinal` assigns colors and `d3.scaleTime` maps dates. The sequence repeats automatically, highlighting shape and layout differences across chart forms.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/57eb273e01761b829aaa95b28c8193c1'>loading multiple stock data from dataset</a>

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/f60995ae128cca7b4e19b95ff28a51ea'>[animated charts] stocks from dataset</a>

mit Licensed

Similar vizzes

Loading thumbnail…

[animated charts] stocks from dataset

This animated visualization cycles through five chart types—area, empty area, multiple line, stacked, and stream—to display monthly stock prices for Microsoft, Amazon, and IBM from a CSV dataset. The sequence begins with a single area chart, then empties it to an outline, followed by a multi-line chart, a stacked area chart, and finally a streamgraph. Built with D3 v4, the code uses `d3.area`, `d3.nest`, and `d3.scaleOrdinal` to structure and render the data as SVG paths, with a `transition().duration()` driving the sequential playback.

NNpfn
94% match
Loading thumbnail…

loading multiple stock data from dataset

This example shows monthly stock prices for Microsoft, Amazon, and IBM from a CSV dataset. It draws multi-series line charts in SVG, then transitions each series into a stacked area chart with a smooth animation. The code uses d3.nest to group data by symbol, d3.line and d3.area for geometry, and d3.transition with a delay to sequence the morphing effect. Colors are assigned via d3.scaleOrdinal with d3.schemeCategory10.

NNpfn
86% match
Loading thumbnail…

[animated charts] stocks from dataset

This animated chart tracks monthly stock prices for Microsoft and Amazon from January 2000 through March 2010, using D3 v4 to render and animate lines. Drawn with SVG, the visualization smoothly transitions between data points over time, showing each stock's price fluctuations across the decade. The animation reveals how both stocks decline in the early 2000s, with Amazon’s drop to under $6 in late 2001 contrasting sharply with its later recovery to over $60 by 2010, while Microsoft’s price remains comparatively stable throughout.

EEssohanamKouyou
86% match
Loading thumbnail…

areaChart

This example shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, displayed as small multiple area charts. The visualization initially draws simple line paths, then animates a transition into horizon charts, where each series is stacked vertically with an offset baseline. The code uses D3 v3 with SVG rendering, employing `d3.svg.line` and `d3.svg.area` generators, `d3.nest` to group data by symbol, and `d3.time.scale` for the date axis. Data comes from a CSV file with a `symbol,date,price` structure.

AAminaSGitHub
86% match
Loading thumbnail…

loading multiple stock data from dataset

This example demonstrates how to load and visualize multiple stock price datasets from a CSV file, cycling through three different chart types: separate area charts for each symbol, a stacked area chart, and a streamgraph. The code uses D3 v4's `d3.text`, `d3.dsvFormat`, `d3.nest`, and `d3.stack` to parse, group, and structure the data, while `d3.scaleTime`, `d3.scaleLinear`, and `d3.area` handle the rendering as animated SVG paths. The visualization transitions automatically every 1.5 seconds, showing the shifting representation of the same monthly price data for MSFT, AMZN, IBM, and AAPL.

AAubret
85% match
Loading thumbnail…

etape3

This example shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 as animated, stacked area charts. Each symbol is rendered in its own horizontal band, with a dark line tracing the price over time. The code uses d3.csv to load data, d3.nest to group by symbol, and d3.svg.area and d3.svg.line with basis interpolation to draw the shapes. A d3.timer drives the sequential reveal of data points, while d3.layout.stack computes the stacked offsets.

NNaamaNaa
85% match
Loading thumbnail…

etape2

The visualization displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, with each company’s price series separated into its own horizontal band. Animated SVG line charts draw progressively over time, while filled areas underneath each line use color to distinguish the symbols. The code uses d3.csv, d3.nest, d3.svg.line, d3.svg.area, and d3.timer to parse the data, group by symbol, and animate the rendering.

NNaamaNaa
85% match
Loading thumbnail…

P2

This example animates the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010. It first draws each symbol’s price as a separate line chart, then morphs the lines into horizon charts by stacking and clipping translucent area fills. The code uses D3 v3 with SVG, `d3.svg.line` and `d3.svg.area` for geometry, and `d3.timer` for the animation. The dataset is loaded from a local CSV via `d3.csv`. Each symbol’s line and circle are repositioned frame-by-frame, then transitions shift the glyphs to the right edge while revealing the horizon bands.

SStephenMaturrin
85% match