Skip to main content
SimilarExport ZIP
100%

Circles on a map

✓ Published0🌍 Public
MMauradion
Last edited May 26, 2021
Created on May 26, 2021

This example displays a natural Earth projection world map with interactive zooming and panning, where each country is rendered as a light green path that turns red on hover. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` for map geometry, with country shapes loaded as TopoJSON data from the world-atlas package and names joined via TSV metadata. The visualization demonstrates modular ES6 imports, including `topojson.feature` for converting TopoJSON to GeoJSON, and an SVG-based rendering approach with `d3.zoom` for user interaction.

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…

Circles on the Map

This example displays a world map with countries colored according to their economic classification, using a categorical color scale with a legend rendered as circles. It loads world geometry from TopoJSON and metadata from TSV files, then projects the map with `d3.geoNaturalEarth1` and renders it as SVG paths via `d3.geoPath`. A `d3.zoom` behavior enables panning and zooming, while the color legend is built with a custom function that updates scales and ticks. The visualization uses `d3.scaleOrdinal` with the `schemeSpectral` palette and supports hover highlighting through CSS.

Pprincit
89% match
Loading thumbnail…

World Map

This example displays an interactive world map using a natural Earth projection, with countries rendered as filled paths that highlight red on hover. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, joining country names via ISO codes. It uses d3.geoPath with geoNaturalEarth1 for projection, d3.zoom for pan and zoom interactions, and TopoJSON’s feature method to convert topology to GeoJSON. The SVG sphere appears blue, while countries are light green with black strokes.

CChinzorigt Ganbat
88% match
Loading thumbnail…

Circles on a map

This example displays a natural Earth projection world map with semi-transparent teal circles overlaid on each country, sized according to estimated 2018 population data from the UN. The map uses `d3.geoPath` and `d3.geoNaturalEarth1` to render country outlines from TopoJSON, while `d3.scaleSqrt` maps population values to circle radii. A legend with `d3.scaleSqrt` ticks and a color legend for missing data accompany the visualization, which supports zooming via `d3.zoom`.

AAjit Singh
88% match
Loading thumbnail…

Let's make a map with D3.js

This example displays a natural Earth map with countries rendered as light green paths on a blue sphere, with hover effects that highlight individual countries in red. It uses D3.js v5’s `geoNaturalEarth1` projection, `geoPath` for geometry rendering, and the `topojson` library’s `feature` function to convert TopoJSON data. The map zooms via D3’s `zoom` event, and country names are joined from a TSV file using ISO numeric codes.

MMatthiasVanCampen
88% match
Loading thumbnail…

Map Interactions

This example displays an interactive world map using a natural Earth projection, with countries rendered as light green SVG paths that turn teal on hover. The visualization combines world-atlas TopoJSON data with a TSV file containing country names, which are added as native SVG `<title>` tooltips. The map supports pan and zoom through d3.zoom, while d3.geoPath and d3.geoNaturalEarth1 handle geographic projections. Hover effects use CSS pseudo-classes, and the map includes a blue sphere background for context.

Ggilbster
88% match
Loading thumbnail…

Interaction World Map

This example displays a world map rendered with SVG paths, where countries are filled in light green and turn red on hover. It uses the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw geographic features from a TopoJSON file loaded from the world-atlas package. The map supports zooming and panning through `d3.zoom`, which applies SVG transforms to the map group. Country names are resolved by joining the TopoJSON data with a TSV table, enabling tooltips via appended `title` elements.

Ppplomith
88% match
Loading thumbnail…

worldmap

This example displays an interactive world map with countries rendered as individual SVG paths, colored light green with black outlines, and highlighted in red on hover. It uses D3 v5's `geoNaturalEarth1` projection with `geoPath` to draw the map, and a light blue sphere for the oceans. Country boundaries come from the `world-atlas` package's countries-50m GeoJSON data, and the `topojson-client` library converts TopoJSON to GeoJSON for feature extraction. The chart supports zooming via D3's `zoom` event, which updates the SVG group transform in real-time.

Hhxc20060903
88% match
Loading thumbnail…

lets make a map!

This example displays a world map using a natural Earth projection, with countries filled in green that turn red on hover. It renders the map as SVG paths generated by `d3.geoPath` and `geoNaturalEarth1`, loading geographic data from the world-atlas TopoJSON file. The code uses `topojson.feature` to convert the TopoJSON into GeoJSON features, and appends a sphere outline for visual context.

SShane Carey
88% match