Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a map with D3 (Tricks).js!

✓ Published1🌍 Public
BBKirst3
Last edited Mar 6, 2021
Created on Mar 6, 2021

This interactive map displays world countries using a natural Earth projection, rendered as SVG paths with green fill that turns red on hover. The visualization loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON features using `topojson.feature`. Users can pan and zoom the map through `d3.zoom`, with transformations applied to a group element containing the country paths. The map also includes a blue sphere outline drawn via `d3.geoPath` with the `geoNaturalEarth1` projection, and each country displays its name as a tooltip using SVG `title` elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a map with D3.js!

This map visualization displays world countries colored in light green on a blue sphere, with hover effects turning countries red. It uses D3 v5 and TopoJSON to load and render world geography from the world-atlas dataset. The code combines `d3.geoNaturalEarth1` for projection, `d3.geoPath` for drawing country boundaries, and `d3.zoom` for interactive panning and zooming. Country names are joined from a TSV file and shown as SVG `<title>` tooltips.

Ggharakhani1986
95% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example shows an interactive world map built with D3.js v5 and TopoJSON, displaying country boundaries with hover effects that highlight each nation in red. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and renders geographic features as SVG paths with `d3.geoPath`. Pan and zoom interactions are enabled through D3’s `zoom` behavior, transforming the map group on user input. Country names are loaded from a TSV file and matched to geographic IDs, with tooltips shown via SVG `<title>` elements. The code also leverages `d3-geo-projection` and world-atlas data.

Ggharakhani1986
94% match
Loading thumbnail…

Fork of Let's make a map with D3.js

This map visualizes the countries of the world using a natural Earth projection, with hover interactions highlighting individual nations in red. The code loads geographic data from the world-atlas package via D3’s `tsv` and `json` loaders, then joins country names to geometries. It uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to render SVG paths, and `d3.zoom` for pan/zoom interactions, while the topojson library converts TopoJSON features for display.

MMauradion
94% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This map visualization displays countries on a natural Earth projection, with oceans filled in blue and landmasses in light green with subtle black strokes. It draws a basemap from the World Atlas TopoJSON dataset using the `feature` method from Topojson, then renders the sphere and country boundaries with `d3.geoPath` and the `geoNaturalEarth1` projection. The code loads data asynchronously via `d3.json`, appends SVG paths, and styles the elements through CSS classes.

MMina Rezaei
94% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This interactive map uses D3.js v5 with the `geoNaturalEarth1` projection and `geoPath` to render world countries from the Natural Earth 110m dataset, fetched via the world-atlas package. Countries appear as light green regions with black strokes on a blue sphere, and hovering turns them red. A `title` element is appended to each country path, though the code assigns a generic "hello" label rather than country names. The SVG output is styled with CSS, and the topojson library handles feature extraction from the downloaded GeoJSON data.

HHojjat Karami
93% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This map shows the countries of the world rendered with a natural Earth projection, where landmasses appear in light green against a blue sphere. The visualization uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate SVG paths from TopoJSON data loaded via d3.json from the world-atlas dataset. Country boundaries are drawn with a subtle black stroke, while the underlying sphere provides an ocean-colored backdrop.

Bbugfree55
93% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a global map with countries filled in light green, using a natural Earth projection against a blue spherical backdrop. The map is built with D3.js v5 and the `d3.geoPath` and `d3.geoNaturalEarth1` APIs, with country boundaries rendered as SVG paths. The visualization also includes an interactive zoom feature that applies a transform to the SVG group via `d3.zoom()`. The data is sourced from the world-atlas package’s 110m GeoJSON file, converted to features with TopoJSON’s `feature` function.

Aayonghosh2003
93% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays world countries as light-green filled polygons on a blue sphere, using a natural Earth projection. It loads country boundaries from the World Atlas TopoJSON dataset and renders them as SVG paths via `d3.geoPath` and `d3.geoNaturalEarth1`. The visualization includes a background sphere path and applies thin black strokes with low opacity to country borders. The code relies on `d3.json` for data fetching and `topojson.feature` to convert TopoJSON to GeoJSON features.

BBRIAN JORAM WANDOBIRE
93% match