ThemeRiver

100%

✓ Published0🌍 Public

Last edited Nov 7, 2023

Created on Nov 7, 2023

Forked from Events

This visualization shows the average monthly player counts for several popular games on Steam from 2015 to 2021. The data is displayed as a stacked area chart called a ThemeRiver, using color-coded streams that flow over time to reveal trends and comparisons in player engagement. The visualization is rendered with SVG using D3 v6, leveraging `d3.stack`, `d3.area`, and `d3.curveCardinal` for smooth curves. The underlying data comes from the SteamCharts.csv file, with dates parsed using moment.js before being mapped to scales.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Theme River

A theme river visualizes the change in box office ratings categories (G, PG, PG-13, R) over time from 1983 to 2016. Streams are stacked with the `d3.stack()` API using a silhouette offset, rendered as filled SVG paths with cardinal curve interpolation via `d3.area()`. Hovering over a stream shows a tooltip displaying the category, year, and value, while a small dashboard appears in the corner. The color scale uses `d3.scaleOrdinal` with `d3.schemeCategory10`, and data comes from the CSV file `ratings.csv`.

方方顗棠

77% match

Loading thumbnail…

Data Visualization Homework 6: ThemeRiver

This interactive theme river visualizes the median sale prices of houses, grouped by number of bedrooms, in a geographic region over time. Using D3’s stack and stackOffsetWiggle functions, it displays fluctuating price bands as colored streams. A color legend and a dropdown menu for selection filter the data. The SVG renders with HTML tooltips and axis ticks, with data loaded from a local CSV file.

Dderrick373519@gmail.com

72% match

Loading thumbnail…

Fork of Theme River

This fork of Theme River visualizes movie ratings data across years, using a streamgraph to show revenue contributions from G, PG, PG-13, and R categories. The visualization employs d3.stack with a silhouette offset to create layered areas, rendered as SVG paths with d3.area and curveCardinal interpolation. Interactive tooltips display stream details on mouse movement, while a separate dashboard panel provides a compressed view of the data. The code uses d3.scaleOrdinal with schemeCategory10 for color encoding and d3.scaleLinear for both x and y axes.

RRYAN

71% match

Loading thumbnail…

Player Count Line Chart

This visualization shows a line chart tracking the monthly player counts for four games (PUBG, CSGO, Grand Theft Auto V, and Rainbow Six Siege) from September 2017 through December 2021. The chart uses D3.js v7 with SVG rendering, employing `d3.line` with a basis curve to smooth the trends. Interactive features include a color-coded hover effect that highlights one series by muting others, and a click-to-toggle visibility mechanism that hides or shows individual game lines. The chart also supports zooming via `d3.zoom`, which rescales the x-axis and redraws the lines with `transition.attrTween`.

AAaron Brion

71% match

Loading thumbnail…

ICE-7 Area Chart

This area chart displays the number of active players on the Steam platform from 2013 to 2023, with years on the x-axis and annual players in millions on the y-axis. Using D3 v5, the visualization renders an SVG line path overlaid with a semi-transparent filled area beneath it, both generated via the `d3.line` and `d3.area` generators. The scales are constructed with `d3.scaleLinear` and `d3.axisBottom` and `d3.axisLeft` produce labeled axes. Data is loaded as CSV from a GitHub gist and formatted with D3's `csv` method.

Aabdhaseeeb

71% match

Loading thumbnail…

ICE-7 Line Chart

This line chart visualizes the annual active player counts on the Steam platform from 2013 to 2023. The SVG chart uses d3.scaleTime and d3.scaleLinear to map years and player counts, with d3.axisBottom and d3.axisLeft rendering grid-lined axes. A d3.line generator draws the path, while d3.csv loads data from a GitHub gist, parsing values with d3.timeParse. The chart features a gradient background and custom styling through CSS classes for the line, tick labels, and axis labels.

Aabdhaseeeb

71% match

Loading thumbnail…

Monthly Users of Streaming Platforms

This visualization shows the monthly user counts for five streaming platforms across five months, using a stacked horizontal bar chart where each bar segment is colored by platform. The chart uses D3 v7 with an SVG rendering approach, applying `d3.stack()` to create the stacked data, `d3.scaleBand()` for the categorical month axis, and `d3.scaleOrdinal()` with a category10 color scheme for platform colors. Data is loaded from a CSV file via `d3.csv()`, with axes and labels drawn using `d3.axisBottom` and `d3.axisLeft`.

Vvineelaramulapalli32

71% match

Loading thumbnail…

Player Count Scatter Plot

This scatter plot visualizes player count data across several games from 2017 to 2020, with each circle representing a game’s yearly player total. The y-axis displays game titles as categorical bands, while the x-axis shows years. Built with React and D3 v7, the visualization uses `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleBand` for axes, and SVG circles rendered via `container_g.selectAll(".scatter")`. The data source is `maxPlayerCount.csv`, and the rendering approach is an SVG scatter plot with labeled axes.

AAaron Brion

70% match