Skip to main content
SimilarExport ZIP
100%

Persons of Concern StreamGraph by Origin

✓ Published0🌍 Public
ZZhi Guangda
Last edited Mar 23, 2020
Created on Mar 23, 2020

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.

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
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
94% 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
82% 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
80% 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
80% match
Loading thumbnail…

LINE CHART

This line chart displays the number of confirmed COVID-19 cases in various Chinese provinces on January 21st, based on data from Data Canvas - Sense Your City. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for the axes, and d3.line with curveBasis to create a smooth, interpolated path. The SVG rendering includes axis labels, a title, and a light blue stroke for the line.

FFadziMandondo
79% 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
79% match