Skip to main content
SimilarExport ZIP
100%

Chropleth Map

✓ Published1🌍 Public
PPabloReyesBetanzo
Last edited Nov 15, 2018
Created on Nov 11, 2018

This choropleth map visualizes countries colored by their economic group, using the `d3.geoPath` projection to render the world and a `d3.scaleOrdinal` color scale with `d3.schemeSpectral`. Country data comes from a TopoJSON world atlas, enriched with a TSV file for metadata. A custom legend component displays the color categories, and a `d3.zoom` interaction updates the map’s transform. Hovering over a country reveals its name and economic group via an SVG `title` element.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic group, drawing from world-atlas TopoJSON and TSV data joined by country ID. The visualization renders the map with D3’s `geoNaturalEarth1` projection and `geoPath` generator, while an ordinal color scale from `schemeSpectral` assigns shades to each group. A custom color legend displays every category with circles and labels, and users can zoom and pan via D3’s `zoom` event, which updates the group’s transform. Hovering a country highlights it in red and shows its name and economy in a tooltip.

RRenato Francia Castillo
92% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by economic grouping, using a spectral color scale to distinguish categories. Built with D3 v5, it renders geographic boundaries as SVG paths via the `geoPath` projection. The visualization includes an interactive color legend generated with a custom `colorLegend` module, and supports zooming through D3's `zoom` event. Data merges TopoJSON country shapes with a TSV containing economy classifications from the world-atlas package.

MMyCode
91% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes the world's countries, colored according to their economic classification. The map uses D3's `geoNaturalEarth1` projection and `geoPath` to render the geographic shapes, with an ordinal color scale based on a spectral scheme to represent the data. Country data comes from the world-atlas dataset, which merges TopoJSON geometry with TSV metadata. Interactive features include zooming via `zoom()` and a color legend built with `scaleOrdinal` and SVG elements. Hovering over a country highlights it in red and displays a tooltip with its name and economic group.

AAndreas Loew
91% match
Loading thumbnail…

Choropleth Map

This choropleth map displays the world’s countries colored by their economy classification, with a hover tooltip revealing each country’s name and economic group. The visualization uses `d3.geoPath` with the `geoNaturalEarth1` projection to render the globe, while `topojson.feature` loads the world atlas data and merges it with TSV metadata. An ordinal color scale applies a `schemeSpectral` range, and the custom `colorLegend` component builds an SVG legend. The map supports interactive pan and zoom via `d3.zoom`.

Ggcappadaniel
91% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic groupings by coloring each country according to its economy category. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries from TopoJSON data loaded from the world-atlas package. A sequential `d3.scaleOrdinal` with `schemeSpectral` assigns colors, while zooming is enabled through `d3.zoom`. Hovering highlights countries in red, and a color legend explains the ordinal categories.

MMabelbao
91% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economic classification, using a spectral color scale and an interactive legend to indicate the mapping. Users can zoom and pan the map, which is rendered with SVG paths generated by the `d3.geoPath` and `geoMercator` projections. The visualization loads country boundaries and metadata from the world-atlas TopoJSON and TSV files, processed via the `topojson` library. Hovering over a country highlights it in red and displays its name and economy in a tooltip.

ZZY Huang
91% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic group using a spectral color scale, with hover effects that highlight individual nations. The visualization uses D3.js (v5) to load world map data from TopoJSON and TSV files, projecting geographic coordinates with d3.geoNaturalEarth1 and rendering paths via d3.geoPath. A custom color legend with circles and text labels is built using D3 selections, while zooming is enabled through d3.zoom. The map data comes from the world-atlas package, and SVG is used for all rendering.

FFerrandiaz92
91% match
Loading thumbnail…

Choropleth Map

A choropleth map colors countries by economic classification, with a hover effect highlighting regions and a color legend displaying category ranges. Built with D3 v5, the example uses d3.geoPath with a natural Earth projection to render the map, while d3.scaleOrdinal and schemeSpectral assign colors to discrete economy values from the world-atlas dataset. Interactive zooming is enabled via a d3.zoom event, and the SVG output includes tooltips showing country names and their economic group. The visualization loads geographic data from TopoJSON and TSV sources.

PPreciousone
91% match