Skip to main content
SimilarExport ZIP
100%

Start WorldMap

✓ Published0🌍 Public
BBart van Pelt
Last edited Jan 24, 2023
Created on Jan 23, 2023

A world map rendered with `d3.geoMercator` displays country boundaries from a TopoJSON file. Red circular markers and city name labels are projected onto the map from a `cities.csv` dataset, with each marker linking to a Google search for its city. The map supports interactive pan and zoom through `d3.zoom`, applying the zoom transform to all paths, circles, and text elements. The SVG visualization uses `d3.json`, `d3.csv`, `d3.geoPath`, and the TopoJSON `feature` method to convert the topology into geographic features.

AI-generated description

Javascript and tooling from https://www.youtube.com/watch?v=xkBheRZTkaw starting at 6:55 - 8:04

  • npm is company and package manager
  • npm is commandline tool
  • yarn is alternative for npm (package manager) using npm packages
  • rollup is module bundler. Alternatives webpack / parcel

package manager repository tool

module manager uses local packages

Guidelines (un)named exports

  • Default exports give other name to imports. This can be confusing.
  • Best practice always use named exports.

Refs

MIT Licensed

Similar vizzes

Loading thumbnail…

World map with zoom / pan and cities

This example presents a world map rendered with SVG, featuring zoom and pan controls. It overlays red circular markers on select global cities, which are loaded from a CSV file and positioned using the Mercator projection via `d3.geo.mercator()`. Each city marker is hyperlinked to a Google search for its name. The map’s geography is drawn from a TopoJSON file, with paths generated through `d3.geo.path()`, while zooming and panning are handled by `d3.behavior.zoom()`.

Dd3noob
86% match
Loading thumbnail…

StartOfMap

This example displays a world map using the equirectangular projection, with countries rendered as dark red polygons outlined in black against a light blue ocean sphere. The visualization uses d3.geoPath and d3.geoEquirectangular to project geographic data, while topojson.feature converts the TopoJSON from the world-atlas countries-110m dataset into GeoJSON features. Each country path is appended dynamically to an SVG container as the data loads asynchronously via d3.json.

Bbideckerz
84% match
Loading thumbnail…

worldmap

This example displays an interactive world map with countries rendered as individual SVG paths, colored light green with black outlines, and highlighted in red on hover. It uses D3 v5's `geoNaturalEarth1` projection with `geoPath` to draw the map, and a light blue sphere for the oceans. Country boundaries come from the `world-atlas` package's countries-50m GeoJSON data, and the `topojson-client` library converts TopoJSON to GeoJSON for feature extraction. The chart supports zooming via D3's `zoom` event, which updates the SVG group transform in real-time.

Hhxc20060903
84% match
Loading thumbnail…

Let's make a map

This example displays an interactive world map rendered as SVG, with countries shaded in light gray and oceans in steel blue. The visualization uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to draw geographic boundaries from TopoJSON data supplied by the world-atlas package. Country names are loaded from a TSV file and shown as tooltips using SVG `<title>` elements. The map supports pan and zoom through `d3.zoom`, which applies an SVG transform to the grouped map elements on interaction.

Bbambaleq
84% match
Loading thumbnail…

World Map with Cities

A world map displays country boundaries and city locations as semi-transparent dots, projected using an equirectangular projection. The visualization renders landmasses in light blue, overlays graticules, and highlights interior borders. It uses `d3.geoPath` with `geoEquirectangular` and `geoGraticule` to draw the map, while city data from a CSV file is plotted via SVG circles. The code loads World Atlas TopoJSON and processes it with `feature` and `mesh` from TopoJSON.

Ssmile2git
83% match
Loading thumbnail…

let's make a world map

This interactive map renders world countries as SVG paths using a Mercator projection. The visualization loads country boundaries from a world-atlas GeoJSON/TopoJSON dataset and draws them server-side with D3’s `geoPath` and `geoMercator`. The code employs `topojson.feature` to convert topological data into geometric features, then appends each path to the SVG canvas.

KKRITIKA RAI DWIVEDI
83% match
Loading thumbnail…

World Map with D3 Final

This interactive world map displays country boundaries as selectable SVG paths over a blue sphere, with hover highlighting in red. The visualization uses D3’s `geoPath` and `geoNaturalEarth1` projection to render geographic features, while the `topojson` library’s `feature` function processes TopoJSON data from the world-atlas package. Country names are loaded from a TSV file and mapped to each path’s `id`. A zoom control, implemented via D3’s `zoom` event, adjusts the SVG transform. Data sources include the 50m world-atlas TSV and JSON files.

CChawin Sungwalngern
83% match
Loading thumbnail…

World Map

This example displays an interactive world map using a natural Earth projection, with countries rendered as filled paths that highlight red on hover. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, joining country names via ISO codes. It uses d3.geoPath with geoNaturalEarth1 for projection, d3.zoom for pan and zoom interactions, and TopoJSON’s feature method to convert topology to GeoJSON. The SVG sphere appears blue, while countries are light green with black strokes.

CChinzorigt Ganbat
83% match