Skip to main content
SimilarExport ZIP
100%

airport distance

✓ Published0🌍 Public
11wheel
Last edited Aug 21, 2016
Created on Aug 21, 2016

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.

AI-generated description

Data from http://ourairports.com/data/

Similar vizzes

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

Router

This visualization presents flight routing options between airports on an interactive map, with a side panel displaying a Gantt-style chart of the journey's timeline for each route. It highlights the two flight legs and layover durations for connections, such as from Atlanta to Cork. The map is rendered using the layered map component with WebGL, while the timeline uses the Column chart with time-based axes. The application dynamically loads airport data from a CSV file and uses the ESP connection API to fetch flight data, with a pre-canned demo fallback.

GGordonSmith
75% 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
75% 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
74% match
Loading thumbnail…

Flight Map

This visualization displays flight routes between continents on a world map, with the thickness of each line representing the volume of traffic for a selected month. A slider allows viewers to cycle through twelve months of data, which is stored in CSV files. The d3.geoMercator projection and d3.geoPath are used to render the map and the great-circle paths linking regions, while a transition animation (d3.transition) updates the view. Hovering over a route reveals its exact numeric value in a tooltip.

Iimsohandsome123
73% match
Loading thumbnail…

An interactive D3 map

This interactive map uses d3.geoPath and a geoAlbers projection to render a world map with animated circles marking airports. The visualization connects airports via arcs based on route data from routes.csv, and uses a Voronoi diagram overlay to partition the map. The animation uses d3 transitions with easing, while data is loaded from the d3.json, d3.csv, and world-atlas package.

Iinroadings
70% match
Loading thumbnail…

Gist efb1c9f3f0a9092c420dfe4cef8def96

This visualization displays a map of US airports, using a data-driven approach to plot the locations of each airport across the country. It shows the geographic distribution of airports using an Albers USA projection, with the map boundaries rendered as a shaded path. The code relies on the D3.js library, specifically `d3.geoAlbersUsa`, `d3.geoPath`, and `d3.json` for loading the TopoJSON map data and JSON airport coordinates. The final output is an SVG image, generated from these fetched datasets and projected onto a 960 by 500 pixel canvas.

PPhilippe Rivière
70% 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
70% match