Skip to main content
SimilarExport ZIP
100%

Fork of Theme River Graph

✓ Published0🌍 Public
Eeyxxr1260@gmail.com
Last edited Oct 19, 2024
Created on Oct 19, 2024
Forked from Theme River Graph

This interactive stream graph visualizes the median property prices in Massachusetts over time, allowing users to toggle between coloring by property type (house or unit) and by number of bedrooms (1–5). The D3.js v4 code uses `d3.stack`, `d3.stackOffsetSilhouette`, and `d3.area` to render the layered areas from a CSV file of quarterly sales data. Users switch coloring modes via buttons, which re-organize the data with `d3.nest` and recalculate medians before redrawing the SVG. Hovering over the graph reveals details through a tooltip element.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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
85% match
Loading thumbnail…

aHomework 6

This visualization shows the median sales price of houses in Massachusetts over time, broken down by the number of bedrooms. The theme river displays the changing price levels for houses with two, three, four, and five bedrooms across quarterly data from 2007 to 2019. Using the D3.js library, the code processes the CSV data with `d3.csv` and renders the streamgraph as an SVG. The plot uses stacked, colored bands to represent each bedroom category, revealing relative price trends and fluctuations across the housing market.

Jji3ji3ji3195@gmail.com
83% match
Loading thumbnail…

Homework 6

This interactive ThemeRiver chart visualizes median house prices over time, segmented by property type and bedroom count, using data from `ma_lga.csv`. The stacked streamgraph renders as SVG paths generated with `d3.area()` and `d3.curveBasis`, with colors from `d3.scaleOrdinal(d3.schemeTableau10)`. Users can click side labels to hide streams, hover to display a tooltip with date and price via `d3.pointer`, and click two streams to swap their stacking order, triggering an animated re-render with `d3.flatGroup` and `d3.minIndex`.

Jji3ji3ji3195@gmail.com
81% 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.

方方顗棠
80% match
Loading thumbnail…

Fork of Data Visualization Homework 6: ThemeRiver

This example presents a ThemeRiver visualization that tracks the median price of house sales, broken down by property type and number of bedrooms, over time. It displays the data as stacked, wiggled areas to show how the price distributions evolve across the years. The implementation uses the D3.js library (version 5) to load the data, process it, and render the visualization with SVG and animations. It also integrates a color legend and a dropdown menu (if present) to facilitate interaction, using D3's `scaleTime`, `stack`, and `area` functions.

LLê Minh Bằng
79% match
Loading thumbnail…

HW6

This visualization shows a ThemeRiver of house property sales in a specific area from 2007 to 2019, with each colored stream representing homes with two, three, four, or five bedrooms. The height of each stream reflects the median sale price (in dollars) for that property type quarterly. The code uses d3.stack with stackOffsetWiggle to create the flowing river layout, d3.area to draw the paths, and d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for axes and coloring. An interactive tooltip, styled via CSS, reveals the exact price and season when hovering over any stream.

Jjerry70938@gmail.com
79% 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
79% 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