Theme River

100%

✓ Published1🌍 Public

Last edited Nov 7, 2023

Created on Nov 7, 2023

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`.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

87% match

Loading thumbnail…

ThemeRiver

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.

Vvivianaaai@qq.com

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

75% match

Loading thumbnail…

Theme River Graph

A theme river graph displays the median property value over time across Melbourne suburbs, colored either by property type or by number of bedrooms. Interactive buttons switch between grouping methods, and hovering reveals tooltips with details. The visualization uses d3.nest to aggregate data from a CSV, calculates yearly medians, and renders stacked areas with d3.area and d3.curveCardinal, offset by d3.stackOffsetSilhouette. The SVG output is driven by d3.scaleLinear axes, with color assigned via d3.scaleOrdinal and d3.schemeCategory10.

方方顗棠

71% match

Loading thumbnail…

activity 7.2

This stacked bar chart visualizes how movie ratings are distributed across genres, with each bar segment representing the proportion of films falling into rating brackets from below 5.0 to above 8.5. Hovering over a segment reveals its exact percentage via a tooltip. The visualization uses d3.stack to generate the stacked data, d3.scaleOrdinal for color encoding, and d3.scaleBand with d3.scaleLinear for positioning. Data comes from a CSV file, and the SVG rendering includes a custom legend and axis labels.

Rrushithareddyy

71% match

Loading thumbnail…

Fork of Fork of Movie ratings

This stacked bar chart shows the distribution of movie ratings across six genres, with each bar divided into five rating categories from “below 5.0” to “above 8.5.” The chart reveals that documentaries and dramas have higher proportions of strong ratings, while action films skew toward lower scores. Using D3 v7, the visualization applies `d3.stack()` to compute stacked segments, `d3.scaleOrdinal` to map rating categories to colors, and `d3.scaleBand` for the genre axis. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating segment. The data is loaded from a CSV file and rendered as SVG.

SSiyu Shen

71% match

Loading thumbnail…

hw6_me

This visualization shows a ThemeRiver chart tracking median house sale prices over time, segmented by property type and bedroom count. Seven categories—ranging from two-bedroom houses to three-bedroom units—are displayed as colored streams that flow and stack vertically. The chart uses D3 v6 with `d3.stack` and `stackOffsetSilhouette` to create the silhouette layout, while `d3.scalePoint` and `d3.area` handle the temporal axis and stream paths. Data comes from a CSV file containing quarterly sale prices, with each category assigned a distinct color from a ordinal scale.

Kkenny-wq

70% match

Loading thumbnail…

Untitled

A ThemeRiver visualization displays changes in Massachusetts home sale prices over time, stacked into flowing streams by bedroom count. The chart uses D3 v6 to load CSV data, transforms it via the `d3.stack` generator, and renders smooth SVG areas with `d3.area` and `curveBasis`. Time and price scales map dates to the x-axis and cumulative price ranges to the y-axis, while each stream is colored by housing category.

Nnanegole

70% match