Skip to main content
SimilarExport ZIP
100%

Visualization of WorldMap Based on Categories

✓ Published0🌍 Public
Aanith462@gmail.com
Last edited Jul 21, 2023
Created on Jul 21, 2023
Forked from Hello VizHub

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.

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

WorldMap Visualization Based on Categories

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.

Ssuryavamsi00024
90% match
Loading thumbnail…

World Map Visualization

This example displays a world map using D3’s `geoNaturalEarth1` projection, coloring each country by its economy classification from a TSV dataset. It loads geographic data from `world-atlas` GeoJSON and joins it with metadata, then renders countries as SVG paths with a blue ordinal color scale. The map supports zooming and panning via `d3.zoom`, and features a hover effect that highlights countries in orange.

LLakshmanRangisetti
87% 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
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 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
85% 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
85% match