Untitled

100%

✓ Published1🌍 Public

Last edited Oct 23, 2020

Created on Oct 23, 2020

This streamgraph shows the imaginary mortality rates of sea turtles over time, with each colored layer representing a different category and labels appearing on hover. The visualization uses d3.v4 and d3-scale-chromatic to process a wide-format CSV dataset, stacking the values with `d3.stackOffsetSilhouette` to create the mirrored silhouette effect. Labels are displayed via a tooltip triggered by mouse events, while the x-axis uses custom tick values and a dashed gridline style.

AI-generated description

A StreamGraph visualization of the imaginary mortality rates of sea turtles for demonstration purposes only

The total number of persons of concern is the sum of Asylum-seekers, Internally displaced persons, Persons in IDP-like situation, Others of concern, Returned IDPs, Refugees (incl. refugee-like situations), Returnees, Persons in Refugee-like situation, and Stateless Persons. Excludes countries with relatively low counts. Data from UNHCR Population Statistics.

Draws from Labeled Streamgraph and Syrian Refugees by Settlement Type.

Uses d3-area-label to position labels.

Originally published in bl.ocks.org: Persons of Concern StreamGraph by Origin.

MIT Licensed

Similar vizzes

Loading thumbnail…

Turtle Survival

This streamgraph visualizes the mock mortality rates of three sea turtle species (Green, Loggerhead, Hawksbill) from 1901 to 2000, showing their combined decline over time. The stacked area chart uses d3.nest to group data by year and d3.stack to layer the species’ counts. Each species is distinguished by a color from a d3.scaleOrdinal palette, with the SVG paths generated using d3.area. Axes are scaled with d3.scaleLinear, and data is loaded from a CSV file via d3.csv.

CChristine Lanser

85% match

Loading thumbnail…

Sea Turtle Mortality Rates

A streamgraph shows imaginary sea turtle mortality rates over time, with each colored layer representing a different cause or location of death. The visualization uses stacked areas with a wiggle offset to display trends across a continuous timeline. Built with D3 v4, it applies `d3.stack`, `d3.area`, and `d3.curveBasis` to render smooth SVG paths, while `d3-area-label` positions labels within each layer. Data is interpolated from yearly values, and axes are generated via `d3.axisBottom` with major and minor ticks.

CChristine Lanser

84% match

Loading thumbnail…

Sea Turtle Survival (mock data)

This stacked area chart displays the decline in sea turtle populations (Green, Loggerhead, and Hawksbill) from 1910 to 1990 using mock data. The chart uses `d3.stack` with `d3.stackOrderAscending` to layer the three species, and `d3.area` with `d3.curveBasis` for smooth paths. Labels are positioned via the `d3-area-label` library, while axes use `d3.axisBottom` and `d3.axisLeft`. The visualization renders in SVG, with hover effects that turn areas black and tooltips showing species names.

CChristine Lanser

80% match

Loading thumbnail…

Untitled

A stacked area chart shows the changing levels of three turtle species—Green, Loggerhead, and Hawksbill—from 1901 to 2000, revealing a dramatic decline in all populations. The chart uses d3.area to render the stacked layers, with d3.scaleOrdinal and d3.schemeSet2 providing the color palette. Brushing, implemented via d3.brushX, allows zooming on the x-axis, while hovering highlights individual series by adjusting opacity. The d3-axis components handle the time-based and numeric scales, and the rendering is done with SVG.

CChristine Lanser

79% match

Loading thumbnail…

Fork of Sea Turtle Survival (mock data)

This stacked area chart visualizes sea turtle population trends from 1910 to 1990, showing the decline of Green, Loggerhead, and Hawksbill species using mock data. The chart uses d3.stack with ascending order, d3.area with curveBasis smoothing, and d3.scaleTime for the x-axis. Label placement employs d3-area-label, while hover interactions reveal species names via SVG titles. The visualization renders as SVG within an HTML page, using d3-scale-chromatic’s schemeDark2 for categorical colors and d3.axisBottom and d3.axisLeft for gridlines and tick marks.

Ggaryz1997

78% match

Loading thumbnail…

Fork of Sea Turtle Survival (mock data)

This stacked area chart visualizes mock sea turtle survival data for three species—Green, Loggerhead, and Hawksbill—over time, with each colored layer representing population counts. The chart uses D3 v4’s `d3.stack()`, `d3.area()`, and `d3.scaleTime()` to render the SVG paths, while `d3-area-label` positions the species labels inside each region. Axis ticks and gridlines are styled with CSS, and the y-axis title labels the population metric. Data is loaded from a CSV file, filtered to post-1900 dates, and the chart redraws responsively on window resize.

NNarayana Reddy

78% match

Loading thumbnail…

Fork of Sea Turtle Survival (mock data)

This stacked area chart shows the declining populations of three sea turtle species—Green, Loggerhead, and Hawksbill—from 1910 to 1990, using mock data. The visualization uses d3.v4 with d3.stack and d3.area to construct the layers, while d3-area-label positions the species labels along the curves. It employs d3.scaleTime and d3.scaleLinear for axes, d3.schemeDark2 for colors, and includes hover effects that turn areas black, with basic tooltips revealing species names.

Aaniosindustries

77% match

Loading thumbnail…

Fork of Fork of Sea Turtle Survival (mock data)

This stacked area chart shows the survival of sea turtle species (Green, Loggerhead, and Hawksbill) from 1910 to 1990 using mock data. The chart renders as SVG with D3 v4, using `d3.stack` and `d3.area` with `curveBasis` to create smooth stacked areas. Labels are positioned via `d3.areaLabel`, while hover effects reveal species names through built-in SVG `<title>` tooltips. The y-axis includes gridlines and a rotated title, with data parsed from an external CSV file using `d3.csv`.

Ppreethamkesa

77% match