temp

100%

✓ Published0🌍 Public

Last edited Nov 28, 2017

Created on Nov 23, 2017

A small multiples line chart shows monthly stock price history for Microsoft, Amazon, and IBM, with each symbol rendered as a separate panel. The visualization animates through repeating cycles: areas smoothly fill beneath each price curve one by one, then reset, creating a continuous looping effect. Built with D3 v4, the code uses `d3.nest()` to group data by symbol, `d3.line()` and `d3.area()` with `d3.curveBasis` for smooth paths, and `d3.timeParse` for dates. Panels are sorted by maximum price, and each area fill cycles through a categorical color scale. Data comes from an external CSV file.

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>

mit Licensed

Similar vizzes

Loading thumbnail…

Tp3_DV_Rendu2

This visualization compares monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. It displays multiple small multiples, each showing a company’s price trend as a smooth line chart, with the data loaded from a CSV file. Using D3 v3, the code groups data by symbol via `d3.nest`, sorts companies by maximum price, and animates the drawing of each line progressively with a timer. An area fill, rendered via `d3.svg.area`, is added beneath each line, and the axis and scaling are computed dynamically per company.

AAminaSGitHub

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…

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

84% match

Loading thumbnail…

P3

This visualization animates monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, first drawing each company’s price line in sequence, then transforming the chart into a horizon graph. The horizon technique uses stacked, clipped area bands with a color scale to compact multiple price ranges into a small vertical space. The code uses D3 v3 for SVG rendering, `d3.svg.line`, `d3.svg.area`, `d3.nest`, and `d3.timer` to drive the two-stage animation, with data loaded from a CSV file.

SStephenMaturrin

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

84% match

Loading thumbnail…

Tp3_DV_Rendu5

This visualization compares the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010, showing both individual time series and a stacked area chart. The animation transitions through three views: individual line charts, horizon-style areas for each symbol, and finally a stacked layout. The code uses D3 v3 with SVG rendering, employing d3.svg.line, d3.svg.area, and d3.layout.stack for the layouts, while d3.time.scale handles the date axis. Data comes from a CSV file grouped by stock symbol via d3.nest.

AAminaSGitHub

84% match

Loading thumbnail…

TP3_DataViz_SmallMulti

This example shows monthly stock price trends for Microsoft, Amazon, and IBM from 2000 to 2010 using small multiples, with one SVG chart per symbol. Each chart displays a pink area path and a black line, with the y-axis scaled independently based on each symbol’s maximum price. The code uses d3.csv to load data, d3.nest to group by symbol, and d3.area and d3.line with d3.scaleTime and d3.scaleLinear. The color of each area is selected from a hardcoded array, demonstrating per-chart styling.

EElisaDnr

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

84% match