Streamgraph 2.0

100%

Streamgraph 2.0

✓ Published1🌍 Public

Last edited May 24, 2020

Created on May 19, 2020

This streamgraph displays changes in Dutch societal indicators from 2000 to 2018, including happiness, depression-related deaths, suicides, and bachelor’s degree graduates. The visualization uses a silhouette offset to center the stacked areas around a central axis, with each colored layer representing a different metric. Built with D3 v4, the example loads data from a CSV file and uses `d3.stack` with `d3.stackOffsetSilhouette` to compute layer positions, while `d3.area` generates the SVG paths. An ordinal color scale applies the `d3.schemeDark2` palette, and interactive tooltips reveal the layer name on mouse hover.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Streamgraph 1.0

A streamgraph displays changes in five data series from 1996 to 2018, including happiness scores, mood disorder diagnoses, and suicide-related metrics. Using d3.stack with stackOffsetSilhouette, the code layers filled areas symmetrically around a central axis, with d3.scaleOrdinal and d3.schemeDark2 assigning colors. The SVG rendering includes a gridline-based x-axis, and interactive hover effects dim other areas while tooltips identify the selected series. Data comes from a CSV file loaded via d3.csv.

EEline000

85% match

Loading thumbnail…

Prototype geluk 2.0

This visualization depicts changes in a happiness index over time from 1997 to 2018, using a horizontal bar chart where each bar’s length corresponds to the yearly happiness value. The chart is built with SVG and D3 v5, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Data is loaded from a local CSV file and rendered with styled rectangles. Axes are generated using `axisBottom` and `axisLeft`, with the x-axis formatted as percentages.

EEline000

72% match

Loading thumbnail…

Prototype geluk 1.0

This bar chart visualizes reported happiness levels in the Netherlands from 1997 to 2018, with each bar’s length representing the yearly "geluk" score. The chart uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, rendering SVG rectangles with steelblue fill. Data is loaded from a local CSV file via `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`. The visualization highlights slight annual fluctuations in happiness, remaining mostly stable between 87 and 89 points.

EEline000

72% match

Loading thumbnail…

Streamgraph

This streamgraph visualizes two synthetic datasets generated with a custom layer-stacking function, rendered as smooth, colored areas in SVG with D3 v2. Each stream can be toggled and faded by clicking or hovering on its tag in the legenda above the chart, where tag positions are computed using getBBox() to fit the graph width. The visualization supports smooth transitions between datasets and includes a button to switch between the two stacked layouts, with in-stream tags positioned heuristically to label each series. Styling uses a Google Font and interactive highlights, while the code comments note known browser quirks around font loading and transition interruptions.

GGerHobbelt

72% match

Loading thumbnail…

Prototype geluk 3.0

This scatterplot shows the trend of reported happiness in the Netherlands from 1997 to 2018, with each circle representing a yearly score on a percentage scale. The visualization uses d3.csv to load the data and d3.scaleLinear and d3.scalePoint for the axes, rendering circles as SVG elements. The chart includes a bottom axis formatted as percentages and a left axis listing each year, with the source data stored in a plain CSV file.

EEline000

71% match

Loading thumbnail…

Untitled

This interactive scatterplot compares a selected social indicator against age-standardized depression rates across countries, with each circle representing a year's data for a chosen region. Users can switch the x-axis between Freedom, Corruption, Generosity, and Health, and filter by geographic region via dropdown menus. Built with React and D3 v6, the visualization uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render SVG circles, with a color-coded legend distinguishing years. Data comes from the `data.csv` file, and the title suggests a thematic focus on societal factors versus depression.

NNikithakatta30

71% match

Loading thumbnail…

Streamgraph

A streamgraph displays twenty layers of synthetic time-series data, using a wiggle offset to minimize visual overlap. The graphic animates between two independently generated datasets, smoothly interpolating the stacked area paths over 2.5 seconds. Built with D3 v4, the example uses `d3.stack`, `d3.area`, `d3.scaleLinear`, and `d3.interpolateCool` for color. A button triggers the transition, re-binding the data and applying a transition on the `d` attribute of SVG path elements.

Mmbostock

71% match

Loading thumbnail…

Streamgraph

This streamgraph shows how species abundance varies with latitude, using a stacked silhouette layout. The code loads CSV data and applies `d3.stack` with `d3.stackOffsetSilhouette` to create the layered structure, then renders it with `d3.area` and `d3.scaleLinear` axes. A `d3.scaleOrdinal` assigns colors from `d3.schemeDark2`. Interactive hover effects, managed via mouseover, mousemove, and mouseleave events, highlight a layer and display its group name in a tooltip. The visualization is built with D3 v6 and rendered as an SVG.

Yyungchiau

70% match