Skip to main content
SimilarExport ZIP
100%

atlas

✓ Published1🌍 Public
Zzenoe
Last edited Oct 5, 2021
Created on Oct 4, 2021

This visualization displays world countries on a natural Earth projection, with each country filled in light green and highlighted in red on hover. The map supports zooming and panning through d3.zoom, with the sphere background rendered in blue. Using D3 v5 and topojson, the code loads geographic data from the world-atlas package, converts TopoJSON to GeoJSON features, and projects them with d3.geoNaturalEarth1 and d3.geoPath. Country names from the TSV file are linked to each path via a tooltip title element.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

World test

This visualization displays a world map with countries colored light green against a blue sphere, using natural Earth projection. Hovering over a country turns it red, and users can zoom and pan the map interactively. The code loads TopoJSON and TSV data from the world-atlas package, converting TopoJSON to GeoJSON via topojson.feature and rendering paths with d3.geoPath. Zoom behavior comes from d3.zoom, while country names are joined from the TSV file and shown as SVG title tooltips.

OOldenkamp
89% match
Loading thumbnail…

d3 Visualization Map

This example displays a zoomable world map using a natural Earth projection, with countries colored light green and the ocean rendered as a blue sphere. Built with D3 v5 and TopoJSON, it loads country boundaries from the world-atlas dataset (50m.json) and names from 50m.tsv. The map supports interactive pan and zoom via d3.zoom, while d3.geoPath and geoNaturalEarth1 handle geographic rendering. Countries highlight red on hover, with tooltips showing country names. The visualization is rendered as SVG, with the sphere and country paths generated from the projected GeoJSON features.

JJohnPaulPagelerJr
88% match
Loading thumbnail…

D3.js Map

This map visualization displays world countries on a natural Earth projection, allowing users to click individual countries to toggle their fill between light green and red. Built with D3.js v5 and TopoJSON, it loads geographic data from the world-atlas package and country names from a TSV file. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for rendering, with d3.zoom enabling pan and zoom interactions on the SVG canvas.

Ffloresh
88% match
Loading thumbnail…

World Map

This map visualizes country borders using a natural Earth projection, with country names displayed as tooltips on hover. The visualization uses D3 v5’s `d3.geoPath` and `geoNaturalEarth1` for geographic projection, while TopoJSON’s `feature` method extracts country geometries from world-atlas data. Countries are rendered as SVG paths styled with CSS. The map supports zooming and panning through D3’s `zoom` behavior, which applies a transform to all country shapes. The data comes from the world-atlas TopoJSON and TSV files, which provide geometry and country names.

Iimmanentdomain
88% match
Loading thumbnail…

Map with D3.js

This map visualization displays world countries on a natural Earth projection using D3.js and TopoJSON data from the world-atlas dataset. It renders an SVG sphere background and country paths filled with teal, which turn red on hover through CSS. The code employs D3 v6 features like `geoNaturalEarth1` and `geoPath` to project geographic coordinates, while `topojson.feature` extracts country boundaries from the loaded TopoJSON file. A tooltip showing each country’s name appears via appended `title` elements.

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

World Atlas

This visualization displays a world map with countries rendered in bright green against a blue ocean, using a natural Earth projection. The code leverages D3’s `geoPath` and `geoNaturalEarth1` to project geographic data, while TopoJSON’s `feature` function extracts country boundaries from a world-atlas JSON file. The SVG paths are styled with CSS for fill and stroke, and the sphere background is drawn first.

RRohith Reddy
87% match
Loading thumbnail…

World Atlas

This example displays a world map using a natural Earth projection, with countries rendered as individual SVG paths. The visualization loads geospatial data from a world-atlas TopoJSON file and converts it to GeoJSON features. It uses `d3.geoPath` with `geoNaturalEarth1` for projection, and `topojson.feature` to extract country boundaries, with a light blue sphere background and tan country shapes.

Ttarungunda
87% match