Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published2🌍 Public
LLudovicGouverneur
Last edited Dec 22, 2018
Created on Dec 6, 2018

This example shows a world map colored by economic classification, with an ordinal color legend displayed in the corner. It uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to render country outlines from TopoJSON data loaded via the `world-atlas` package. Countries are colored using `d3.scaleOrdinal` with `schemeSpectral`, and a custom `colorLegend` component draws circles and text labels. The map supports zooming through `d3.zoom`, and hover states change country fills to red via CSS.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This D3.js example displays a natural Earth projection map of the world, with countries colored by their economic classification using a spectral color scale and an interactive color legend. The visualization loads geographic and metadata from the world-atlas dataset via TopoJSON, then renders each country as an SVG path. The map supports zooming through d3.zoom, and hovering over a country highlights it in red while a tooltip shows its name and economy type.

MMitul Suthar
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a choropleth world map colored by each country’s economy classification, using a natural Earth projection and a red-yellow-green color scale. Users can zoom and pan the map via D3’s zoom behavior. The map is rendered as SVG paths generated with `d3.geoPath` and `geoNaturalEarth1`, while country boundaries come from the world-atlas TopoJSON dataset. Data is loaded with `d3.tsv` and `d3.json`, with colors assigned using `scaleOrdinal` and the `schemeRdYlGn` scheme.

Jjesramyep1263
91% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map using D3.js, rendering countries as interactive SVG paths with hover effects that turn them red. The visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw the globe and country boundaries from TopoJSON data loaded from the World Atlas. A `d3.zoom` behavior enables pan and zoom, while country names are joined from TSV data using `Promise.all`. The map is styled with CSS classes, featuring a blue sphere and light green countries.

Rrcumani
89% match
Loading thumbnail…

Let's make a map with D3.js!

A choropleth map of global economies colors each country according to its economic classification using a categorical color scale. The visualization uses D3 v5 with `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering SVG paths, and TopoJSON data from the world-atlas package. Users can pan and zoom via `d3.zoom`, while hovering displays a tooltip with the country name and economic category. An ordinal color legend with circles and text labels explains the color mapping.

DDan Stockham
88% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map rendered with D3.js, displaying country boundaries colored light green that turn red on hover. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw geographic features, with zoom support through `d3.zoom`. It loads world-atlas TopoJSON data and a companion TSV file to map country names, appending tooltips with each country’s name. The map is drawn as SVG paths, including a dark blue sphere background.

Ss-janibekova
88% match
Loading thumbnail…

Make a World Map with D3

This example shows a world map colored by economy type using a categorical color scale, with hover highlighting and zoom/pan interaction. The map uses D3 v5 with `d3.geoNaturalEarth1` projection, `d3.geoPath` for rendering, and TopoJSON from the world-atlas dataset. Country boundaries are drawn as SVG paths, colored via `d3.scaleOrdinal` with `schemeCategory10`, and tooltips appear on hover. The data comes from a TSV file mapping ISO country codes to names and economies.

Aamit0623
88% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js, displaying country boundaries as SVG paths colored light green, with a blue sphere background. The map supports zooming and panning through a d3.zoom behavior, and hovering over a country turns it red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath for generating paths from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file and displayed as tooltips via SVG `<title>` elements.

Ggcappadaniel
88% match
Loading thumbnail…

World Map Visualization

This example displays a world map using D3’s `geoNaturalEarth1` projection, coloring each country by its economy classification from a TSV dataset. It loads geographic data from `world-atlas` GeoJSON and joins it with metadata, then renders countries as SVG paths with a blue ordinal color scale. The map supports zooming and panning via `d3.zoom`, and features a hover effect that highlights countries in orange.

LLakshmanRangisetti
88% match