Skip to main content
SimilarExport ZIP
100%

d3 time series streamgraph

✓ Published0🌍 Public
AAndrew
Last edited Mar 20, 2024
Created on Mar 20, 2024
Forked from HTML Starter

This streamgraph visualizes Google Search Trends for five best-selling video game franchises from 2004 to 2024, showing relative popularity over time. It uses d3.stack() with the stackOffsetSilhouette offset to create the layered streamgraph shape, with a colorbrewer categorical palette from the colorbrewer library for the series. The chart employs d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, while the d3-legend library provides the legend. Data comes from Google Trends, simplified for the example, and is rendered as SVG with interactive tooltips.

AI-generated description

A time series streamgraph, using color scale with color brewer in D3 and legend from Susie Lu

BTW: The data was simplified to help with creating this visualization.

Link to original dataset: https://trends.google.com/trends/

MIT Licensed

Similar vizzes

Loading thumbnail…

Title

This visualization displays global video game sales across twelve genres from 1980 to 2016, using multi-line time series where each colored path represents a different genre. The chart uses D3 v7 with SVG rendering, employing `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` to generate paths from aggregated yearly sales data. Data comes from the vgsales.csv dataset, with genre totals computed by summing `Global_Sales` values. The visualization highlights genre performance trends over time and enables comparison of market share shifts across gaming history.

JJustin Chan
71% match
Loading thumbnail…

Video Game Platforms Streamgraph

This streamgraph visualizes global video game sales by platform over time, using a D3 stack layout with wiggle offset to create the flowing layered form. The data comes from a CSV file containing yearly sales figures, smoothed with array-blur for visual clarity. Colors are generated using d3.hcl and randomNormal, while the streamgraph is rendered as SVG with d3.area and labeled using d3-area-label. Hovering highlights a platform by inverting its fill to black with a white stroke.

DDaniel Ribaudo
70% match
Loading thumbnail…

D3 Scatter Plot for Video Game Sales

This D3 v6 scatter plot visualizes global video game sales across years, with each point representing a game and its platform encoded by color. Using SVG rendering, it scales the x-axis by year and y-axis by sales, allowing viewers to compare platform performance over time. The chart includes a d3.brushX brush for interactive selection and highlighting of data ranges, with d3.scaleLinear handling axis scales. Data comes from Kaggle’s video game sales dataset, parsed from CSV via d3.csv.

RRochelle
70% match
Loading thumbnail…

A6 Seqeuntial Color Scale

This dot plot visualizes metric sales of video game publishers from 2003–2010 using a sequential color scale. The chart encodes each publisher’s total sales with bar height and a color gradient from light to dark via `d3.scaleSequential` and `interpolateRdPu`. Built with D3 v7, it renders SVG bars, axes with `d3.axisBottom` and `d3.axisLeft`, and includes a legend using the d3-legend library. The data, sourced from the CORGIS video games dataset, is loaded from `games.csv` with numeric sales values processed before scaling.

AAllen Jake Polintan
70% match
Loading thumbnail…

Fork of Video Game Platforms Streamgraph

This streamgraph visualizes global video game sales across platforms and years, using a smoothed area chart that highlights sales distributions over time. The code loads CSV data from a GitHub gist and employs D3’s `rollup`, `stack`, `stackOffsetWiggle`, and `stackOrderInsideOut` APIs to aggregate and layer the data. Rendering with SVG, it uses `d3.scaleTime`, `scaleLinear`, `area`, and the `d3-area-label` library for labels. A black envelope path and hover effects enhance layer separation.

CCurran Kelleher
69% match
Loading thumbnail…

Refactored Iteration Line Graph: vgsales.csv

This interactive small-multiple chart displays video game sales over time across five regional markets, with each facet corresponding to a sales category (global, North America, Japan, EU, and other). A legend color-codes twelve genres, allowing users to hover to highlight a genre’s lines or click to toggle its visibility. Built with D3 v6, the SVG visualization fetches data from a GitHub gist and aggregates sales by year and genre via `d3.flatRollup` and `d3.sum`. Users can pan by dragging, zoom with the mouse wheel, and reset the view, while axes dynamically redraw their domains using `d3.axisBottom` and `d3.axisLeft`.

DDaniel Ribaudo
69% match
Loading thumbnail…

Fork of Fork of Video Game Platforms Streamgraph

This streamgraph visualizes global video game sales across platforms from 1970 to 2020, showing how each console's market share shifts over time. The visualization uses D3’s stack generator with the wiggle offset and inside-out order to create the layered streamgraph shape, with smoothed data via array-blur. Area labels are placed using the d3-area-label library, while color is assigned through an ordinal scale with HCL color space. The data comes from a CSV of video game sales, rendered as an SVG with axis ticks providing temporal context.

Oowenking2710@gmail.com
69% match
Loading thumbnail…

Visualization of Global Video Games Sales by Year and Genre

This visualization shows global video game sales by year, with bars colored by genre to reveal sales trends across categories over time. It uses the Vega-Lite API with D3’s CSV loader to fetch data from a GitHub-hosted dataset originally sourced from Kaggle. The chart encodes years on the x-axis, global sales on the y-axis, and genre as color, with tooltips displaying genre names. Custom styling via a config object improves label and title readability, while Vega-Lite’s automatic rendering handles the bar marks and scales.

VVarun Eranki
68% match