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

Let's make a map with D3.js!

This example shows a simple world map rendered with D3.js, displaying country boundaries using data from the world-atlas TopoJSON dataset. Country shapes are drawn as SVG paths via `d3.geoPath` with a natural Earth projection, and hovering highlights each country in red. The code uses `d3.json`, `topojson.feature`, and appends `<title>` elements for each path, though it only logs data to the console. The page loads D3 v5, TopoJSON, and hexmap libraries, with a gray background and light blue countries.

Kklumng

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

Let's make a map with D3.js!

This example demonstrates how to create an interactive world map using D3.js v5 and TopoJSON. It renders a natural Earth projection with country boundaries, showing country names as hover tooltips and enabling zoom and pan through d3.zoom. The visualization loads geographic data from the world-atlas package, combining TopoJSON geometry with TSV metadata for country names. The map uses an SVG rendering approach, with countries styled as light green polygons that darken on hover, all implemented through d3.geoNaturalEarth1, d3.geoPath, and d3.json.

Dddperdue

Let's make a map with D3.js!

This example uses D3.js to render an interactive world map from TopoJSON and TSV data loaded from the world-atlas package. Countries are drawn as SVG paths using the d3.geoNaturalEarth1 projection and d3.geoPath, with hover effects changing their fill color. The visualization incorporates d3.zoom to enable pan and zoom transformations on the map group, while a sphere background is rendered from a GeoJSON Sphere object. Country names are joined to features via ISO numeric codes and displayed as SVG title tooltips.

AAaron Goebel

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

Let's make a map with D3.js!

This example shows an interactive world map rendered as SVG, where each country is colored light green and turns red on hover, with a dark blue sphere backdrop. Built with D3.js v5 and TopoJSON, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw country boundaries from the World Atlas 50m dataset. Zoom and pan are enabled via `d3.zoom`, while country names are loaded from a TSV file and attached as SVG title tooltips.

IIgor Borzunov

Let's make a map with D3.js!

This example displays a world map rendered as blue SVG paths with white borders, highlighting each country in red on hover. It demonstrates a basic geographic visualization workflow using D3.js, loading country boundaries from the world-atlas TopoJSON dataset and converting them with `d3.geoMercator` projection and `d3.geoPath`. The code uses `topojson.feature` to extract GeoJSON from the TopoJSON file and appends the resulting paths to an SVG canvas, with hover styling handled by CSS.

Rrichad97

Let's make a map with D3.js!

This example shows an interactive world map built with D3 v5, displaying country boundaries and names loaded from the World Atlas TopoJSON and TSV datasets. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and renders countries as SVG paths generated with `d3.geoPath`. Hovering highlights a country in red, and a zoom behavior implemented with `d3.zoom` allows pan and zoom. A light blue sphere background and green country fills demonstrate basic choropleth styling.

BBrett