Skip to main content
SimilarExport ZIP
100%

Graph to map

✓ Published1🌍 Public
Bbrett@cloudaccelerator.co
Last edited Apr 21, 2021
Created on Apr 19, 2021

This example visualizes a graph of airport connections layered over a map of the United States. It shows how nodes can be positioned geographically on a map or rearranged using a force-directed simulation, with a toggle button switching between the two modes. The code uses D3 v4’s `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` for layout, while `d3.geoPath` and `d3.geoAlbersUsa` project map features. Node positions come from longitude and latitude data in `data.json`, and the map uses `continental-us.json` GeoJSON features. Elastic transitions animate the shift between map and simulation layouts.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

An interactive map of U.S. airports shows nodes linked by flight routes. Users can toggle between a geographic layout, where airports are positioned by their longitude and latitude using the `d3.geoAlbersUsa` projection and `d3.geoPath` for state boundaries, and a force-directed layout. In the simulation mode, `d3.forceSimulation` with link, many-body charge, and center forces lets users drag nodes, with elastic transitions animating the repositioning. The visualization uses SVG elements for rendering and reads airport data from a JSON file.

Mmuzzheng
82% match
Loading thumbnail…

An interactive D3 map

An interactive D3 map visualizes U.S. airports and their flight routes, with arcs connecting a central hub to various destinations and animated circles marking each airport’s location. The map also displays country boundaries and a Voronoi diagram around airport cells, with hover tooltips revealing flight counts. Using d3.geoPath and geoAlbers projection, it renders SVG shapes from TopoJSON world data and CSV files, with circles animating via transition delays and ease functions.

Iinroadings
76% match
Loading thumbnail…

Network Graph

This network graph visualizes relationships among individuals and locations, with nodes labeled by names like "UNT" and connections indicating links between them. The interactive force-directed layout, built with d3.forceSimulation, incorporates link, many-body, collision, and center forces to position the nodes. The SVG renderingshowcases teal circles with direction arrows, while mouseover highlights a node using a CSS class. Data is loaded from a JSON file defining nodes and links, with colors assigned via a simple color scale.

SSravani93-creater
76% match
Loading thumbnail…

Force-Directed Graph

This example shows a force-directed graph of a small network with three nodes representing locations in Missouri and Illinois, connected by undirected links. The visualization uses D3’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute a layout, rendering nodes as steelblue circles and links as black lines in SVG. Data comes from a local `data.json` file fetched via `fetch()`, and the simulation updates node and link positions through a `"tick"` event. The page is built as a single HTML document with embedded CSS and JavaScript, run within the React starter environment on VizHub.

Ttkcj0912
76% match
Loading thumbnail…

Airports - Network

This example visualizes the flight route network for each airline from a CSV dataset, using a force-directed layout. Nodes represent individual airports, while lines depict the connections between them, colored in the airline’s signature maroon. The visualization is built with D3.js v5 and renders as an SVG. It employs `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position the nodes. The code also integrates `d3.ForceEdgeBundling` to bundle edges, reducing visual clutter in the dense network.

Aala-wahibi
76% match
Loading thumbnail…

Force-Graph

This interactive force-directed graph visualizes the network of game assets, with nodes representing individual files and links showing connections between them. The visualization uses a physics simulation to position nodes, balancing link forces, many-body repulsion, and centering forces. Built with d3.forceSimulation, d3.forceLink, and d3.forceManyBody, the SVG rendering updates each tick to reflect the evolving layout. Users can drag nodes, which temporarily reactivates the simulation to reposition the graph, with node colors assigned via a categorical color scheme.

LLo-ov
75% match
Loading thumbnail…

Force-Graph

This example shows a force-directed graph of four named nodes connected by weighted links, rendered as SVG within a React framework. The code uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while the simulation’s `tick` event updates node and link coordinates. Nodes are draggable via `d3.drag`, and links are colored using a `d3.scaleOrdinal` based on `d3.schemeCategory10`. Data is loaded from a local JSON file, and node labels are displayed as text elements.

RRafael Campos
75% match
Loading thumbnail…

Untitled

This example demonstrates a minimal interactive visualization built with React, combining a force-directed graph layout with geographic map projections. The code uses d3.forceSimulation to position nodes and d3.geoPath to render world map outlines, with data drawn from a static GeoJSON source. Users can explore the network by dragging nodes, while the map serves as a contextual backdrop. The implementation relies on React’s state management to update the visualization in response to interactions, showcasing a hybrid approach that integrates D3’s rendering capabilities within a React component lifecycle.

Aaditya-ux27
75% match