Skip to main content
100%

Force Layout from CSV

✓ Published0🌍 Public
Aalex-rind
Last edited Dec 2, 2017
Created on Dec 2, 2017

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.

AI-generated description

In response to a Stack Overflow question, How to convert to D3's JSON format?.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/2949937'>Force Layout from CSV</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Force-Directed Graph from Flow CSV

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.

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

Asylum total 2016

A treemap visualizes asylum applications by country in 2016, with the area of each rectangle proportional to the number of asylum seekers from that country. The visualization uses D3 v4 to recursively subdivide a 960×570 SVG canvas into rectangles, with color encoding different countries via a faded categorical color scale. Users can toggle between summing values by size, though the count mode is disabled. The animation and squarified treemap layout are rendered using SVG, with data loaded from a JSON file.

Aandrewwitherspoon
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
76% match
Loading thumbnail…

Untitled

This visualization displays a world map with asylum seeker data, highlighting the flow of refugees from various countries to Canada over time. Using D3 version 3, the map employs a geographic equirectangular projection with graticules, land boundaries, and a red arc connecting two specific locations. The code loads TopoJSON world data to render land masses and country borders, while the asylum data is loaded from an external CSV file. The visualization demonstrates how geographic and temporal asylum patterns can be represented through interactive map-based data visualization.

Aankita1mit
74% match
Loading thumbnail…

Force Layout Graph - National Contiguity

This example shows the national contiguity of countries using a force-directed graph where nodes represent individual countries and links indicate shared borders. The visualization loads geographic adjacency data from a GitHub-hosted JSON file, with each node rendered as a flag icon via the flag-icon-css CDN. Built with D3 v4, it uses `d3.forceSimulation` with link, charge, center, collide, and x/y positioning forces to arrange the nodes, while drag behavior lets users reposition them interactively. Hovering reveals a tooltip (via d3-tip) displaying the country name.

DDocwali777
73% 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
73% 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
72% match