Skip to main content
SimilarExport ZIP
100%

WorldMap Visualization Based on Categories

✓ Published0🌍 Public
Ssuryavamsi00024
Last edited Jul 20, 2023
Created on Jul 19, 2023
Forked from Hello VizHub

This example displays a world map where each country is colored according to its economic category, using a sequential Blues color scheme. Hovering over a country highlights it in red and reveals a tooltip with its name and economy type. The map, built with D3.js, uses a Natural Earth projection and loads geographic data from the world-atlas package via TopoJSON, converting it to GeoJSON for rendering as SVG paths. Pan and zoom functionality is enabled through D3’s zoom utility.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

WorldMap Visualization Based on Categories

This interactive world map visualizes countries by economic category, using the natural earth projection to render geographic boundaries. The map is drawn as SVG paths from TopoJSON data enriched with TSV metadata, with each country’s fill color assigned via a d3 ordinal color scale using the Blues scheme. Pan and zoom are enabled through d3.zoom, and hover effects highlight individual countries. The code leverages d3.geoNaturalEarth1, d3.geoPath, topojson.feature, and d3.schemeBlues.

Ssrikkanth05
91% match
Loading thumbnail…

Visualization of WorldMap Based on Categories

This example visualizes world countries on a natural Earth projection, colored by economic category from the World Atlas dataset. The map supports zoom and pan, with hover effects that highlight individual countries. It uses D3 v5 for SVG rendering, combining `d3.geoPath` for map geometry, `d3.geoNaturalEarth1` for projection, and `d3.zoom` for interaction. TopoJSON converts the country boundaries, while TSV metadata (shared via `loadAndProcessData`) enriches each feature with names and economy values, which drive the ordinal blue color scale.

Aanith462@gmail.com
90% match
Loading thumbnail…

world map

A choropleth map of world countries colored by economy category, with an interactive legend that filters the map when clicking a category. Hovering a country displays its name and value via a tooltip. The visualization uses D3 v5 with d3.geoNaturalEarth1 projection, d3.geoPath for rendering, and d3.zoom for pan and zoom. Data comes from the world-atlas TopoJSON and TSV files, processed with topojson.feature and d3.tsv.

BBajiSharifPatan@my.unt.edu
88% match
Loading thumbnail…

world map with colors

This interactive choropleth map colors each country by its economy category, using a spectral color scale and click-to-highlight interaction to compare regions. Built with D3 v5, it renders country outlines via `d3.geoPath` with a Natural Earth projection, loads TopoJSON country boundaries from the World Atlas, and joins economic classifications from a TSV file. A zoom behavior enables panning and scaling, while an ordinal color legend supports filtering by clicking a category to fade unmatched countries.

BBajiSharifPatan@my.unt.edu
87% match
Loading thumbnail…

world map

This example shows a choropleth world map colored by each country's economy classification, with a clickable color legend that filters and highlights matching countries while dimming others. The map uses d3.geoNaturalEarth1 and d3.geoPath to render TopoJSON world-atlas data, with d3.zoom enabling pan and zoom interactions. A d3.scaleOrdinal maps the spectral color scheme to the economy categories, and tooltips display country names and values. The SVG rendering includes CSS hover effects and opacity transitions for non-selected regions.

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

world_map

This example visualizes world countries colored by economic classification using a natural Earth projection. The map supports zooming and panning, with hover highlighting and tooltips showing country names and economic categories. Built with D3 v5 and TopoJSON, it loads world atlas data from unpkg, utilizes `d3.geoNaturalEarth1` and `d3.geoPath` for geographic rendering, and applies a spectral color scale via `d3.scaleOrdinal` and `d3.schemeSpectral`. SVG paths enable interactive styling and title tooltips.

IInnoFail
86% match
Loading thumbnail…

Map with selectable country

This example presents a world map with countries colored by economic category, where clicking a country highlights it and dims all others; clicking again deselects it. The visualization includes a color legend with clickable swatches that filter the map’s opacity. Built with D3 v5, it uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.zoom` for the interactive map, rendered as SVG. Country data comes from World Atlas TopoJSON, while economic classifications load from a TSV file. A sequential ordinal color scale based on `schemeSpectral` drives the fill colors.

NNita
86% match