Map final project

100%

Map final project

✓ Published0🌍 Public

Last edited Apr 25, 2024

Created on Apr 25, 2024

This choropleth map colors countries by their economic classification using a spectral color scale, with a hover effect to highlight individual nations and a legend showing the color-to-category mapping. Built with D3 v5, it loads geographic boundaries from a TopoJSON world atlas and income-group data from a TSV file, then projects them using the `geoNaturalEarth1` projection and renders paths with `geoPath`. The visualization implements interactive zooming via the `zoom` event and a custom `colorLegend` component, with the map’s ocean rendered as a styled sphere path.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification, with a hover effect highlighting individual nations and a legend showing the categorical color scale. The visualization renders world geography using `d3.geoPath` with a Natural Earth projection, while `d3.zoom` enables pan and zoom interaction. Data loads from the world-atlas TopoJSON and TSV files, merged by country ID, and the color scale uses `d3.scaleOrdinal` with `schemeSpectral` ranges. The legend is built as a reusable component with `selection.enter` and `merge` patterns.

Lloicvdk

87% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries according to their economic classification, with a discrete ordinal color scale and an interactive color legend. Using D3 v5 and the `geoNaturalEarth1` projection, it renders TopoJSON world data loaded from the world-atlas package and merges it with TSV metadata containing country names and income groups. Users can pan and zoom via D3's zoom behavior, while hovering highlights countries in red and displays a tooltip with the country name and economy type. The legend is built with a custom colorLegend component.

SShanthi Acharya

87% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification, with a color legend and zooming and panning via d3.zoom. It loads world geometry from TopoJSON and country names from TSV data, joining them by ID. The map uses a natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath, with an ordinal color scale based on d3.scaleOrdinal and a spectral scheme. Hovering highlights countries, and a custom color legend is built with reusable SVG components.

KKohinoor Chtaterjee

87% 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

87% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economic classification using a spectral color scale, with hover highlighting and zoom/pan enabled via d3.zoom. The visualization loads world geometry from TopoJSON and joins it with tab-separated country metadata from the world-atlas dataset. It renders geographic paths with d3.geoPath and a Natural Earth projection, while a custom color legend displays ordinal color domains using SVG circles and text.

NNilla

87% 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

87% match

Loading thumbnail…

Choropleth Map Interactive

This interactive choropleth map displays countries colored by their economy category, using a spectral color scale and a natural Earth projection. Users can click legend swatches to highlight matching regions while dimming others. The visualization is built with D3 v5 modules including `geoNaturalEarth1`, `geoPath`, and `zoom`, rendering vector shapes as SVG. It loads geographic data from the World Atlas TopoJSON and TSV files, processing them via `topojson.feature`. A dedicated color legend component supports selection filtering, while CSS hover effects emphasize individual countries.

MMunTatt Yap

87% match

Loading thumbnail…

Choropleth Map

This choropleth map uses color to encode the economy classification of countries, sourced from world-atlas TSV data matched with TopoJSON geometries. D3’s `geoNaturalEarth1` projection and `geoPath` render country outlines as SVG paths, while a sequential spectral color scale (`schemeSpectral`) fills each territory. An interactive zoom control, built with D3’s `zoom` event, adjusts the projection transform, and a custom legend (from `colorLegend.js`) displays the ordinal scale’s categories with hover effects highlighting individual countries.

KKainsli

87% match