Persons of Concern StreamGraph by Origin

Persons of Concern StreamGraph by Origin

This streamgraph shows the total number of persons of concern—including refugees, asylum-seekers, and internally displaced persons—grouped by country of origin over time, drawing on UNHCR population statistics. The visualization uses d3.stack with a wiggle offset to create the layered streams, and d3.area-label to place labels inside the curves. Data is interpolated across years to produce continuous paths, with hover effects altering fill opacity. Excluding low-count countries, the chart renders as an SVG with a time-based x-axis and a stacked area layout.

Persons of Concern StreamGraph by Origin

This streamgraph visualizes the total number of persons of concern, grouped by country of origin, over time, using data from UNHCR Population Statistics. The graphic displays the changing volume of various categories—such as refugees, asylum-seekers, and internally displaced persons—as stacked, colored streams, with labels repositioned using d3-area-label. The visualization employs D3 v4’s `d3.stack`, `d3.area`, and `d3.curveBasis` to render the smoothed, wiggle-offset streams, while `d3.scaleTime` and `d3.scaleLinear` handle the axes. The SVG rendering uses a filter to exclude countries with low total counts, and the streams highlight on hover.

Persons of Concern StreamGraph by Origin

Persons of Concern StreamGraph by Origin

A streamgraph shows the total number of persons of concern, such as refugees and internally displaced people, grouped by country of origin over time, excluding countries with relatively low counts. The visualization uses a wiggle offset and inside-out ordering to stack the areas, with labels positioned by d3-area-label. Data comes from UNHCR Population Statistics, interpolated across years and rendered as SVG using d3.v4's stack and area APIs.

Ddistortedlights

Persons of Concern StreamGraph by Origin

This interactive streamgraph visualizes the total number of persons of concern grouped by country of origin, with the sum of asylum-seekers, refugees, internally displaced persons, stateless persons, and other categories. The data comes from UNHCR Population Statistics and excludes countries with relatively low counts. Built with D3 v4, the visualization uses d3.stack with a wiggle offset and inside-out ordering, along with d3.area, d3.scaleTime, and d3.scaleLinear to render the smooth, labeled streams in SVG. The d3-area-label library positions area labels, and hovering over a path highlights it in black.

Ssathishkanna11

95% match

Fork of Persons of Concern StreamGraph by Origin

This visualization presents a streamgraph of the total number of persons of concern (refugees, asylum-seekers, internally displaced persons, and related categories) grouped by country of origin, using data from UNHCR Population Statistics. The chart renders as an SVG with a wiggling stacked area layout, highlighting countries with over one million total persons. It interpolates yearly values between data points and uses d3.stack with stackOffsetWiggle, d3-scale-time, and d3.axisBottom for the time axis. Labels are positioned automatically via the d3-area-label library, and the implementation runs on d3 v4.

NNick-Brice

95% match

Persons of Concern StreamGraph by Origin

This streamgraph shows the total number of persons of concern to UNHCR over time, grouped by country of origin, with each colored band representing a country. Using D3.js v4, it employs `d3.stack` with `d3.stackOffsetWiggle` and `d3.stackOrderInsideOut` to create the layered layout, and `d3.area` with `d3.curveBasis` for smoothed curves. Data from the UNHCR Population Statistics API is loaded via `d3.json`, and labels are positioned using the `d3-area-label` library. The visualization filters to countries with over one million total persons of concern and renders as an SVG.

JJerfaas

94% match

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.