P3 — VizHub

100%

P3

✓ Published0🌍 Public

Last edited Nov 29, 2017

Created on Nov 29, 2017

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.

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

97% 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…

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

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

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

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…

TP3 animation

The visualization animates monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. It initially plots each company's price line individually, then transforms all three into a stacked horizon chart. The code uses d3.svg.line and d3.area generators with basis interpolation, d3.time.scale for the date axis, and d3.timer for the animation sequence. The final view uses d3.scale.ordinal colors and a clipPath to create the layered horizon effect. Data comes from the bundled dataset.csv file.

LLRobergeon

90% match

Loading thumbnail…

Tp3_DV_Rendu3

This interactive visualization displays the historical stock prices of Microsoft, Amazon, and IBM from January 2000 to March 2010. It uses a combination of individual line charts and a stacked area chart to compare the price trends and relative magnitudes across the three companies. The visualization is rendered as an SVG using D3 version 3, with animated transitions that convert between the line and stacked area representations. The code leverages D3’s time and linear scales, category color palette, and layout stack API to process and display the data from the provided CSV file.

AAminaSGitHub

90% match