Gist efb1c9f3f0a9092c420dfe4cef8def96

100%

Gist efb1c9f3f0a9092c420dfe4cef8def96

✓ Published0🌍 Public

Last edited Feb 4, 2017

Created on Jan 25, 2017

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.

AI-generated description

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

81% match

Loading thumbnail…

USA AIRPORT

A map of USA airports displays each location as a gray circle with a two-letter abbreviation label, overlaid on a geographic projection of US states. The visualization uses D3 v5 with geoAlbers and geoPath for map rendering, while React components manage the SVG structure. Airport coordinates are loaded from a CSV file, and state boundaries come from a TopoJSON atlas. The map is complemented by a separate time-series histogram showing monthly totals of dead and missing individuals, built with D3's scaleTime, bin, and sum functions.

FFAN CHI YU(范紀予)

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

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

79% match

Loading thumbnail…

Major U.S. Destination Airports

This visualization maps major U.S. destination airports using a conic conformal projection rendered with d3.geoPath. Each flight destination appears as a semi-transparent red circle, with overlapping points creating darker regions that indicate higher flight density. State boundaries come from the U.S. Atlas TopoJSON, while flight data is loaded from a CSV containing latitude and longitude coordinates. The React application uses d3.geoAlbers with fitExtent to scale the map, and includes graticules and a sphere outline for geographic context.

JJosvin John

78% match

Loading thumbnail…

TopoJSON Points

This example maps a collection of airport locations across the United States using a TopoJSON MultiPoint geometry object. The airports are rendered as small dots over a gray landmass with white state boundaries, using an Albers projection. The code loads geographic base data from a separate US TopoJSON file and the airport points from a local TopoJSON file via the queue library, then draws everything with d3.geo.path and SVG paths.

Mmbostock

78% match

Loading thumbnail…

A Map for USA Airport

This map visualization displays the distribution of airports across the United States, with each circle representing an airport positioned by its latitude and longitude, colored by state, and showing the airport name on hover. Built with vega-lite-api, it uses the `vl.markCircle` method with latitude and longitude encoding streams to project the geographic data points. The code loads airport information from a CSV file using d3.csv, applies custom axis and label styling through a shared config object, and renders the final chart with vega and vega-lite in an SVG view.

XXinting Yao

77% match

Loading thumbnail…

Gist a76504adb7799e4c28c6d1558bd35ce3

This example displays a map of the United States using an Albers USA projection, rendering state boundaries as SVG paths. It loads geographic data from a local `us-states.json` file containing a FeatureCollection of state polygons. The code uses d3.json to fetch the data and d3.geo.path with a d3.geo.albersUsa projection to convert GeoJSON coordinates into screen paths. The visualization presents a simple, static outline map without additional data encoding or interaction.

AAurelink

77% match