Skip to main content
SimilarExport ZIP
100%

Airports - Network

✓ Published2🌍 Public
Aala-wahibi
Last edited Sep 18, 2020
Created on Mar 11, 2020
Forked from Airports!

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

FDEB - Network

This network visualization displays flight routes for a selected airline using a force-directed edge bundling technique to reveal patterns in the data. The SVG rendering shows circles representing airports positioned by a physics simulation, with curved paths connecting origins and destinations. The example uses d3.forceSimulation for the layout, d3.ForceEdgeBundling to group similar routes, and d3.drag for interactive node manipulation. Data is loaded from a CSV file containing airline flight information, grouped by airline ID to create separate node-link diagrams for each carrier.

Aala-wahibi
84% match
Loading thumbnail…

Airports!

The visualization shows the number of flight routes per airline as a horizontal bar chart, ranked by route count. Hovering over a bar highlights that airline and displays its flight routes on a world map using `d3.geoNaturalEarth1` projection with `d3.geoPath` for geographic rendering. The map draws airport connections as lines based on route data from the CSV file, while the bar chart uses `d3.scaleBand` and `d3.scaleLinear` for axes. The map background is rendered from GeoJSON country boundaries.

Aala-wahibi
82% match
Loading thumbnail…

FDEB US Airline Routes Example

This example visualizes the network of US airline routes, using edge bundling to reveal patterns in the connectivity between airports. The map shows a dark background with thin red lines representing flight paths bundled together, while yellow dots mark the airports. The code loads airport and route data from an XML file, and applies the d3-ForceEdgeBundling algorithm to cluster similar edges. The visualization is rendered in SVG using d3 v4, with d3.line to draw the bundled paths and d3.scaleLinear to project coordinates.

PPhilippe Rivière
77% match
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
76% match
Loading thumbnail…

Graph to map

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.

Bbrett@cloudaccelerator.co
76% match
Loading thumbnail…

airport distance

The visualization maps flight routes between airports, with lines sized and colored by distance, showing the global air travel network. It uses a WebGL-rendered globe or map to plot the paths, and the distance between airports is encoded by the length and opacity of each arc, with shorter routes appearing brighter and thicker. The visualization is built with D3 v3 and Vue, using both SVG and WebGL for rendering, and is based on airport data from OurAirports.

11wheel
75% match
Loading thumbnail…

Flight Paths using Edge Bundling

This visualization shows flight paths between US airports using edge bundling, with a basemap of the continental United States rendered as projected SVG paths. Airport positions are marked with scaled circles, and a Voronoi diagram enables interactive highlighting of individual airports. The code uses d3.json, d3.csv, and Promise.all to load topojson map data and CSV flight/airport datasets, then filters and sorts the data to display the top 50 airports. d3.geoPath, d3.geoAlbers, and d3.scaleSqrt are used for map projection, path generation, and bubble sizing.

HHassan Abdullah
75% match
Loading thumbnail…

NYC programming project

This example pairs two SVG charts to explore airline routes in the New York City area. The left panel displays a force-directed network of airlines, while the right panel shows a geographic map of airports. The code uses d3.forceSimulation for the network layout and d3.geoPath for the map projection, with data drawn from a local source. A flexbox layout positions the views side by side, and CSS borders highlight the SVG canvases.

DDasbach.EJ
74% match