Skip to main content
SimilarExport ZIP
100%

Make a Map with selection red region and title

✓ Published1🌍 Public
Fforeverworld1879
Last edited Mar 17, 2020
Created on Mar 17, 2020
Forked from Make a Map

This example displays a world map rendered as SVG paths, with countries colored light green and the oceans depicted in blue. Hovering over a country highlights it in red. The map uses a Natural Earth projection applied via d3.geoPath, with geographical data loaded from a world-atlas TopoJSON source. The visualization integrates d3.zoom for interactive panning and scaling, and country names are mapped from ISO codes using a TSV file.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Make a Map with selection red region and title

This example displays a world map rendered as SVG paths, with countries colored light green and the oceans depicted in blue. Hovering over a country highlights it in red. The map uses a Natural Earth projection applied via d3.geoPath, with geographical data loaded from a world-atlas TopoJSON source. The visualization integrates d3.zoom for interactive panning and scaling, and country names are mapped from ISO codes using a TSV file.

Fforeverworld1879
100% match
Loading thumbnail…

Make a Map

This example renders an interactive world map using the Natural Earth dataset from world-atlas, displaying country boundaries with hover highlighting. The visualization uses D3’s geoNaturalEarth1 projection and geoPath to draw SVG paths, with topojson’s feature method converting TopoJSON to GeoJSON. Countries are colored green, turning red on mouseover, while the ocean sphere is light blue. The map supports pan and zoom through d3.zoom, which applies a transform to the map’s group element.

MMatthew Rubino
88% match
Loading thumbnail…

lets make a map!

This example displays an interactive world map with countries rendered in light green and hover effects that change their color to red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath to draw geographic features from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file. Pan and zoom functionality is implemented via d3.zoom, and the map is rendered as SVG with a light blue sphere background.

SShane Carey
88% match
Loading thumbnail…

Let's make a Map!

This visualization displays world countries on a natural Earth projection, with each country filled in light green and highlighted red on hover. The map is rendered as SVG using D3’s `geoNaturalEarth1` projection and `geoPath`. Country boundaries come from a TopoJSON world-atlas file, while names are joined via a TSV file keyed by ISO numeric codes. Users can pan and zoom the map using D3’s `zoom` behavior, which applies a transform to the map group.

VVito
88% match
Loading thumbnail…

Making a map

This example displays a world map using a natural Earth projection, with each country rendered as a light-green SVG path that darkens on hover. The map is built with the `d3.geoNaturalEarth1` projection and `d3.geoPath`, while TopoJSON and TSV files from the world-atlas package supply country boundaries and names. The `d3.zoom` API enables panning and zooming of the entire map group, and hover tooltips show the country name via a `<title>` element.

SSharvariPhadke
87% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays an interactive world map using a natural Earth projection, with countries rendered as green SVG paths that turn red on hover. The map supports zooming and panning through a D3 zoom behavior applied to the SVG group. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and topojson.feature to parse geographic data from the world-atlas dataset. A semi-transparent blue sphere outlines the globe, while country names appear as tooltips via appended title elements.

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

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js, displaying country boundaries as SVG paths colored light green, with a blue sphere background. The map supports zooming and panning through a d3.zoom behavior, and hovering over a country turns it red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath for generating paths from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file and displayed as tooltips via SVG `<title>` elements.

Ggcappadaniel
86% match