Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published0🌍 Public
Jjesramyep1263
Last edited Mar 29, 2020
Created on Mar 27, 2020

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.

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!

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

Let's make a map with D3.js!

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.

LLudovicGouverneur
91% match
Loading thumbnail…

Choropleth Map.js!

This example shows a choropleth map of the world’s countries, colored by economic classification using a spectral color scale. The map renders as SVG and supports mouse hover highlighting, which changes the fill of individual countries to dark green. It loads geographic data from the world-atlas TopoJSON and matches it with country names and economy values from a TSV file. The visualization uses d3.geoPath with a d3.geoNaturalEarth1 projection, applies a d3.scaleOrdinal for colors, and enables pan and zoom through d3.zoom.

Dddperdue
89% 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
89% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy type using a categorical color scale, with a legend showing each category. It renders world geography as SVG paths via `d3.geoPath` and the Natural Earth projection, while `d3.zoom` enables panning and zooming. The code loads TopoJSON and TSV data from the world-atlas package, mapping country IDs to economy labels, and uses `d3.scaleOrdinal` with `schemeSpectral`. Hovering highlights a country in red.

Ggabcoderboi
88% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy grouping, using a spectral color scale assigned through D3's `scaleOrdinal` and `schemeSpectral`. The code projects geographic features with `geoNaturalEarth1` and `geoPath` onto an SVG, overlaying a white legend built by a custom `colorLegend` component. Hovering highlights a country in red via CSS. Data comes from the `world-atlas` package, merging TopoJSON shapes with TSV metadata. Zoom interactions are handled through D3's `zoom` event, transforming the map group.

YYoung Song
88% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic classifications by country, coloring each nation according to its economy category. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render the map from TopoJSON world-atlas data, with country attributes loaded from a TSV file. A color legend, constructed via `colorLegend`, displays the ordinal color scale using `d3.scaleOrdinal` and `d3.schemeSpectral`. The SVG map supports zooming via `d3.zoom`, and hovering changes a country’s fill to red.

Eevavan8
88% match