Fork of Flight Map

100%

Fork of Flight Map

✓ Published0🌍 Public

Last edited Jul 4, 2021

Created on Jul 4, 2021

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

88% match

Loading thumbnail…

Flight Map

This interactive visualization shows the flow of travelers between five global regions across a 12-month period. The main map uses a Mercator projection with curved paths connecting regions, where stroke width represents the volume of travel, and hovering reveals exact numbers. A range slider allows selection of individual months. The visualization also includes a stacked area chart depicting time-series data for these regions. The code uses `d3.geoPath`, `d3.geoMercator`, `d3.scaleOrdinal`, and `d3.stack` within a React framework, rendering via SVG with animation.

Ttim310579

85% match

Loading thumbnail…

Fork of World Map

This interactive map visualizes world countries using the Orthographic and Mercator projections, rendered as SVG paths. Users can drag to rotate the globe and click countries to switch between projections, with the United States uniquely triggering the Mercator view. The visualization uses `d3.geoPath`, `d3.geoGraticule`, and `d3.drag` for interaction, loading country boundaries from `world-atlas` JSON and names from TSV data. Hovering highlights countries, and a zoom API adjusts the SVG group’s transform.

Bbindhureddy98

80% match

Loading thumbnail…

Fork of Fork of Polished World Map

This visualization displays a world map using a custom Interrupted Boggs projection, rendered as SVG paths within a React application. It shows landmasses in teal, graticules in light gray, and a subtle sphere outline, with country interiors highlighted in a brighter cyan. The map uses data from the World Atlas TopoJSON, processed through `d3.geoPath` and `topojson.feature` and `topojson.mesh` to generate land polygons and country interior boundaries. Styling is applied via CSS classes, and the visualization loads asynchronously, displaying a large "Loading..." message until the data is ready.

Wwakgari

78% match

Loading thumbnail…

Fork of HTML Starter

This visualization shows a world map with countries colored by population using a threshold scale, rendered as SVG paths via `d3.geoPath` with a Mercator projection. The choropleth uses a quantized color range from light to dark blue, and hover interactions trigger tooltips built with `d3-tip`, displaying each country’s name and population. Data comes from a TopoJSON file and a TSV of population figures, both loaded asynchronously with the queue library.

Ddaniel

78% match

Loading thumbnail…

Fork of Choropleth Map

A choropleth map colors countries by their flight data from a TSV file, with a color legend and tooltip showing total flights, trip type, and aircraft. Using D3 v5 with `geoNaturalEarth1` projection and `geoPath`, it renders the world as SVG paths from TopoJSON. The map supports zoom via `zoom` and uses `scaleOrdinal` with `schemeRdBu` for color encoding. Hover events trigger a custom tooltip div, and `colorLegend` draws circles and text labels.

Ggcappadaniel

78% match

Loading thumbnail…

Fork of World Map

This visualization displays a world map with country boundaries and graticules, rendered as SVG paths. The map uses a natural Earth projection via `geoNaturalEarth1` and `geoPath` from D3 v5, with land areas filled in orange against a black sphere backdrop. It loads geographic data from World Atlas TopoJSON and processes it with `topojson.feature` and `topojson.mesh` to extract land polygons and interior borders between countries, which are stroked in light blue. The React components encapsulate the data-loading hook and mark-rendering logic.

Bbhargavarathod

78% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This map visualization displays world countries as filled green regions on a blue sphere, rendered entirely with SVG. It loads geographic data from the World Atlas TopoJSON file using `topojson.feature` to extract country boundaries, then projects them with a Mercator projection via `d3.geoMercator` and `d3.geoPath`. The code appends a sphere outline path and draws each country as a separate `path` element, with styling applied through CSS classes for fill and stroke.

Xxyang3672

78% match