A7 Small Multiples

100%

A7 Small Multiples

✓ Published0🌍 Public

Last edited Mar 19, 2024

Created on Mar 19, 2024

This gallery example presents a small multiples chart displaying the opening stock prices of five technology companies—Oracle, Apple, Nvidia, Avago, and Microsoft—from 2023 to 2024. The D3.js visualization uses a CSV data source, splitting the time series into three separate time-scaled plots, each with its own x-axis and y-axis scaling. The code constructs the SVG layout with custom margins, applies a quantized color scale, and renders line charts for each company. The data is parsed from the `tech.csv` file using `d3.csv` and `d3.timeParse`, with axes and scales implemented via `d3.scaleTime` and `d3.scaleLinear`.

AI-generated description

Data is from and edited to only include open prices from: https://finance.yahoo.com/

MIT Licensed

Similar vizzes

Loading thumbnail…

A7 Heatmap Time Series

This heatmap visualizes the daily opening prices of five major tech companies—Oracle, Apple, Nvidia, Avago, and Microsoft—throughout 2024. Data from Yahoo Finance is encoded using a sequential color scale (interpolateGnBu) mapped to stock price values, with white spaces indicating missing days in the CSV. The x-axis uses a time scale for dates, while the y-axis uses an ordinal band scale for companies. Rows represent companies, columns represent trading days, and color intensity encodes open price. The visualization includes labeled axes, a color legend, and hover interactions on rectangles, with the color scale ranging from light blue for lower prices to dark blue for higher prices.

AAllen Jake Polintan

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

79% match

Loading thumbnail…

step1

This example shows a small-multiple time series chart tracking the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010. Three small line charts, one per company, are stacked vertically, each scaled to its own maximum price. The visualization uses D3 v3’s `d3.time.scale` for the date axis and `d3.scale.linear` for price, with `d3.svg.area` for filling under the lines and `d3.nest` to group the data by company. The data comes from a CSV file with symbol, date, and price columns.

AAminaSGitHub

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

78% match

Loading thumbnail…

Tech Stock Visualization

This visualization shows scaled closing stock prices for 26 tech companies throughout 2020, grouped by industry category (Gaming, Streaming, Work-From-Home, Online-Retail, and Tech-Giants). The interactive line chart plots timestamps against scaled closing prices, with each company’s series distinguished by a unique color. Built with D3 v6, it uses `d3.csv` to load remote data, `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the paths, and `d3.curveBasis` for smoothing. The SVG rendering includes ordinal color mapping and a bottom legend, with no animations applied.

Yyamunayennem

78% match

Loading thumbnail…

smallmultiplesStep2

This example shows stock price trends for multiple companies as small multiples, with each symbol rendered as an individual sparkline in its own panel. The visualization uses D3 v3 to load CSV data, nest it by company, and draw both line and area paths. The animation is driven by a `d3.timer` that reveals the data progressively. The code uses `d3.svg.line`, `d3.svg.area`, and `d3.time.scale` to map dates and prices, with each panel scaled independently to its own maximum price.

AAminaSGitHub

77% match

Loading thumbnail…

Multiple lines

This visualization displays the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010 as multiple colored lines on a single chart. The chart uses a time-scaled x-axis and a linear y-axis for price, with each company’s line labeled directly. Built with D3 v4, the code loads data from a CSV, nests it by stock symbol, and renders using SVG paths. It also includes commented-out attempts at streamgraphs and area charts.

CCharlesGaydon

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

77% match