Skip to main content
SimilarExport ZIP
100%

playaround

✓ Published0🌍 Public
MMonaYuan
Last edited Dec 20, 2021
Created on Dec 20, 2021

This visualization shows a yellow circle centered on a 960 by 500 SVG canvas, flanked by two smaller black circles on either side. The large circle uses a yellow fill with a black stroke, while the smaller circles have no fill. The code directly defines the SVG elements using circle tags, with explicit pixel coordinates for cx and cy attributes and fixed radius values. This simple arrangement relies on basic SVG rendering without any JavaScript libraries or data sources.

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…

Hello

This example shows a large yellow circle centered on an SVG canvas, with a smaller unfilled circle positioned in the upper-left corner. The page uses inline SVG elements drawn directly in HTML, with the main circle’s yellow fill and black stroke defined via SVG attributes. The rendering is static, with no interaction or animation, and the visualization is styled to remove page margins and hide overflow. The code relies on basic SVG circle elements and CSS styling rather than any JavaScript libraries.

CChandan Satyanarayan
80% match
Loading thumbnail…

Circles

A single grey SVG canvas displays one yellow circle centered within a red-bordered frame. The circle is drawn using the SVG `<circle>` element with a green stroke and a radius of 200 pixels, positioned relative to the canvas width and height. The example demonstrates basic SVG shape rendering in a plain HTML page using CSS for styling and inline SVG markup, with no JavaScript libraries or frameworks involved.

AAlim Bolar
78% match
Loading thumbnail…

data Visualization start

This example shows a simple yellow circle with a black outline, accompanied by two smaller circles positioned inside it, rendered on a static SVG canvas. The code uses plain HTML, CSS, and JavaScript within an `index.html` file, with all shapes drawn directly using SVG `circle` elements. No external libraries or data sources are involved; the visualization relies solely on hardcoded coordinates and inline styling to achieve its minimal geometric composition. The setup demonstrates basic SVG rendering in a web browser without any interactive or dynamic behavior.

AArlindo
77% match
Loading thumbnail…

Fork of Hello HTML

This example displays a yellow circle with a black outline, centered on an SVG canvas, containing two smaller unfilled circles positioned to the left and right. The visualization uses raw SVG elements—specifically `<circle>` tags with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—embedded directly in an HTML page. The larger circle is positioned at the canvas center (480,250) with a radius of 245, while the smaller circles sit at (350,180) and (600,180) with radii of 50. No JavaScript libraries or data sources are involved; the rendering relies solely on static SVG markup within the HTML structure.

Nn7n305a
77% match
Loading thumbnail…

Untitled

This example shows a single large yellow circle centered on a black-outlined SVG canvas. The circle is drawn using raw SVG elements with fixed coordinates and styling, without any JavaScript or data binding. It demonstrates a minimal static graphic that relies on the `circle` element’s `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The page uses inline CSS to remove body margins and hide overflow, producing a clean, full-viewport presentation of the shape.

MMike Majzoub
76% match
Loading thumbnail…

Untitled

This example shows a nested set of concentric circles centered on a 550 by 550 SVG canvas, with the two largest circles filled in pale pink and thinner grey outlines marking the inner radii. The visualization uses only static SVG elements—specifically `circle` tags with explicit pixel coordinates—so no JavaScript libraries or data-binding frameworks are involved. The rendering approach relies on basic SVG attributes like `fill`, `stroke`, and `r` to create a simple radial hierarchy, suggesting a possible target for force-directed or layered layout experimentation, though no dynamic behavior is present.

AAdrSieber
76% match
Loading thumbnail…

Hello HTML!

This example shows two overlapping SVG circles centered on a 960×500 canvas, creating a target-like visual with a yellow outer ring and a red inner disc, each outlined in black. The circles are rendered using raw SVG elements defined directly in an HTML file, with styling applied through embedded CSS that sets the page margin to zero and hides overflow. The visualization relies solely on static SVG markup with explicit `cx`, `cy`, and `r` attributes, demonstrating fundamental vector graphics without any JavaScript or external libraries.

Bbeebeckzzz
76% match
Loading thumbnail…

Circle

The visualization shows a single large yellow circle with a thick black stroke, centered on a 960-by-500 SVG canvas. Rendered via React, it uses the `Circle` component to return an SVG `<circle>` element with fixed `cx`, `cy`, and `r` attributes. The code leverages React 17 and ReactDOM to mount the SVG into the DOM, with the circle’s fill and stroke properties defined directly in JSX. No data source is involved; the geometry is purely hardcoded.

33ssalunke
76% match