Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Mmuzzheng
Last edited Mar 27, 2021
Created on Mar 27, 2021
Forked from Hello VizHub

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.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

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

Untitled

This visualization presents a map of US flight data, using a geospatial view to show airport locations and their connectivity. It displays two modes, “Busiest_Airports” and “All_Airports,” with interactive selections to explore different aspects of departures, arrivals, and delays. The map is rendered using D3 v3 with a `d3.geo.albersUsa` projection and `topojson` for state boundaries, while circles on the map represent individual airports. Additional bar charts and a custom legend (`d3.legend.js`) show delay statistics, and the visualization animates transitions when filters change. Data is sourced from RITA (Bureau of Transportation Statistics) for flights from 1987 to 2008.

Yyimingg7
82% 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
82% 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
77% 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…

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
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…

Untitled

This interactive network visualization shows a force-directed graph with labeled nodes and directed links. The graph is loaded from a remote JSON file and rendered using SVG. The visualization uses the D3.js force simulation API, specifically `d3.forceSimulation()` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, to position nodes. Users can drag nodes, which restarts the simulation. Link labels are rotated to stay upright, and arrowheads mark link direction. The code relies on `d3.selection` extensions for event handling.

Jjuanmy400
75% match