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

100%

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

✓ Published0🌍 Public

Last edited Feb 10, 2023

Created on Feb 10, 2023

Forked from 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.

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

93% match

Loading thumbnail…

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

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.

991geethikaalwis

93% match

Loading thumbnail…

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

This example shows a world map with country boundaries from the World Atlas TopoJSON dataset, where each country is color-coded and displays a tooltip with a numeric value on hover. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to render the SVG paths, while `topojson.feature` converts the TopoJSON data into GeoJSON. A custom tooltip appears near the cursor using mouseover events and CSS positioning, and the `csv` data is matched to country IDs to populate the tooltip’s content.

Kklumng

89% 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

88% 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

87% 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

87% match

Loading thumbnail…

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

This example renders an interactive world map in SVG using D3.js and TopoJSON. It displays country boundaries and population data loaded from the world-atlas package, showing each country's population in a tooltip on hover. The map uses a Mercator projection created with `d3.geoMercator` and draws paths with `d3.geoPath`. The visualization supports pan and zoom through D3's `zoom` event, which applies a transform to the map's group element.

MMohammed Nijim

86% 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

86% match