P6 — VizHub

100%

P6

✓ Published0🌍 Public

Last edited Nov 29, 2017

Created on Nov 29, 2017

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.

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

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

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

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

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

90% match

Loading thumbnail…

Tp3_DV_Rendu4

This visualization shows monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010, using layered area charts to compare trends across companies. Each symbol is displayed in its own horizontal band, with semi-transparent filled areas colored by company. The code uses D3 v3’s `d3.svg.area()`, `d3.svg.line()`, and `d3.time.scale()` to draw the SVG paths, while `d3.nest()` groups the CSV data by symbol. The chart sorts symbols by maximum price and applies basis interpolation for smooth curves.

AAminaSGitHub

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

88% match

Loading thumbnail…

etape4

This example shows monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010, animating from individual line charts into overlapping horizon graphs. The visualization uses D3.js v3 to parse CSV data, nest it by symbol, and render SVG paths with transitions. It employs d3.svg.line, d3.svg.area, and d3.time.scale to draw the series, while d3.nest and d3.timer drive the sequential animation of data drawing and chart transformation.

NNaamaNaa

87% match