TP2 Data viz stacked UCBL 2017

100%

TP2 Data viz stacked UCBL 2017

✓ Published0🌍 Public

Last edited Nov 28, 2017

Created on Nov 28, 2017

This stacked area chart visualizes the monthly closing prices of three technology stocks—Microsoft, Amazon, and IBM—from 2000 to 2010. The chart uses a time-scaled x-axis and a linear y-axis, with each stock represented as a colored layer using the d3.stack layout. The code parses a tab-separated dataset with d3.tsv, nests the data by symbol, and renders the areas with d3.area, applying a category10 color scale. Axis labels and final values appear at the right edge of each layer.

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/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/87ccc538ea3f763d6ad25b227fed55fc'>TP2 Data viz UCBL 2017</a>

forked from <a href='http://bl.ocks.org/Renaud-D-Harreville/'>Renaud-D-Harreville</a>'s block: <a href='http://bl.ocks.org/Renaud-D-Harreville/ff427faa41d59b9a6921264988059e1b'>TP2 Data viz UCBL 2017</a>

forked from <a href='http://bl.ocks.org/Renaud-D-Harreville/'>Renaud-D-Harreville</a>'s block: <a href='http://bl.ocks.org/Renaud-D-Harreville/e7143efa09b66c8ab585a86aaf0d23ff'>TP2 Data viz 2 UCBL 2017</a>

mit Licensed

Similar vizzes

Loading thumbnail…

TP2 Data viz UCBL 2017

This example visualizes monthly stock prices for Microsoft, Amazon, and IBM from January 2000 to March 2010. The chart shows multiple colored area and line series, each symbol assigned a distinct color from the d3.scaleOrdinal category scheme, with a legend identifying each company. Data is loaded from a CSV file and nested by symbol using d3.nest, with dates parsed via d3.timeParse and scales constructed with d3.scaleTime and d3.scaleLinear. Lines and areas are rendered as SVG paths using d3.line and d3.area with a curveBasis interpolation, alongside d3.axisBottom and d3.axisLeft for the time and price axes.

RRenaud-D-Harreville

91% match

Loading thumbnail…

TP2 data viz final UCBL 2017

This interactive visualization compares the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010. It first animates line charts for each company sequentially, then transforms them into stacked horizon graphs to highlight price trends and relative magnitudes. Built with D3 v4, it uses `d3.csv` to load the dataset and `d3.timeParse` for date handling, while SVG paths and animated transitions via `d3.timer` and `transition` methods drive the visual evolution. The horizon chart technique uses clipped, overlapping areas to encode values across multiple bands.

RRenaud-D-Harreville

90% match

Loading thumbnail…

TP2 Data viz areas UCBL 2017

This example displays a multi-series line and area chart of stock price changes over time. The visualization compares the monthly closing prices of three technology companies, using the provided dataset of Microsoft, Amazon, and IBM stock values. Each symbol is nested and rendered as a separate colored line with a semi-transparent area beneath it, allowing for quick visual comparison of price trends. The chart is built with d3.v4, using the `d3.line`, `d3.area`, and `d3.nest` APIs to process and draw the time-series data.

RRenaud-D-Harreville

90% 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_v3.11

This visualization compares monthly stock price trends for Microsoft, Amazon, and IBM using layered area charts. It presents the data in three distinct modes: separated, stacked, and centered displays, allowing viewers to compare price movements across companies. The D3.js v4 code loads data from a CSV file, parses dates with `d3.timeParse`, and renders the areas as SVG paths using `d3.area` with basis curve interpolation. Animated transitions would cycle through the different display modes, though the visible code primarily sets up the static chart structures.

GGaret005

86% match

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

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

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