tp2 dataviz

100%

✓ Published0🌍 Public

Last edited Nov 27, 2017

Created on Nov 26, 2017

This example animates a multi-series line chart, plotting monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. It first draws each series as a dark, interpolated path in its own small multiples panel, highlighting the latest point with a colored circle. The animation then transitions each panel into a horizon chart, layering three clipped, stacked area fills to show the same data with greater vertical resolution. The code uses d3.svg.line and d3.svg.area generators, d3.time.scale for dates, and d3.select transitions to orchestrate the sequential reveal of lines and horizons.

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'>tp2 dataviz</a>

mit Licensed

Similar vizzes

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

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

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

86% match

Loading thumbnail…

TP3_Correction

This example presents a sequence of animated stock-price charts for Microsoft, Amazon, and IBM, cycling between area, multi-line, stacked, and streamgraph views. Built with D3 v4, it loads monthly price data from a CSV and uses `d3.nest()` to group values by company symbol, with `d3.area()` and `d3.line()` for the drawn shapes. An SVG canvas renders all charts, with timed transitions (`transition.duration`) and color-coded series via `d3.scaleOrdinal`. The animation loops automatically, highlighting how the same data can be reshaped dynamically across different visual encodings.

BBarbierJeremy

85% match

Loading thumbnail…

Tp3_DV_Rendu2

This visualization compares monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. It displays multiple small multiples, each showing a company’s price trend as a smooth line chart, with the data loaded from a CSV file. Using D3 v3, the code groups data by symbol via `d3.nest`, sorts companies by maximum price, and animates the drawing of each line progressively with a timer. An area fill, rendered via `d3.svg.area`, is added beneath each line, and the axis and scaling are computed dynamically per company.

AAminaSGitHub

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

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

84% match

Loading thumbnail…

TP3_DataViz_Steam

This visualization displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 using multi-line chart. Each company’s price series is drawn as a separate colored line using D3 v4’s `d3.line` with a basis curve, while the x-axis uses `d3.scaleTime` and the y-axis uses `d3.scaleLinear`. The dataset is loaded via `d3.text` and parsed with a custom comma delimiter, then nested by stock symbol using `d3.nest`. A legend is generated from the ordinal color scale’s domain, and axes are rendered using `d3.axisBottom` and `d3.axisLeft`.

EElisaDnr

83% match