Skip to main content
SimilarExport ZIP
100%

World Map Edit

✓ Published0🌍 Public
0007ebey
Last edited Aug 18, 2020
Created on May 22, 2020
Forked from World Map

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

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.

0007ebey
93% 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
85% match
Loading thumbnail…

World Map

This example renders an interactive world map using SVG, with countries shown in brown and the globe’s sphere in light blue. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON via the `feature` method. The map uses `d3.geoEquirectangular` for projection and `d3.geoPath` to generate the paths. Hovering highlights countries by changing their fill color through CSS, while D3 v5 and TopoJSON handle the data binding and rendering.

HHemanthh81
84% match
Loading thumbnail…

World Map with D3.js!

A stylized world map visualizes countries as green regions with black outlines on a blue sphere, using D3.js v5 and TopoJSON. The code loads geospatial data from the world-atlas countries-110m.json file, converts it to GeoJSON features with the topojson `feature` function, and renders it into SVG paths via `d3.geoPath` with a `geoEquirectangular` projection. Hovering a country changes its fill to orange.

Ssainitish1999
84% match
Loading thumbnail…

World Map

This example displays an interactive world map showing country boundaries with zooming and hover effects. It uses D3 v5 and TopoJSON to load geographic data from the world-atlas dataset, projecting it with d3.geoEquirectangular and rendering via d3.geoPath. The map initially shows a blue sphere with light green countries and indigo borders, which turn maroon on hover. A d3.zoom handler enables pan and zoom interactions on the SVG.

BBhavyaMammai
83% match
Loading thumbnail…

World map

This example shows an interactive world map rendered as an SVG, with countries filled in green that turn red on hover against a sky-blue sphere background. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features using the `feature` method from TopoJSON. The visualization uses D3’s `geoEquirectangular` projection and `geoPath` to generate country outlines, while `select` and `selectAll` manage the SVG path elements. The map is drawn entirely with D3 v5 and CSS styling for hover effects.

Nnikhilagopi
83% match
Loading thumbnail…

Interactive World Map

This interactive world map displays country boundaries colored in green on a blue sphere, with hover states turning countries orange. The visualization uses D3 v5 and TopoJSON to load world atlas data from unpkg, combining geographic TSV metadata with 50m JSON topology. It renders through an SVG path generator with a natural Earth projection, while d3.zoom enables pan-and-zoom interaction. Country names appear as tooltips via appended title elements, and the map resizes to fill the browser viewport.

OOskar Weinfurtner
83% match
Loading thumbnail…

world map

This interactive world map displays country boundaries using a natural Earth projection rendered as SVG paths. The visualization loads geographic data from a JSON file, converts it into GeoJSON features via the `topojson.feature` API, and draws each country with `d3.geoPath` and `d3.geoNaturalEarth1`. The sphere background is styled skyblue, while countries fill with a blue tint and cyan strokes. The code uses D3 v5’s selection and JSON loading methods to fetch remote data from a GitHub gist.

Rrakeshkommineni
82% match