Skip to main content
SimilarExport ZIP
100%

Interactive Map

✓ Published1🌍 Public
Ccornshoots
Last edited Mar 22, 2021
Created on Mar 16, 2021
Forked from Lets make a map

This interactive map displays country boundaries from the world-atlas TopoJSON dataset, rendered as SVG paths using d3.geoPath and an equirectangular projection. Hovering over a country highlights it in blue via CSS, while d3.zoom enables pan and zoom transforms on the map group. Country names from the accompanying TSV file appear as tooltips through SVG title elements, all loaded asynchronously with d3.json and d3.tsv.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive World Map

This interactive world map displays country boundaries colored in green on a blue sphere, with hover states turning countries orange. The visualization uses D3 v5 and TopoJSON to load world atlas data from unpkg, combining geographic TSV metadata with 50m JSON topology. It renders through an SVG path generator with a natural Earth projection, while d3.zoom enables pan-and-zoom interaction. Country names appear as tooltips via appended title elements, and the map resizes to fill the browser viewport.

OOskar Weinfurtner
90% match
Loading thumbnail…

Interactive Map

This interactive map displays world countries on a natural Earth projection, rendered as SVG paths using d3-geo’s `geoNaturalEarth1` and `geoPath`. It loads geographic data from the World Atlas TopoJSON and matches country names via TSV metadata. Users can pan and zoom using d3.zoom, which applies a transform to the map group. Countries are styled with silver fills and turn orange on hover via CSS.

FFhouston17
89% match
Loading thumbnail…

Interactive World Map

This interactive map renders world countries as SVG paths using D3.js version 5 and the topojson library to convert TopoJSON to GeoJSON features. The map uses a D3 geoEqualEarth projection with geoPath, and supports zooming via d3’s zoom event, which applies a transform to the map group. Country names are joined from a TSV file using ISO numeric codes, and hovering fills a country in red.

NNaveenaS12
88% match
Loading thumbnail…

Interactive Tricks

This interactive map displays world countries using a natural Earth projection, with hover effects that change country colors to pink and tooltips showing country names. The visualization supports zooming and panning through d3.zoom, applied to the SVG group containing all geographic paths. It uses d3.geoPath with geoNaturalEarth1 projection, loads TopoJSON data from world-atlas, and merges country names from TSV data using reduce. The code leverages D3 v5 selection, JSON, TSV, and zoom APIs, rendering geographic features as SVG paths with CSS styling for interactivity.

Llrakla
88% 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
88% match
Loading thumbnail…

Interactive maps

This interactive map displays world countries using a natural Earth projection, with hover states that highlight individual nations in red. The visualization loads geographic data from a world-atlas TopoJSON file and renders it as SVG paths, with country names appearing as tooltips. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `d3.zoom` for panning and zooming. The map also includes a dark blue sphere background, while CSS styles control the country and hover fill colors.

Ddaanasma
87% match
Loading thumbnail…

world map interaction

This example presents an interactive world map built with D3.js v5, displaying country boundaries and names sourced from the world-atlas TopoJSON dataset. Users can zoom and pan the map using d3.zoom, with the transform applied to a group element. Countries are rendered as SVG paths via d3.geoPath and a natural Earth projection, with tooltips showing country names from the TSV file. Hovering highlights countries in red, while the ocean sphere uses a blue fill.

Ppei9223
87% match
Loading thumbnail…

Interactive map with D3.js

This interactive map visualizes world countries using a natural Earth projection, with hover highlighting and zoom-and-pan navigation. The D3.js code loads GeoJSON country boundaries from a TopoJSON dataset via `d3.json` and `topojson.feature`, then renders them as SVG paths with `d3.geoPath`. A blue sphere path represents the globe’s outline. The `d3.zoom` API enables user interaction by applying transform events to the SVG group, while CSS `:hover` styles change country fills to red.

MMartin Christensen
87% match