streamGraphStep4

100%

streamGraphStep4

✓ Published0🌍 Public

Last edited Nov 29, 2017

Created on Nov 29, 2017

The visualization animates the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010 as a streamgraph. It begins with each stock plotted as a separate line, then transitions into layered, stacked areas that overlap to show cumulative price trends. The code uses `d3.svg.line`, `d3.svg.area`, and `d3.scale.linear` to render the paths, with `d3.timer` driving the animation and `d3.select` manipulating SVG elements. The y-axis domain adjusts per symbol initially, then scales to the maximum price across all stocks.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Stream_Graph

The visualization shows monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010 as a stream graph, using filled areas to display price changes over time. The areas are stacked with the `d3.stack()` API and offset using `d3.stackOffsetWiggle` to create a flowing, layered effect. Data is loaded from a CSV file, parsed with `d3.dsvFormat`, and rendered as SVG paths using `d3.area` with basis curves. The x-axis uses `d3.scaleTime`, while colors are assigned via `d3.scaleOrdinal` with the category10 scheme.

BBarbierJeremy

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…

StackedAreaChartStep3

This example animates a stacked area chart showing monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. The visualization first draws individual price lines by symbol, then transitions to layered areas that stack cumulatively using the `d3.layout.stack` API. It utilizes D3 v3 with SVG rendering and a `d3.timer` for animation, while color-coded areas represent each company. The data comes from a CSV file parsed with `d3.csv` and date formatting via `d3.time.format`.

AAminaSGitHub

88% match

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

87% match

Loading thumbnail…

step1

This example shows a small-multiple time series chart tracking the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010. Three small line charts, one per company, are stacked vertically, each scaled to its own maximum price. The visualization uses D3 v3’s `d3.time.scale` for the date axis and `d3.scale.linear` for price, with `d3.svg.area` for filling under the lines and `d3.nest` to group the data by company. The data comes from a CSV file with symbol, date, and price columns.

AAminaSGitHub

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

Multiple lines

This visualization displays the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010 as multiple colored lines on a single chart. The chart uses a time-scaled x-axis and a linear y-axis for price, with each company’s line labeled directly. Built with D3 v4, the code loads data from a CSV, nests it by stock symbol, and renders using SVG paths. It also includes commented-out attempts at streamgraphs and area charts.

CCharlesGaydon

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

86% match