P2 — VizHub

100%

P2

✓ Published0🌍 Public

Last edited Nov 29, 2017

Created on Nov 29, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

94% match

Loading thumbnail…

P3

This example animates monthly stock prices for Microsoft, Amazon, and IBM, initially drawing lines by progressively revealing data points, then transitioning into filled area charts. The visualization uses the D3.js v3 library with SVG rendering, employing the `d3.svg.line` and `d3.svg.area` generators for line and area paths, and `d3.time.scale` and `d3.scale.linear` for axes. The animation leverages `d3.timer` to incrementally update the line, followed by clipping and transitions that convert the lines into stacked horizon charts.

SStephenMaturrin

94% match

Loading thumbnail…

P3

This interactive visualization animates the monthly stock prices of Microsoft, Amazon, and IBM from January 2000 to March 2010. It first draws each company's price line sequentially, then transforms the view into a horizon chart with stacked, colored areas. The SVG output uses `d3.svg.line`, `d3.svg.area`, and `d3.time.scale` to plot the data, with `d3.timer` controlling the animation and `d3.select` managing transitions between the two chart states.

SStephenMaturrin

92% match

Loading thumbnail…

P4

The visualization animates the stock prices of Microsoft, Amazon, and IBM from 2000 to 2010, first drawing line charts that sequentially reveal price movements over time, then transforming each chart into a series of stacked horizon areas. The animation uses `d3.timer` to progressively draw the lines, followed by `transition` to shift the line charts into layered horizon plots with varying fill opacities. The code relies on `d3.svg.line`, `d3.svg.area`, `d3.csv`, and `d3.nest` to parse and structure the dataset, while `d3.time.scale` and `d3.scale.linear` handle the axes.

SStephenMaturrin

92% match

Loading thumbnail…

P6

A small-multiple chart displays monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010, with each series drawn as a separate line plot. The visualization animates the lines drawing sequentially, then transforms each chart into a horizon graph that encodes the data using layered, color-filled areas. Built with D3 v3, the code uses `d3.svg.line`, `d3.svg.area`, `d3.time.scale`, and `d3.timer` to drive the animation, and `transition` to morph the display. The color of each symbol is assigned via a categorical scale.

SStephenMaturrin

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

90% match

Loading thumbnail…

TP3 animation

This visualization animates the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010 using an animated line chart. It first draws each company’s price line progressively, then transforms the view into a horizon chart by stacking three colored area bands per symbol. The code relies on D3 v3’s `d3.svg.line`, `d3.svg.area`, `d3.time.scale`, `d3.nest`, and `d3.timer` to build the SVG animation, reading data from a CSV file.

LLRobergeon

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

89% match