Skip to main content
SimilarExport ZIP
100%

Fork of Persons of Concern StreamGraph by Origin

✓ Published0🌍 Public
Hhafiz9977
Last edited Dec 24, 2020
Created on Dec 24, 2020

This fork of the Persons of Concern StreamGraph groups cumulative COVID-19 case counts by Chinese province over time. Using d3.stack with the wiggle offset and basis curve, it renders a smooth streamgraph in SVG, with each province as a colored layer. The code interpolates missing daily values between reported dates and applies a unique color to each province. Hovering a layer turns it black for emphasis, while white labels are positioned via d3-area-label. Data is loaded from a local JSON file via d3.json.

AI-generated description

A StreamGraph visualization of the total number of persons of concern grouped by country of origin.

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.

See also this variant that shows the data grouped by destination.

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…

Persons of Concern StreamGraph by Origin

A streamgraph shows the number of COVID-19 cases across Chinese provinces over time. The visualization uses D3.js v4 with a stacked area chart, employing `d3.stack` with `stackOffsetWiggle` and `stackOrderInsideOut` to create the flowing shape. Data is interpolated between recorded dates using a custom bisector function. Labels are positioned with the `d3-area-label` library, and the chart renders as an SVG with hover interactions that highlight individual provinces. The underlying data comes from a JSON file tracking daily case counts per region.

Ppgy-iacas
89% match
Loading thumbnail…

Persons of Concern StreamGraph by Origin

This visualization shows the cumulative number of COVID-19 cases across Chinese provinces over time, using a streamgraph where each colored band represents a province's reported case count. The data, sourced from daily JSON records, is interpolated to fill gaps between dates. Built with D3 v4, it uses `d3.stack` with the `stackOffsetWiggle` and `stackOrderInsideOut` methods, alongside `d3.area` with `curveBasis`. Labels are positioned via the `d3-area-label` library, while axes and styling are handled through standard D3 scales and SVG elements.

ZZhi Guangda
89% match
Loading thumbnail…

Persons of Concern StreamGraph by Origin

This streamgraph visualizes the number of confirmed COVID-19 cases in China’s provinces and autonomous regions over time, using a wiggle-offset stacked area chart. Data is loaded from a local JSON file, interpolated for daily values, and rendered as SVG paths using the D3.js stack, area, and curveBasis APIs, with labels positioned by the d3-area-label library. The visualization highlights the rise and fall of case counts across regions, with each colored band representing a province’s contribution to the total.

Ppgy-iacas
87% match
Loading thumbnail…

Fork of Persons of Concern StreamGraph by Origin

This visualization shows the total number of persons of concern grouped by country of origin over time, using a streamgraph with labels positioned inside each stream. Built with D3 v4 and rendered as SVG, it applies `d3.stack` with `stackOffsetWiggle` and `stackOrderInsideOut` to create the flowing layers, while `d3-area-label` places country names. The data comes from UNHCR Population Statistics and excludes countries with low counts. Interpolation between years smooths the paths, and hover effects highlight individual countries.

EEevikettu
79% match
Loading thumbnail…

Fork of Persons of Concern StreamGraph by Origin

A streamgraph visualizes the total number of persons of concern grouped by country of origin, summing categories like refugees, asylum-seekers, and internally displaced persons. The interactive D3.js v4 visualization uses `d3.stack` with a wiggle offset and inside-out ordering, rendering static SVG paths with d3-area, a time-based x-scale, and labels positioned via d3-area-label. Data is fetched from a remote JSON file, filtered to countries with over one million people, and interpolated across years using d3's bisector and date range methods.

CCristina Macaraig
79% match
Loading thumbnail…

Fork of Streamgraph of covid-19

A streamgraph visualizes COVID-19 case counts across five continents from January to December 2020, using a silhouette offset layout. The SVG rendering, built with D3 v2 in a React framework, loads data from CSV files for daily and monthly aggregation. Hovering a layer fades others and displays a tooltip with the region, case value, and date. The implementation relies on D3's `layout.stack`, `svg.area`, and time scale APIs, with color encoding based on a sequential orange palette.

Iimsohandsome123
79% match
Loading thumbnail…

Fork of Persons of Concern StreamGraph by Origin

A streamgraph visualizes the total number of persons of concern per year, grouped by country of origin, using UNHCR data. It shows stacked, colored streams for countries with over one million total persons, with labels positioned by d3-area-label. The code uses d3.stack with stackOffsetWiggle and stackOrderInsideOut, d3.scaleTime, and d3.scaleOrdinal with schemeCategory10. Values are interpolated across years via d3.bisector. Hovering over paths turns them black.

Zzedelstein
79% match
Loading thumbnail…

Fork of Streamgraph of covid-19

This fork of a COVID-19 streamgraph visualizes daily case numbers across five continents using an animated silhouette-style stacked area chart. Built with React and D3 v2, it renders SVG paths that change color palettes and update via tooltip interactions. The chart uses `d3.layout.stack` with a silhouette offset, `d3.svg.area` with cardinal interpolation, and `d3.time.scale` for the time axis, pulling data from CSV files for daily, monthly, or original case counts.

XXianbin Gu (Bing)
79% match