Stack_Graph

100%

✓ Published0🌍 Public

Last edited Nov 29, 2017

Created on Nov 29, 2017

This stacked area chart shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. The chart uses D3 v4’s `d3.stack()` to compute layered series and displays them as filled areas with `d3.area()`, using a basis curve for smoothing. Colored by `d3.schemeCategory10` and rendered as SVG, it includes time and linear axes via `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a CSV file and nested by symbol with `d3.nest()`.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

DataVizTP3_StackedArea

This stacked area chart visualizes monthly stock prices for multiple companies (MSFT, AMZN, IBM, AAPL) from 2000 to 2010, using a dataset loaded from a CSV file. The chart shows how each company’s price contributes to the total across time, with colored layers and a legend identifying each symbol. Built with D3 v4, it uses `d3.stack()`, `d3.area()`, and `d3.nest()` to structure the data, while `d3.scaleTime()`, `d3.scaleLinear()`, and `d3.scaleOrdinal()` handle scaling and colors. SVG paths render the areas, and axes are added with `d3.axisBottom()` and `d3.axisLeft()`.

KKylaste

89% match

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…

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_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…

Stocks - Grouped to stacked bars

This example visualizes monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010, allowing users to toggle between grouped and stacked bar charts. The grouped view shows each company’s price side-by-side, while the stacked view displays cumulative prices per month. Built with D3 v4, the visualization uses SVG for rendering and transitions to animate between the two modes. Data is loaded from a CSV file, processed with `d3.nest`, and mapped with `d3.scaleBand` and `d3.stack` to generate the bars.

JJboulery

88% match

Loading thumbnail…

Area_Chart

This area chart compares monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010. It displays both filled areas and overlaid lines per symbol, using color to distinguish each company. The visualization is rendered with SVG, and the code uses d3.nest, d3.line, and d3.area with basis curves, plus d3.scaleTime and d3.scaleLinear for axes. Data is loaded from a CSV file and parsed with d3.dsvFormat.

BBarbierJeremy

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

87% match

Loading thumbnail…

Transitions

A stacked bar chart displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. The visualization uses D3.js version 3.5.5 to create SVG elements, with a d3.layout.stack for layering data, d3.scale.ordinal for the x-axis, and d3.legend.color for the categorical color legend. Bars are grouped by date, colored by symbol, and rendered from the CSV data file.

MMariamArabi

87% match