Area_Chart

100%

✓ Published0🌍 Public

Last edited Nov 29, 2017

Created on Nov 29, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

89% match

Loading thumbnail…

DataVizTP3_AreaChart

An area chart displays monthly closing stock prices for Microsoft, Amazon, and IBM from January 2000 through March 2010. Three semi-transparent filled regions, one per company, use color to distinguish the symbols, with a legend identifying each. Built with D3 v4 and rendered as SVG, the code uses `d3.area` and `d3.line` with basis curves, `d3.nest` to group the CSV data by symbol, and `d3.timeParse` for date handling. The y-axis is scaled to the maximum price across all series.

KKylaste

87% match

Loading thumbnail…

Stocks Bar chart

This interactive chart displays monthly stock price data for MSFT, AMZN, and IBM from 2000 to 2010, aggregated by year. Clicking the chart toggles between stacked bars and grouped circles, each colored by company. The visualization uses d3.csv to load data, d3.nest for aggregation, d3.scaleBand and d3.scaleLinear for axes, and d3.stack for the stacked layout, with all elements rendered as SVG.

CCtuauden

87% match

Loading thumbnail…

Stack_Graph

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()`.

BBarbierJeremy

87% match

Loading thumbnail…

Test

This line chart shows the monthly stock prices of Microsoft, Amazon, and IBM from January 2000 to March 2010, with each company’s price trend drawn as a separate colored line. The visualization uses the D3.js library (version 3.5.17) to parse dates, scale the axes, and render the SVG paths. Data is loaded from a CSV file, then grouped by symbol using `d3.nest()`, with the lines drawn using `d3.svg.line()` and the axes created via `d3.svg.axis()`. The color scale is generated dynamically with `d3.scale.category10()`.

Rrvdv

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

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

85% match