Skip to main content
SimilarExport ZIP
100%

Data Visualization Homework 6: ThemeRiver

✓ Published2🌍 Public
Dderrick373519@gmail.com
Last edited Nov 6, 2023
Created on Oct 26, 2023

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.

AI-generated description
MIT Licensed

Similar vizzes

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
85% 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
85% 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
82% match
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
82% 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.

方方顗棠
79% 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`.

方方顗棠
75% match