Skip to main content
SimilarExport ZIP
100%

Stream graph

✓ Published1🌍 Public
Sstanley.shen2003@gmail.com
Last edited Oct 27, 2023
Created on Oct 27, 2023

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.

AI-generated description

A bare minimum HTML page.

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

6

This visualization uses a streamgraph to display median house sale prices over time, broken down by property type and number of bedrooms. A dropdown menu allows the user to select which stream is sorted at the top of the graph. The stacked areas are rendered as SVG paths using `d3.area` with a `stackOffsetSilhouette` layout, and the x-axis encodes time as years with seasonal divisions. Hovering over a stream reveals a tooltip with the price for that date, calculated from the stack’s bounds. The data comes from a CSV file (`ma_lga_12345.csv`) listing sale dates and median prices.

Kkatherine3849@gmail.com
74% match
Loading thumbnail…

(fork) 1

This interactive streamgraph visualizes quarterly median sale prices for houses and units with varying bedroom counts, sourced from the data.csv file. Users can reorder the legend categories through drag-and-drop, which triggers a redrawing of the stacked time-series chart via the `render` function. The visualization uses D3.js v6 for creating the SVG, scaling axes, and rendering the tooltip, while Sortable.js handles the reordering. The y-axis is fixed between -4,000,000 and 4,000,000 to accommodate the stacked values.

Wweird_danger
74% match
Loading thumbnail…

109705001_hw6

A streamgraph visualizes quarterly median sale prices for houses with two to five bedrooms in King County, Washington, from 2007 to 2019. The chart uses a silhouette offset to center the flowing areas around a shared baseline, with color encoding by bedroom count. Hovering over a time segment highlights the exact sale price and property type via a tooltip. The visualization is built with D3.js, using `d3.stack` with `stackOffsetSilhouette`, `d3.area` with curveBasis, and `d3.schemeTableau10` for categorical coloring. Data comes from a CSV file of median sale values.

Yyihsuan
73% match
Loading thumbnail…

hw6

This visualization shows quarterly median property prices for houses with 2 to 5 bedrooms from 2007 to 2019, using a stacked area chart to compare price trends across these groups. The chart uses D3 v6’s `csv` loader to fetch data from an external URL, `scaleLinear` for the axes, and `stack` with `stackOffsetSilhouette` for layering, though the offset is commented out. Each bedroom category is rendered as a distinct SVG path via `d3.area`, with an ordinal color scale distinguishing the series. The y-axis displays a fixed range of -100,000 to 100,000, and the x-axis uses five ticks for readability.

Kkenny-wq
71% 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.

方方顗棠
70% 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
69% 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
69% match