Skip to main content
SimilarExport ZIP
100%

interactions!

✓ Published1🌍 Public
Kkaviya-ds
Last edited Aug 16, 2020
Created on Aug 16, 2020

This interactive world map displays country boundaries using a natural Earth projection, with countries rendered in light green and hovering states highlighted in red. The visualization loads geographic data from the world-atlas TopoJSON dataset, merging it with a TSV file to map ISO numeric codes to country names for tooltips. Built with D3 v5, it uses `d3.geoPath` and `d3.geoNaturalEarth1` for projection and path generation, while `topojson.feature` converts the TopoJSON topology into GeoJSON features. The sphere background appears blue, with semi-transparent black strokes outlining each country.

AI-generated description
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…

Interaction

A D3.js visualization displays a world map using a natural Earth projection, with countries rendered as SVG paths colored in bright green against a dark sea. Hovering a country turns it red and reveals its name via a tooltip. The map is built with `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.zoom` for interactive panning and zooming, while `d3.tsv` and `d3.json` load country names and geometries. A `topojson` feature layer draws each country, and CSS handles hover styling.

MMatan
89% match
Loading thumbnail…

Map Interactions

This example displays an interactive world map using a natural Earth projection, with countries rendered as light green SVG paths that turn teal on hover. The visualization combines world-atlas TopoJSON data with a TSV file containing country names, which are added as native SVG `<title>` tooltips. The map supports pan and zoom through d3.zoom, while d3.geoPath and d3.geoNaturalEarth1 handle geographic projections. Hover effects use CSS pseudo-classes, and the map includes a blue sphere background for context.

Ggilbster
89% match
Loading thumbnail…

Interaction

A world map renders countries in light green with black outlines on a blue sphere, using D3 v5 with a geoNaturalEarth1 projection. Users hover over any country to highlight it pink, while clicking a specific country isolates that selection and removes highlights from others. The visualization loads geographic data from a TopoJSON world atlas and merges it with a TSV file for country names. Code employs d3.geoPath, d3.zoom for panning, and CSS classes to toggle the selected country’s fill color.

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

Map Interaction Assignment

This interactive map visualizes global country boundaries using a natural Earth projection, rendered as SVG paths within a zoomable viewport. The map shows the sphere as a blue background and individual countries in green, which turn red on hover, with country names displayed as tooltips. Built with D3 v5, the example uses `d3.geoNaturalEarth1`, `d3.geoPath`, and the `topojson` library’s `feature` function to process world atlas data loaded from TSV and JSON files. A zoom interaction, implemented via D3’s `zoom` event, transforms the map group, allowing users to explore the geographic data.

MMukund Khandelwal
88% match
Loading thumbnail…

World map

This interactive world map displays country boundaries using a natural Earth projection, with hover tooltips showing country names and zoom/pan controls for exploration. It loads geographic data from the world-atlas TopoJSON and TSV files, then renders countries with D3’s `geoPath` and `geoNaturalEarth1`. The visualization uses `d3.zoom` for interaction and `topojson.feature` to convert TopoJSON geometry, with hover effects styled via CSS.

NNikhil Prakash
88% match