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

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

This example visualizes a world map using a natural Earth projection, with countries rendered as light green SVG paths on a blue sphere. 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.geoPath and d3.geoNaturalEarth1, with country borders stroked in semi-transparent black. The code imports specific D3 modules including select, json, and geoPath, demonstrating a concise approach to geographic visualization.

SSittukala Saravanan
92% match
Loading thumbnail…

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

This example displays a world map rendered as SVG paths, with countries filled in light green against a blue spherical backdrop. It uses D3.js v5’s `geoPath` and `geoNaturalEarth1` projection to generate geographic outlines from the world-atlas TopoJSON dataset. The code also loads the TopoJSON library to extract country features, then appends each path to the SVG container. The visualization demonstrates a straightforward choropleth-style map without interactivity, emphasizing the projection and vector rendering pipeline.

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

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

This example visualizes a world map using a natural Earth projection, rendering countries as light green paths with dark strokes on a blue spherical backdrop. It loads geographic data from a world-atlas TopoJSON file via `d3.json`, then applies the `topojson` library’s `feature` function to extract country features. The SVG paths are generated using `d3.geoPath` and the `d3.geoNaturalEarth1` projection, which also draws the sphere outline. The input data source is the unpkg-hosted world-atlas dataset, and the rendering is entirely vector-based, using SVG elements styled by the included CSS.

TToooooooT
91% match
Loading thumbnail…

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

This example visualizes a world map using a natural Earth projection. The map is drawn with SVG paths, where countries are filled with light green and the surrounding sphere is dark blue. The code uses D3 v5 functions `geoPath` and `geoNaturalEarth1` to project geographic coordinates, while the `topojson` library’s `feature` function converts the world-atlas TopoJSON data into geometric features for rendering. The visualization loads country boundaries from the `world-atlas` package and applies a subtle black stroke with low opacity to each country outline.

Rrajeshathakur
91% match