TP2 Data viz small multiples UCBL 2017

100%

TP2 Data viz small multiples UCBL 2017

✓ Published0🌍 Public

Last edited Nov 28, 2017

Created on Nov 28, 2017

This example displays multiple small-multiple line charts, each representing the monthly stock price of a different company (MSFT, AMZN, IBM) from the dataset.csv file. Each chart includes an area fill and a line, with the y-axis scaled to the maximum price of that specific symbol. The code uses d3.nest() to group data by symbol, d3.timeParse to parse dates, and d3.axisBottom and d3.axisLeft to render axes. A d3.scaleOrdinal with d3.schemeCategory10 assigns a distinct color to each company’s chart.

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 small multiples 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/56245478560a3b1f54e435484ae5428d'>TP2 Data viz small multiples UCBL 2017</a>

mit Licensed

Similar vizzes

Loading thumbnail…

TP2 Data viz small multiples UCBL 2017

This visualization displays stock price trends for multiple companies (MSFT, AMZN, IBM) as a series of small multiples, with each symbol rendered in its own chart panel. Each panel shows a line and an area chart, with y-axis scaled per-panel to that company’s maximum price, and a label for the symbol name. Built with D3 v4, it parses the CSV data using `d3.dsvFormat`, nests by symbol, and uses `d3.area` and `d3.line` for the geometric paths. The SVG renderings are created with appended `<text>` labels and axes via `d3.axisBottom` and `d3.axisLeft`.

RRenaud-D-Harreville

93% match

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

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

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

87% match

Loading thumbnail…

DataVizTP3_SmallMultiple

The visualization displays monthly stock price trends for Microsoft, Amazon, and IBM as small multiples, with each company shown in its own mini chart panel. The code uses D3 v4 with SVG rendering, employing `d3.nest()`, `d3.csvParse`, and `d3.area()` with `d3.curveBasis`. Each panel applies its own y-domain scaled to the company’s maximum price, showing colored area and line paths. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, with data sourced from a local CSV file.

KKylaste

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…

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

84% match

Loading thumbnail…

TP2 Data viz stacked UCBL 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.

RRenaud-D-Harreville

83% match