Fork of d3 time series streamgraph

100%

Fork of d3 time series streamgraph

✓ Published0🌍 Public

Last edited Nov 26, 2024

Created on Nov 26, 2024

This streamgraph visualizes Google search trends for five video game franchises—Super Mario, Pokémon, The Legend of Zelda, Call of Duty, and Grand Theft Auto—from 2014 to 2024. Using D3.js, the chart employs a silhouette offset (`d3.stackOffsetSilhouette`) to create symmetric area layers, with color assigned via a ColorBrewer Set3 palette and a legend from the d3-legend library. The x-axis shows time in years, while the y-axis represents relative popularity. Data is loaded from a CSV, simplified from the original Google Trends dataset.

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…

d3 time series streamgraph

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.

AAndrew

88% match

Loading thumbnail…

Fork of dataset for video games

This bar chart visualizes global sales figures for six major video game franchises, ordered by total units sold, with Mario leading at 330 million and The Legend of Zelda at 120 million. The chart uses D3 v7’s `scaleBand` and `scaleLinear` to map franchise names and sales values, rendering the bars as SVG rectangles via `d3.selectAll().append('rect')`. The x-axis labels are rotated 45 degrees for readability, and the chart includes a title, axis labels, and a light teal fill for the bars. Data comes from a CSV file listing franchise sales.

JJayaSaiReddySantimalla@my.unt.edu

75% match

Loading thumbnail…

Fork of a bar chart

This visualization shows the top 30 best-selling video games by global sales, using a fork of a classic bar chart with thin orange bars and labeled axes. The data is loaded from a CSV file containing game names and sales figures. The code uses D3 v6 APIs such as `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` to render an SVG chart. It highlights popular titles like Wii Sports and Super Mario Bros., with a custom title and axis labels styled via CSS.

RRED98310

71% match

Loading thumbnail…

Fork of Fork of Video Game Platforms Streamgraph

This streamgraph visualizes global video game sales by platform from 1980 to 2020, showing how platforms like PlayStation, Xbox, and Nintendo rise and fall in popularity over time. Built with D3.js, the visualization uses `d3.stack` with a wiggle offset and inside-out ordering to minimize layer overlap. Sales data from a GitHub-hosted CSV is aggregated yearly, smoothed with `array-blur`, and rendered as SVG paths with a black backdrop to hide grid lines between layers. Hovering over any platform highlights it while dimming the rest.

ZZach2826

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

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

70% match

Loading thumbnail…

dataset for video games

This bar chart displays video game franchise sales figures from a dataset included in the project files, with Mario leading at 330 million units and The Legend of Zelda at 120 million. The visualization uses D3.js version 7.8.5, employing `scaleBand` for the categorical x-axis and `scaleLinear` for the y-axis, while rendering rectangles as marks. Axes are drawn with `axisLeft` and custom axis-label components from the `@curran/axis-labels` package. The chart includes an inner rectangle background and uses data-driven positioning and sizing for each bar.

JJayaSaiReddySantimalla@my.unt.edu

70% match

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

68% match