100%

An interactive D3 map

✓ Published0🌍 Public

Last edited Mar 25, 2020

Created on Mar 25, 2020

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.

AI-generated description

Creating an interactive map with data in d3

This example will show how to load data into d3 to create a worldmap

Inspiration

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

92% match

Loading thumbnail…

An interactive D3 map

This interactive map visualizes a world map with airports and flight routes, highlighting connections from Bozeman (BZN) to major hubs. It uses d3.geoPath with a geoAlbers projection to render country boundaries, airport points, and Voronoi cells. Airports bounce into view with d3 transitions, while flight arcs are drawn as MultiLineStrings. Data comes from CSV files and the world-atlas TopoJSON, with svg elements and animation for interactivity.

AAlan McConchie

84% match

Loading thumbnail…

Voronoi Arc Map

A Voronoi arc map displays flight routes between US airports overlaid on a geographic map. Each airport is assigned a Voronoi cell, and hovering over a cell highlights all flight arcs originating from that airport in red. The visualization uses D3 v4 with `d3.geoPath`, `d3.geoAlbers`, and `d3.voronoi`, rendering SVG elements. Flight data comes from airports.csv and flights.csv, with the map drawn from TopoJSON data.

Mmbostock

78% 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

78% match

Loading thumbnail…

World Airports Voronoi recreated

A world map rendered as an orthographic projection shows Voronoi cells computed from airport locations, with each cell colored distinctly and linked by dashed lines between neighboring airports. The visualization recreates Jason Davies’s classic demo using d3.geoVoronoi to generate the polygons and links from a CSV of airport coordinates, while d3.geoPath projects the spherical geometry. Country outlines from a TopoJSON file appear beneath the cells, and the sphere is shaded with a radial gradient for a three-dimensional effect.

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

77% match

Loading thumbnail…

An interactive D3 map

This interactive D3 map displays a world map with countries colored pink and overlaid with green-bordered circles, visualizing numerical values from a CSV dataset via a color-coded choropleth. Built with React and D3 v5, it loads GeoJSON topology data from the world-atlas package and uses topojson’s feature and mesh functions to render land and country boundaries as SVG paths, while the data CSV is joined by ISO country codes for the visual encoding.

Nnouralkhoury

76% match

Loading thumbnail…

Gist f7dc00e0350f215e21d1d7b3f9ee6aca

This example presents an interactive geographic visualization of a world map, with animated flight paths connecting major cities. It shows a network of arcing routes overlaid on a dark, stylized globe. The visualization uses the D3.js library, specifically calling `d3.geoPath` to render the map’s landmasses and `d3.forceSimulation` to manage the physics of the flight arcs, making them appear as if they are in motion. The routes are likely generated from a small set of hardcoded city coordinate pairs. The rendering approach combines a simple geographic projection with dynamic path interpolation for the animated trajectory effects.

LLuisSevillano

76% match