Choropleth Map

100%

Choropleth Map

✓ Published1🌍 Public

Last edited Nov 20, 2018

Created on Nov 17, 2018

A choropleth map uses color to encode values across world countries. D3’s `geoPath` and `geoNaturalEarth1` projection render the map from TopoJSON data, while a TSV file supplies per-country attributes. The map color-fills each country by its `scalerank` value using an ordinal color scale. A separate legend component displays the color-to-value mapping, and zooming is enabled via the `zoom` event.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map visualizes country-level scalar data using color-coding over a geographical projection. Built with D3.js, it renders SVG paths from TopoJSON world data, with the projection handled by `d3.geoPath` and `d3.geoNaturalEarth1`. The map assigns colors based on a `scalerank` attribute using a `d3.scaleOrdinal` color scale, while a supplementary color legend displays the mapping. Interactivity is included via a zoom feature, and hovering over a country highlights it and displays a tooltip with its name and value.

SSean Ye

93% match

Loading thumbnail…

Choropleth Map

A choropleth map displays countries of the world colored in light green, with a blue sphere representing the globe and black borders between nations. The visualization uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to render geographic features from TopoJSON data, while country names come from tab-separated values (TSV) data. Interactive zooming is implemented with `d3.zoom`, converting events to SVG transforms. Hovering over a country changes its fill color to red through CSS `:hover` styles, and tooltips with country names appear via SVG `title` elements.

Yyouer

92% match

Loading thumbnail…

Choropleth Map

This choropleth map visualizes world countries using a natural Earth projection, with color encoding driven by data loaded from the world-atlas TopoJSON and TSV files. The SVG rendering uses `d3.geoNaturalEarth1` and `d3.geoPath` to draw geographic features, while an ordinal color scale maps country attributes to fill colors. Interactive pan and zoom are enabled through `d3.zoom`, which transforms both the map and sphere layers. A color legend is positioned on the left side to interpret the scale.

YYoung Song

92% match

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by economic grouping, with a legend of colored circles and a natural Earth projection. It uses d3.geoPath, d3.geoNaturalEarth1, d3.scaleOrdinal with schemeSpectral, and d3.zoom for panning. The code loads world atlas TopoJSON and TSV data via topojson.feature, rendering country paths as SVG with hover highlighting.

Ggorfoula

91% match

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their economic classification, with a color legend showing ordinal categories from the Spectral scheme. The visualization loads world geometry from TopoJSON and joins it with tabular data from a TSV file. Using d3.geoPath with a geoNaturalEarth1 projection, it renders SVG paths that support zooming via d3.zoom. Hovering highlights individual countries, while a custom colorLegend component displays the color scale with circles and text labels.

Ccaydener

91% match

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by economic classification, with an ordinal color scale and a legend showing each category. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the projection, `topojson` to load world geometry from the world-atlas dataset, and `schemeSpectral` for the color range. The map supports zooming via `d3.zoom`, while hover effects highlight individual countries.

HHasideluxe

91% match

Loading thumbnail…

Choropleth Map

This choropleth map displays world countries on a natural Earth projection, colored uniformly with a light green fill on a blue sphere. It uses the `geoNaturalEarth1` projection and `geoPath` from d3 to generate the geographic paths from TopoJSON world data. The visualization supports zooming and panning via the custom `zoom` event, while hovering over a country turns it red. Data is loaded from the world-atlas package, which provides both TSV metadata and TopoJSON geometry.

Ccpsshan

90% match

Loading thumbnail…

choropleth map

A world map rendered as a choropleth uses color to encode each country’s economy classification. Built with D3 v5 and topojson, the visualization loads geographic data from a 50m world-atlas JSON and TSV files, then projects it using `geoNaturalEarth1`. The `scaleOrdinal` color scale applies the `schemeSpectral` palette, while a custom legend displays the categories. Hovering turns a country red, and zooming is supported via the `zoom` event handler.

Jjlspangl

90% match