Skip to main content
SimilarExport ZIP
100%

Persons of Concern StreamGraph by Origin

✓ Published1🌍 Public
Ppgy-iacas
Last edited Mar 13, 2020
Created on Mar 13, 2020

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.

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

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

Fork of Persons of Concern StreamGraph by Origin

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.

Hhafiz9977
89% match
Loading thumbnail…

Charts for Fun

This bar chart visualization displays the number of confirmed COVID-19 cases across Chinese provinces as of January 21, 2020. The chart uses a circular mark to represent each province's confirmed case count, with the y-axis scaled linearly and the x-axis using band scaling for categorical province names. The visualization demonstrates custom axis styling and labels using D3's axis functions, with data loaded from a local CSV file. The code uses D3 v5, specifically `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.csv` for data loading. The SVG rendering includes bold, italic, and underlined title text.

FFadziMandondo
81% match
Loading thumbnail…

Untitled

This bar chart displays the number of confirmed COVID-19 cases across several Chinese provinces, using data from a local CSV file. The visualization uses D3.js v4 to map provinces on the x-axis and case counts on the y-axis, rendering bars in SVG with steelblue fill. The chart includes axes with ticks, axis labels, and a title, all positioned within an SVG canvas. The code constructs scales with `d3.scaleBand` and `d3.scaleLinear` and uses `d3.axisBottom` and `d3.axisLeft` for tick generation, with data loaded via `d3.csv`.

Vvine-web
79% match
Loading thumbnail…

Line

This visualization displays the progression of COVID-19 cases across multiple Chinese provinces from January to February 2020. It animates line curves for each province, showing the count of existing confirmed cases over time, with provinces added sequentially. The code uses D3 v6 with a time-scale for the x-axis and a reversed linear scale for the y-axis, rendering SVG paths with cardinal spline curves. Data is loaded from a CSV file, and each province’s line is animated into place using d3 transitions over two seconds.

Vvivianaaai@qq.com
79% match
Loading thumbnail…

Persons of Concern StreamGraph by Origin

This StreamGraph visualizes the number of persons of concern over time, grouped by country of origin, using data from UNHCR Population Statistics. A stack offset wiggle creates the flowing layers, with d3.area-label placing labels inside each region. The code uses d3.stack, d3.scaleTime, and d3.curveBasis to render the SVG, with interpolated values between annual data points. Major and minor axes display time, while hovering highlights individual country streams.

Ppgy-iacas
78% match
Loading thumbnail…

D3 Bar chart

This bar chart visualizes the confirmed COVID-19 case counts across several Chinese provinces, using data from a local CSV file. It employs an SVG rendering approach with D3 v4's `scaleBand` for the categorical province axis and `scaleLinear` for the continuous case count axis. The chart displays horizontal bars whose heights are proportional to the number of cases, with axes labeled and styled using `d3.axisBottom` and `d3.axisLeft`. The file is a static, non-interactive visualization generated entirely through D3's imperative API.

Vvine-web
78% match