Theme River Graph

100%

Theme River Graph

✓ Published1🌍 Public

Last edited Nov 7, 2023

Created on Nov 7, 2023

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

ThemeRiver of the House Property Sales

A ThemeRiver visualization displays median property sale prices over time for houses with different bedroom counts (2–5) in Melbourne, Australia. The stacked silhouette chart uses a custom year adjustment function to plot seasonal quarterly data from 2007–2019. Users can reorder the stream layers via a dropdown menu, which updates the selection and re-renders the SVG. The code uses d3.stack with stackOffsetSilhouette and d3.area to draw the streams, with interactive tooltips showing price and season per data point on mouse hover, while reading data from a CSV file.

Hhi4u2qzy@gmail.com

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

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

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

76% match

Loading thumbnail…

Fork of Data Visualization Homework 6: ThemeRiver

This visualization displays house property sales trends using a scatter plot, where each point represents a sales record from a CSV file, colored by property type and positioned by median house price (MA) over time. It uses D3 v5 with SVG rendering, including smooth animated transitions that move circles from the center to their final positions. The plot features axis labels, gridlines, and a categorical color legend built with `scaleOrdinal` and `schemeCategory10`. The visualization reads data from `ma_lga_12345.csv` and updates dynamically through a re-rendering function.

YYouSheng-Do

73% match

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

方方顗棠

71% match

Loading thumbnail…

Stream graph

This interactive stream graph visualizes quarterly median house and unit prices in Sydney from 2007 to 2019, using a silhouette layout to show price trends across seven property categories. Built with D3 v5 and SVG, it loads CSV data and uses `d3.stack` with `stackOffsetSilhouette` to generate layered areas, while `d3.scaleOrdinal` and `d3.schemeDark2` handle coloring. Users can drag sortable buttons to reorder series, and hovering over an area highlights it and displays its name. The chart includes a customized time axis with tick marks.

Sstanley.shen2003@gmail.com

70% match