zoom in/out and drag

100%

zoom in/out and drag

✓ Published1🌍 Public

Last edited Oct 20, 2020

Created on Oct 13, 2020

This interactive world map visualizes the number of space launches at each location, with circle radius scaled by launch count. Users can drag to pan and zoom the map freely, while hovering over a circle reveals its exact launch count and location. Built with React and d3.v5, the visualization loads world topology data from a JSON file and launch statistics from a CSV source. It uses d3's `geoNaturalEarth1` projection, `geoPath` for map rendering, `scaleSqrt` for circle sizing, and a custom zoom interaction that transforms the SVG element. The map displays landmasses, graticules, and interiors as separate styled paths.

AI-generated description

The data shown here comes from Privatization of Space.

This visualization plots all the launch places on the world map, the radius of the circle is the number of launches at that exact spot. This map can also be dragged and zoom in/out. It also includes a tooltip.

I used some code in my old Zoom in/out and drag project.(I also fixed the overflow issue on that project as well)

Future changes: Some circles overshadows others therefore this needs to be changed. Plus I'm thinking of adding more to this.

MIT Licensed

Similar vizzes

Loading thumbnail…

zoom in/out and reverse triangle

This visualization maps launch sites as green triangles on a world map, with triangle height encoding the number of launches at each location. Users can drag and zoom the map, and hover over a triangle to see the exact launch count and place. Built with React and d3, it uses `d3.geoNaturalEarth1` for the projection, `d3.geoPath` for rendering the world and graticules, and a custom zoom interaction. The data comes from a CSV of launch records, and the map layers are derived from the world-atlas TopoJSON source.

TTaylor

85% match

Loading thumbnail…

try

This visualization combines a world map with data on space launches, using scaled triangles to represent the number of launches at each location. The geoNaturalEarth1 projection and geoPath render country boundaries and graticules, while d3.scaleLinear sizes the triangular markers based on launch counts. Built with React and D3 v5, the map supports zooming via d3.zoom and highlights selected countries on click, with a tooltip showing launch count and location. The data comes from a CSV about privatization of space, with country names joined from world-atlas TSV data.

TTaylor

84% match

Loading thumbnail…

Zoom Interation World Map

This interactive world map allows users to pan and zoom by dragging or using the scroll wheel, with the view transform applied to a group element containing all marks. The visualization renders graticules, country boundaries, and interior borders using d3.geoPath with the natural Earth projection, plus two static city points connected by a red line. Data is sourced from the `world-atlas` TopoJSON and a world cities CSV, with zoom handling implemented through D3's `zoom` behavior within a React component.

Ppsabela

83% match

Loading thumbnail…

zoom in/out, reverse triangle,tooltip country name

This visualization maps global launch sites, representing the number of launches at each location with an inverted triangular marker. The marker’s height encodes the launch count via a linear scale, while the world map and graticule are rendered using d3.geoPath with a d3.geoNaturalEarth1 projection. Users can zoom and pan the SVG using d3.zoom, and hover over countries to reveal their names or over triangles to see tooltips with launch counts and location details. The map data comes from a TopoJSON world atlas, with launch data loaded via d3.csv.

TTaylor

82% match

Loading thumbnail…

Interactive world map

This interactive world map displays country boundaries with hover highlighting and zoom/pan capabilities. Built with React and D3 v5, the visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render SVG paths from TopoJSON data in the world-atlas package. A zoom behavior enables interactive transformations, while country names from a TSV file appear as tooltips via SVG `title` elements. The map fills countries in green and the ocean sphere in blue, with hover states turning countries red.

Eevapavlinek

80% match

Loading thumbnail…

points

This visualization maps the global distribution of space launches, with circles sized by the number of launches at each location. It uses a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with graticules and country borders from the world-atlas TopoJSON dataset. The data comes from a CSV of privatization of space launches. React manages the component structure, while `d3.scaleSqrt` maps launch counts to circle radii, and SVG `<title>` elements provide hover tooltips.

TTaylor

80% match

Loading thumbnail…

try2

This interactive map visualizes global space launch data, showing the locations of rocket launches as green triangular markers overlaid on a world map. Users can zoom, pan, and click on countries to select them, which dims non-selected regions and highlights the chosen nation. The map is rendered using SVG with D3’s geographic projections and React for interactivity, while country selection logic and tooltips are implemented via D3 event handlers. Data is sourced from a CSV file containing launch locations and counts, combined with world atlas shapefiles.

TTaylor

80% match

Loading thumbnail…

Map Interaction with D3.js

This example shows an interactive world map with zoom and pan capabilities, where hovering over a country highlights it in red. Built with React and rendered as SVG, it uses D3.js v5 with `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw countries from TopoJSON data. A `d3.zoom` handler transforms the map group on user interactions, while `d3.tsv` loads country names from a World Atlas TSV file to populate tooltips. The map features a steel-blue ocean sphere and light-green landmasses.

NNoor-SC

79% match