Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Ggharakhani1986
Last edited Jul 18, 2022
Created on Jul 18, 2022

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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

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, rendered as SVG. It displays country boundaries in red fill with a dark blue sphere background, and includes a title tooltip on hover showing each country’s name. The map uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate paths, and `d3.zoom` for pan and zoom interaction. Country geometries come from TopoJSON data in the world-atlas package, joined with ISO country names from a TSV file, while `d3.scaleOrdinal` defines the color scheme.

AAlexalim28
95% match
Loading thumbnail…

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

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.

BBKirst3
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 visualization employs D3.js v5 and TopoJSON to render a world map on an SVG canvas. The map uses the Natural Earth dataset loaded from the `world-atlas` package, with country boundaries drawn as SVG paths using the `geoNaturalEarth1` projection and `geoPath` from D3. Countries are filled in light green with black outlines, while the surrounding sphere is filled blue. The code demonstrates DOM manipulation by selecting the SVG element, appending a sphere path, and then adding country paths after asynchronously fetching the geographic data.

MMajaha21
93% 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 example renders a world map using a natural Earth projection, displaying country boundaries as colored paths over a blue spherical backdrop. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the topojson `feature` method. The map is drawn with D3 v5’s `geoPath` and `geoNaturalEarth1` projection, while each country is styled as a light green filled SVG path with a subtle black stroke. The visualization demonstrates a straightforward, static cartographic rendering with minimal interactive or animated elements.

AAiden Lau
93% match
Loading thumbnail…

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

This example renders a world map using D3.js v5 and the topojson library. It projects geographic data from the world-atlas 110m GeoJSON dataset with the Natural Earth projection, drawing each country as a filled path with a subtle stroke. The visualization also displays a blue sphere representing the globe background. The code employs `d3.geoPath` and `geoNaturalEarth1` for map projection and path generation, while `topojson.feature` converts the raw topology into usable features. Styling is applied via CSS classes for the sphere and countries.

NNaimisha-M
93% match