Skip to main content
100%

Force-Directed Graph from Flow CSV

✓ Published0🌍 Public
Aalex-rind
Last edited Dec 14, 2018
Created on Dec 14, 2018

This force-directed graph visualizes asylum flows between countries in 2016, based on a CSV dataset from UNHCR. Nodes represent countries of origin and asylum, while links show migration flows between them, with line width scaled to the flow volume using a square-root scale. The layout is computed by a physical simulation in D3 v4, where charged particles repel and springs attract connected nodes, causing related countries to cluster together. The network uses SVG circles and lines, with drag interaction to explore the graph. This example is a variant of Mike Bostock’s classic Les Misérables character co-occurrence visualization, adapted to read edge data from a CSV file and visualize asylum-seeker flows.

AI-generated description

This simple force-directed graph shows character co-occurence in Les Misérables. A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart. Layout algorithm inspired by Tim Dwyer and Thomas Jakobsen. Data based on character coappearence in Victor Hugo's Les Misérables, compiled by Donald Knuth.

Compare this display to a force layout with curved links, a force layout with fisheye distortion and a matrix diagram.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4062045'>Force-Directed Graph from Flow CSV</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Force Layout from CSV

A force-directed graph visualizing asylum-seeker flows in 2016, with nodes representing countries and links representing asylum applications between them. The visualization uses D3's force layout to position nodes and draw edges, with data loaded from a CSV file containing origin and destination countries. The graph is rendered as an SVG with lines for links and circles for nodes, and the force-directed layout distributes the nodes based on the connections between countries. Data is sourced from UNHCR population statistics, showing asylum-seeker movements between countries of origin and countries of asylum/residence.

Aalex-rind
91% match
Loading thumbnail…

D3 in Action Adjacency Matrix

This example visualizes asylum-seeker flows between countries as a directed adjacency matrix, with source countries on the y-axis and destinations on the x-axis. The grid encodes the weight of each flow through the opacity of red squares, and hovering over a cell highlights the corresponding row and column. It loads node and edge data from CSV files using the queue library, then builds the matrix with d3.csv and renders it as SVG rectangles. Axis labels are added with d3.svg.axis, while d3.scale.ordinal positions the country names along both dimensions.

Aalex-rind
80% match
Loading thumbnail…

Refugees Streamgraph

A streamgraph visualizes the total number of persons of concern to UNHCR from 1951 to 2016, grouped by country of asylum or residence and excluding countries with low cumulative counts. The chart uses a wiggle offset and inside-out ordering via `d3.stack` to create the layered flows, with area shapes rendered as SVG paths using `d3.area` and a basis curve. Hovering highlights a country by turning its path black. Data originates from UNHCR’s time series CSV and is preprocessed with `d3.nest`.

CCurran Kelleher
76% match
Loading thumbnail…

Arc Generator

This visualization displays asylum-seeking flows between countries on a world map using curved arcs that connect country centroids. When hovering over a country, arcs appear linking it to several pre-selected destinations, though the data shown represents a small sample rather than the full asylum.json dataset. The visualization uses an SVG rendering approach with D3 v5's geoNaturalEarth1 projection and geoPath to draw country boundaries, while custom arc-generating logic creates the connecting paths. The style.css file defines the map aesthetics, including light green country fills and red arcs.

Aankita1mit
75% match
Loading thumbnail…

Refugees Streamgraph

This streamgraph visualizes the total number of persons of concern to UNHCR, grouped by country of origin, using a flowing, layered area chart. The data spans multiple years and is filtered to exclude countries with relatively low counts. Rendered in SVG with D3 v4, the chart uses a wiggle offset to create the signature streamgraph silhouette, with each country’s contribution represented as a colored layer. Labels are positioned using d3-area-label, and hovering highlights individual streams by turning them black. The visualization relies on interpolated yearly values and a custom stack layout to show change over time for over 1 million persons of concern per country.

PPatrick Wojda
74% match
Loading thumbnail…

V4 Immigrants flow map between countries

This map visualizes immigrant flows between countries in 2020 using an interactive world map. Users can click a country to highlight it as the origin and display bundled curved paths projecting to all destination nations, with stroke opacity indicating connection strength. The visualization uses D3 v5's `geoNaturalEarth1` and `geoPath` for map rendering, `d3.ForceEdgeBundling` for curve grouping, and a `scaleSequential` color scale based on migration numbers. Country boundaries derive from TopoJSON world-atlas data, while migration statistics come from a CSV gist.

Sserjunfan
74% match
Loading thumbnail…

Fork of of V6 Immigrants flow map between countries

This interactive map visualizes global immigration flows to and from selected countries in 2020. Clicking a highlighted country filters and displays bundled migration paths, rendered as curved lines, from that origin to destinations worldwide, with a bar chart below ranking the top 20 destination countries by immigrant count. The visualization uses React with D3 v5, employing `d3.geoNaturalEarth1` and `d3.geoPath` for the map, `d3.ForceEdgeBundling` for flow aggregation, and `d3.scaleBand` with `d3.scaleSqrt` for the bar chart, drawing data from a CSV file.

Sserjunfan
74% match
Loading thumbnail…

Fork of Fork of Fork of V3 Immigrants flow map between countries

This interactive map visualizes global immigration flows to and from selected countries using edge-bundled lines rendered with SVG. Clicking a country highlights it in red and filters the displayed migration paths to only that origin country, with line opacity and width encoding the 2020 immigrant counts. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for the world map, d3.ForceEdgeBundling for bundling the flow lines, and d3.scaleSequential with d3.interpolateBlues for color encoding. Data comes from CSV files loaded via d3.csv, with country coordinates matched from a supplementary coordinate dataset.

Sserjunfan
73% match