Simple Flight Animation

100%

Simple Flight Animation

✓ Published0🌍 Public

Last edited Jan 4, 2020

Created on Jan 4, 2020

A simple flight animation shows a white airplane moving along a curved route between Shanghai, Tokyo, and Hawaii over a green world map set against a steel-blue ocean. The map renders from world-continents.json using `topojson.feature` and `d3.geoMercator` with `d3.geoPath`. The plane follows a LineString with a 2-second `transition.attrTween` that calculates positions via `getPointAtLength` along the SVG path. Black circles mark each city’s projected coordinates.

AI-generated description

forked from <a href='http://bl.ocks.org/AbnormalDistribution-2020/'>AbnormalDistribution-2020</a>'s block: <a href='http://bl.ocks.org/AbnormalDistribution-2020/8fe94852cbf22fa4eda865c29f555874'>Simple Flight Animation</a>

mit Licensed

Similar vizzes

Loading thumbnail…

From Hong Kong to Brussels

An animated globe highlights the journey from Hong Kong to Belgium, tracing a flight path between the two countries. It uses D3.js v4 and topojson to render land masses, graticule grids, and political borders on a canvas. The animation rotates the globe to a custom viewpoint and then simulates the plane’s travel along a great-circle arc, after which users can drag to spin the view, using `d3.geoOrthographic`, `d3.geoPath`, and a custom great-arc interpolator.

LLuisSevillano

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

74% match

Loading thumbnail…

Fork of Flight Map

This visualization presents a world map with animated flight paths between continents, using a Mercator projection created with `d3.geoMercator()`. The map is rendered as SVG paths via `d3.geoPath()`, with each intercontinental link colored differently and its stroke width proportional to monthly passenger counts. A slider allows users to select a month (1–12), updating the path widths accordingly from CSV data files. Hovering over a path reveals its exact value via a tooltip, and the map itself uses `d3.json()` to load world GeoJSON data. The code relies on D3 v4 APIs including `d3.select`, `d3.transition`, and `d3.event` for interaction, with styling applied through CSS.

RRudi Poepsel Lemaitre

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

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

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

69% match

Loading thumbnail…

Untitled

This example shows a dynamic globe where glowing arcs trace flight paths between cities across the world. It uses D3’s force simulation to position the nodes on the sphere and Canvas’s `getImageData` to render the points and curved paths. The visualization rotates the globe continuously via `d3.timer` while the arcs animate along their routes. The underlying geographic data is drawn with `d3.geoPath` and a Natural Earth projection, all rendered on a single `<canvas>` element.

SSathishAanand

69% match

Loading thumbnail…

simplified borders

A rotating orthographic globe displays country boundaries as simplified straight lines, reducing each border arc to a single segment between its first and last points via `topojson.meshes`. Landmasses render as dark fills with white graticules, while borders are colored blue for coastlines and other hues for shared boundaries. The animation uses `d3.timer` to update the projection rotation and `d3.geoPath` to redraw paths, sourcing geometry from a TopoJSON world dataset.

PPhilippe Rivière

68% match