Skip to main content
100%

DataViz_TP3_4areas

✓ Published0🌍 Public
Aalicemontel
Last edited Nov 29, 2017
Created on Nov 26, 2017

This visualization displays four stock price trends (AAPL, IBM, MSFT, and another symbol) as stacked areas over time, with each series separated into distinct horizontal bands. It uses d3.nest to group the CSV data by symbol, d3.timeParse to convert dates, and d3.area with a custom y0/y1 function to position each band at fixed height intervals. The chart renders as SVG with d3.axisBottom for the time axis, while color coding via d3.scaleOrdinal distinguishes the symbols.

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/57eb273e01761b829aaa95b28c8193c1'>loading multiple stock data from dataset</a>

forked from <a href='http://bl.ocks.org/alicemontel/'>alicemontel</a>'s block: <a href='http://bl.ocks.org/alicemontel/a70b528ca3697b74d47d05e2312423f5'>DataViz_TP3</a>

Rendu pour le TP3 de l'UE DataViz - M2DS Univ. Claude Bernard Lyon 1

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…

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
86% 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
85% match
Loading thumbnail…

TP3 area chart

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.

LLRobergeon
84% 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
84% 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
83% match
Loading thumbnail…

DataViz_TP3_stacked

This visualization shows the monthly stock prices of Microsoft (MSFT) and Amazon (AMZN) from January 2000 to March 2010, using stacked area charts to compare their relative performance over time. The data is loaded from a CSV dataset containing symbol, date, and price fields. The visualization renders as an SVG using D3 v4, with two layered area paths colored distinctly (blue for MSFT, orange for AMZN) to show the cumulative price contributions. The x-axis represents time in months, while the y-axis shows the stacked price values, with a legend identifying each company. A hover interaction reveals exact values, making it easy to compare the two stocks' trajectories and their combined total over the decade. The chart uses a clean white background with light gray gridlines, and the stacked areas provide a clear visual comparison of the two stocks' relative performance over time.

Aalicemontel
82% match
Loading thumbnail…

Stacked to Grouped

This visualization displays monthly stock prices for four companies (MSFT, AMZN, IBM, AAPL) across selected years, initially rendered as stacked bars and toggling to grouped bars when a white circle is clicked. The code uses D3 v4 with SVG rendering, loading data from `stocks.csv` via `d3.csv`. It builds linear scales (`d3.scaleLinear`) for positioning and creates rectangles for each bar, with colors distinguishing companies. The chart updates by re-binding data and adjusting bar widths and heights, and includes labeled axes and a company legend.

BBaptisteL54
82% match