TP3 area chart

100%

TP3 area chart

✓ Published0🌍 Public

Last edited Nov 29, 2017

Created on Nov 29, 2017

A small multiples area chart visualizes monthly closing prices for Microsoft, Amazon, and IBM from January 2000 through March 2010, with each symbol’s time series drawn as a filled steelblue region. The D3 v4 code uses `d3.text`, `d3.dsvFormat`, `d3.nest`, `d3.scaleTime`, `d3.scaleLinear`, `d3.curveBasis`, and `d3.axisBottom`/`d3.axisLeft` to parse the CSV, group by symbol, and render the SVG paths. A categorical color legend labels each stock.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/855207ac5fb5c170de59b9c69ea56012'>simple line chart from dataset</a>

forked from <a href='http://bl.ocks.org/LRobergeon/'>LRobergeon</a>'s block: <a href='http://bl.ocks.org/LRobergeon/eb61608fd8c1d25f913eb59f83360f59'>TP3 simple line chart</a>

mit Licensed

Similar vizzes

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

91% match

Loading thumbnail…

TP3 multiple line

This visualization displays monthly stock prices for Microsoft, Amazon, and IBM from January 2000 to March 2010, using a small multiple layout with one chart per company. Each chart contains a gray area path and a line path rendered as SVG, with the y-axis scaled independently to each stock’s maximum price. The code uses d3.csv to load the dataset, d3.nest to group by symbol, and d3.time.scale, d3.svg.area, and d3.svg.line to construct the charts. Data comes from a local CSV file.

LLRobergeon

90% match

Loading thumbnail…

TP3_DataViz_Area

This visualization displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 using overlapping area charts and line paths. The code nests the CSV data by symbol, parses dates with `d3.timeParse`, and scales time and price with `d3.scaleTime` and `d3.scaleLinear`. It renders semi-transparent filled areas and stroked lines using `d3.area` with a basis curve, then adds axes via `d3.axisBottom` and `d3.axisLeft`, plus a color-coded legend based on `d3.scaleOrdinal`.

EElisaDnr

89% match

Loading thumbnail…

TP3_DataViz_SmallMulti

This example shows monthly stock price trends for Microsoft, Amazon, and IBM from 2000 to 2010 using small multiples, with one SVG chart per symbol. Each chart displays a pink area path and a black line, with the y-axis scaled independently based on each symbol’s maximum price. The code uses d3.csv to load data, d3.nest to group by symbol, and d3.area and d3.line with d3.scaleTime and d3.scaleLinear. The color of each area is selected from a hardcoded array, demonstrating per-chart styling.

EElisaDnr

89% match

Loading thumbnail…

TP2

This visualization shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 using multi-line time series. The data comes from a CSV file parsed with the `d3.dsvFormat` API. Each stock’s price trend is drawn as a colored line using `d3.line` with a basis curve, within an SVG rendered by D3 v4. The chart includes axes generated by `d3.axisBottom` and `d3.axisLeft`, plus a legend built with `d3.scaleOrdinal` and category colors. The code also computes per-symbol maximum and total prices via `d3.max` and `d3.sum`, though these values are not directly displayed.

LLRobergeon

88% match

Loading thumbnail…

TP3 simple line chart

This example shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 as a single black line chart. The visualization uses D3 v4 with an SVG rendering approach, employing `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. The `d3.line` generator creates the path, while `d3.timeParse` and `d3.timeFormat` handle date conversion and label formatting. Data is loaded from a JSON dataset, with the last value displayed as text annotation.

LLRobergeon

87% match

Loading thumbnail…

TP3_Data_Viz

This visualization compares monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, using a small-multiple layout of line charts. Each symbol is sorted by its maximum price and displayed in its own row, with a shared time axis and per-symbol price scales. The code uses d3.csv to load the dataset, d3.nest to group records by symbol, and d3.svg.line and d3.svg.area to render the paths. Animated transitions, driven by d3.timer and transition methods, first draw the lines progressively and then transform them into horizon-style area charts, moving labels to the right edge.

AAminaSGitHub

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

87% match