Skip to main content
SimilarExport ZIP
100%

D3.js Map

✓ Published0🌍 Public
Ffloresh
Last edited Nov 6, 2020
Created on Sep 22, 2018

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3.js map - interactive

This interactive map displays world countries shaded in light green against a light blue sphere, with hover highlighting in red. Built with D3.js v7 and TopoJSON, it projects geographic data from the world-atlas countries-50m dataset using a natural Earth projection via d3.geoPath and d3.geoNaturalEarth1. Zoom functionality is handled by d3.zoom, which applies interactive transforms to the SVG group.

Ssheafallick
92% 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
92% 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
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map using a Natural Earth projection, with countries filled in light green that turn red on hover and a blue sphere backdrop. Built with D3 v5, it loads TopoJSON and TSV country metadata from the world-atlas package, then renders paths using d3.geoPath with the geoNaturalEarth1 projection. Pan and zoom controls are enabled via d3.zoom, applying transforms to the map’s group element, while tooltips display country names through SVG title elements.

Aanouckstbr@gmail.com
91% match
Loading thumbnail…

D3.js map

This visualization displays a flat, natural Earth projection map of world countries, rendered as a single SVG with light green landmasses and a light blue ocean sphere. It uses D3.js v7 (with `select`, `json`, `geoPath`, and `geoNaturalEarth1`) and TopoJSON’s `feature` method to load and convert country boundaries from the world-atlas dataset. The code appends paths for the sphere and each country, styling them via CSS, and runs entirely client-side in a bare HTML page.

Ssheafallick
91% match
Loading thumbnail…

Map D3.js HW

This interactive world map lets users click individual countries to select them, highlighting each in orange with a red stroke while displaying the country’s name in red text above the SVG. Clicking a selected country reverts its fill to light green, though the name label remains visible. The visualization uses D3 v5 and TopoJSON, rendering with `d3.geoPath` and the `geoNaturalEarth1` projection, with zoom support via `d3.zoom`. Country names come from a TSV file paired with the world-atlas TopoJSON dataset.

KKCachel
90% match
Loading thumbnail…

Let's make a map with D3.js

This example visualizes world countries as a natural Earth projection map, with landmasses rendered in light green against a dark blue spherical backdrop. Using D3 v5, it loads TopoJSON data from the world-atlas package and converts it to GeoJSON via topojson.feature, then draws each country with d3.geoPath and a d3.geoNaturalEarth1 projection. The map is rendered as SVG paths onto a fixed 960×500 canvas.

AAmar Nath Yogi
90% match
Loading thumbnail…

Map D3

This map shows the countries of the world on a natural Earth projection, with oceans in blue and landmasses in light green. The visualization uses `d3.geoNaturalEarth1` as the projection and `d3.geoPath` to generate the SVG paths for each country. It loads world boundary data from the world-atlas package in TopoJSON format, then converts it to GeoJSON using the `topojson` library’s `feature` function before rendering. The entire graphic is drawn as SVG elements.

Ppplomith
90% match