World Map

100%

✓ Published1🌍 Public

Last edited Aug 18, 2020

Created on May 22, 2020

This world map visualizes country data with interactive links, coloring select nations (India, Brazil, Canada) in a highlighted green while others appear brown. Hovering changes fill colors, and clicking a highlighted country opens a related news URL, while non-highlighted countries show a “news not available” tooltip. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render SVG paths from TopoJSON world-atlas data, with country names mapped via TSV data. Links and hover styling are applied through D3 selections and CSS classes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map Edit

This interactive world map visualizes country-specific news availability by coloring select countries brown and others light green, with clickable links to external news articles for India, Brazil, and Canada. Using D3 v5 and TopoJSON, it loads world-atlas data and renders countries with `d3.geoPath` and a natural Earth projection. Hover effects change country colors, and tooltips display country names with a note when news links are unavailable. The code employs `Promise.all` to load TSV and JSON data simultaneously and `d3.select` to manage SVG elements.

0007ebey

93% match

Loading thumbnail…

World Map

This interactive world map displays country boundaries on a natural Earth projection, with tooltips showing country names on hover. The visualization uses D3.js v5 with d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for pan and zoom functionality. It loads geographic data from the World Atlas TopoJSON files at unpkg.com, combining country geometries with name mappings from the accompanying TSV file. SVG paths represent countries and the surrounding sphere, with hover interactions highlighting selected regions in blue.

Yyamunayennem

84% match

Loading thumbnail…

World Map

This world map uses a natural Earth projection to display country boundaries, with a dark blue ocean sphere and light green landmasses. Hovering over a country turns it red and reveals its name via a tooltip. The visualization supports zooming and panning through d3.zoom, with geographic paths rendered using d3.geoPath. It loads world country geometries from TopoJSON and country names from a TSV file, both sourced from the world-atlas package.

Ggabcoderboi

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

84% match

Loading thumbnail…

World map

This visualization displays a world map with countries colored in green, where clicking a country selects it and updates a title showing its name. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries from TopoJSON data loaded from the world-atlas package. Interactive zoom is implemented with `d3.zoom`, and selected countries are highlighted with a darker fill through SVG attributes. The rendering is SVG-based, with hover effects and titles per country provided by appended `<title>` elements.

JJacob van Lingen

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

84% match

Loading thumbnail…

WORLD MAP

This interactive world map displays country boundaries with a custom equirectangular-like projection, colored in muted green with cyan oceans. Hovering over a country highlights it in bright green. The visualization uses D3.js to load GeoJSON and TSV data from the world-atlas package, combining them to create SVG paths with country names via tooltips. It implements zooming through the `d3.zoom` module and renders the sphere and countries using `d3.geoPath` with the Natural Earth projection.

Ppaularl

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

84% match