Skip to main content
SimilarExport ZIP
100%

A2Q6

✓ Published0🌍 Public
MmNamratha25
Last edited Jul 20, 2023
Created on Jul 20, 2023

This map shows the world's countries as tan polygons against a light blue sphere, with hover states that turn the countries brown. The visualization is built with D3 v5 and TopoJSON, using `d3.geoEquirectangular` and `d3.geoPath` to generate the projected SVG paths. Country boundary data comes from the `world-atlas` countries-110m.json file, and the rendering is entirely SVG-based with a CSS-driven hover effect on the `.country` class.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

WORLD MAP

This example displays a world map with countries rendered in tan against a blue sphere, highlighting each country in dark orange on hover. It uses D3 v5’s `d3.geoEquirectangular` projection and `d3.geoPath` to draw the map, with TopoJSON loading the country boundaries from a world-atlas dataset. The SVG paths are generated from GeoJSON features, and the styles are applied via CSS classes.

Mmboinapally17
86% match
Loading thumbnail…

World Map

This example shows a world map with countries rendered as light blue polygons outlined in yellow, which highlight pink on hover. It uses D3 v5 and TopoJSON to load geographic data from the world-atlas dataset, applying the `geoEquirectangular` projection and `geoPath` generator to draw the sphere and country boundaries as SVG paths. Country hover effects are styled via CSS.

PPavaniMangugari
85% match
Loading thumbnail…

World Map Visualization

This world map visualization displays all countries in an equirectangular projection, with each nation filled by a distinct color from a categorical scale and labeled with its name at its centroid. Built with D3 v5 and TopoJSON, it loads world-atlas data (countries-110m.json) and uses d3.geoPath with geoEquirectangular projection to render SVG paths. Countries brighten to yellow on mouseover and revert to their original color on mouseout, while a lightsteelblue sphere behind the landmasses provides geographic context.

Ssreeramyamini@gmail.com
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
83% match
Loading thumbnail…

Making a map

This map displays the world’s countries as light green polygons on a dark blue sphere, with hover highlighting in red. It uses d3.geoPath with a d3.geoNaturalEarth1 projection to render geographic features from TopoJSON data, which is merged with country names from a world-atlas TSV file. The visualization supports pan and zoom interaction via d3.zoom, and all drawing is done as SVG paths.

Aakshayms0
83% match
Loading thumbnail…

World Map visualization with D3.js!

This example displays a world map using D3.js v5 and TopoJSON, rendering countries as red SVG paths with blue strokes on a green spherical backdrop. It uses `d3.geoEquirectangular` for the projection and `d3.geoPath` to generate the country shapes from the `world-atlas` dataset’s countries-110m.json file. Hovering over a country changes its fill color to brown, highlighting individual nations.

BBajiSharifPatan@my.unt.edu
83% match
Loading thumbnail…

World Map ICE 8

This visualization displays a global world map using the equirectangular projection, with countries rendered as individual SVG paths filled in brown and outlined in black. The sphere background is shaded blue, and hovering over any country highlights it in a darker orange. It uses D3 v5’s `geoPath` and `geoEquirectangular` functions together with TopoJSON’s `feature` method to convert country boundaries from the world-atlas dataset. The map is drawn entirely with SVG elements, and interactivity is handled by CSS hover selectors.

Mmboinapally17
83% match
Loading thumbnail…

TP_QI

This visualization displays a world map with countries rendered as solid green shapes on a light blue background, with hover effects changing the fill color. The map is built using D3 v5 and TopoJSON, loading geographic data from the world-atlas package. It uses d3.geoMercator for projection and d3.geoPath to generate SVG paths for each country, with a d3.zoom behavior enabling pan and zoom interactions. Country names come from the accompanying TSV file, though population data for coloring is commented out.

TToky R
82% match