Unique countries map

100%

Unique countries map

✓ Published2🌍 Public

Last edited Mar 5, 2020

Created on Mar 4, 2020

A world map highlights countries frequented by travelers, coloring them green while leaving others gray. The visualization uses a Mercator projection rendered as SVG paths via `d3.geoPath`, with zoom and pan enabled through D3's `zoom` behavior. Geographic data comes from TopoJSON world-atlas, merged with country attributes from a TSV file and a custom list of ISO country codes to determine which nations receive the highlight.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Map with D3.js

This map displays the countries of the world in light green with black outlines, colored red on hover. The map supports zooming and panning through D3’s zoom module and geoMercator projection. It renders country shapes as SVG paths generated with d3.geoPath, using world-atlas data from TopoJSON and TSV files for country names. The code employs d3.select, d3.json, d3.tsv, and the topojson feature function to construct the visualization.

Aanastasiiaplatovskikh

83% match

Loading thumbnail…

World map

A world map rendered with SVG paths displays countries in green on a blue background, using the Mercator projection. The code loads TopoJSON world-atlas data via `d3.json` and converts it to GeoJSON with `topojson.feature`. D3’s `geoMercator` and `geoPath` generate the country outlines, which are appended as `<path>` elements with a semi-transparent black stroke.

Eevapavlinek

83% match

Loading thumbnail…

World test

This visualization displays a world map with countries colored light green against a blue sphere, using natural Earth projection. Hovering over a country turns it red, and users can zoom and pan the map interactively. The code loads TopoJSON and TSV data from the world-atlas package, converting TopoJSON to GeoJSON via topojson.feature and rendering paths with d3.geoPath. Zoom behavior comes from d3.zoom, while country names are joined from the TSV file and shown as SVG title tooltips.

OOldenkamp

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

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

81% match

Loading thumbnail…

MAP

A map of world countries renders as SVG paths, with each country colored white and outlined in dark grey, while oceans appear light blue. Hovering a country turns it light blue. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere and country boundaries from the world-atlas TopoJSON dataset, with `topojson.feature` converting the raw data into features. Zooming is enabled via D3’s `zoom` behavior, which applies transforms to the map group.

Ccocktaildata

81% match

Loading thumbnail…

Interaction

A world map renders countries in light green with black outlines on a blue sphere, using D3 v5 with a geoNaturalEarth1 projection. Users hover over any country to highlight it pink, while clicking a specific country isolates that selection and removes highlights from others. The visualization loads geographic data from a TopoJSON world atlas and merges it with a TSV file for country names. Code employs d3.geoPath, d3.zoom for panning, and CSS classes to toggle the selected country’s fill color.

NNTCHANG1289

81% match

Loading thumbnail…

Let's make a map

This example displays an interactive world map rendered as SVG, with countries shaded in light gray and oceans in steel blue. The visualization uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to draw geographic boundaries from TopoJSON data supplied by the world-atlas package. Country names are loaded from a TSV file and shown as tooltips using SVG `<title>` elements. The map supports pan and zoom through `d3.zoom`, which applies an SVG transform to the grouped map elements on interaction.

Bbambaleq

81% match