Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
991geethikaalwis
Last edited Feb 10, 2023
Created on Feb 10, 2023

This is a D3.js map of the world created with a Natural Earth projection, using `d3.geoPath` and `d3.geoNaturalEarth1` to render country outlines. Each country is joined with a CSV dataset by its numerical ID, and hovering over a country triggers a custom tooltip via `d3.select` and DOM `mouseover` events, displaying the country's ID and its associated value from the CSV. The visualization demonstrates basic interaction and data-binding on an SVG canvas, with countries colored light blue and highlighting red on hover.

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 with popup.js!

This visualization displays a world map with color-coded countries, rendering geographic boundaries as SVG paths. It uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw the map, with country data loaded from a CSV containing IDs and values. A tooltip appears on mouseover, showing the country code and its associated value. The example uses the `topojson` library’s `feature` function to convert TopoJSON to GeoJSON, and D3’s `select`, `geoPath`, and `csv` APIs for DOM selection, path generation, and data parsing.

991geethikaalwis
95% match
Loading thumbnail…

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

A world map rendered with D3.js displays country values from a CSV file, changing country color to red on hover while showing a tooltip with the country ID and value. Using d3.geoNaturalEarth1 projection and d3.geoPath, the visualization loads TopoJSON world data and CSV data via Promise.all. Mouseover events position an HTML tooltip near the cursor, while d.csv provides the id-value pairs that populate the tooltip text.

Kklumng
93% 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
91% match
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
90% 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
89% 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
89% 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
89% match
Loading thumbnail…

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

This example displays a world map with countries rendered as light green landmasses against a blue spherical background. The visualization uses a natural Earth projection to transform geographic coordinates into a flat SVG canvas. The code leverages D3.js v5 with `d3.geoPath` and `d3.geoNaturalEarth1` for projecting and drawing the map. Country boundaries are stroked in black with low opacity, while the data comes from the `world-atlas` package’s 110m resolution GeoJSON, loaded via `d3.json`. The rendering is entirely SVG-based with styling defined in CSS.

SSnapika
89% match