TP_QI

100%

✓ Published1🌍 Public

Last edited Dec 1, 2022

Created on Oct 5, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

A2Q6

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.

MmNamratha25

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

Assignment3

This map visualization displays world countries colored in light blue, with a title tooltip revealing each country’s name on hover. The map is rendered using the d3.geoPath and d3.geoMercator projection, driven by TopoJSON geographic data. Country names are joined from a TSV dataset using each feature’s ISO numeric ID. The SVG paths have a black stroke and respond to mouseover by turning green.

Qqwazx111

82% match

Loading thumbnail…

地图的交互

This visualization displays a world map rendered with D3 v5 using the geoMercator projection and topojson data from the world-atlas package. Country boundaries are drawn as SVG paths, colored green with a red hover effect, and each country includes a title tooltip showing its name from the accompanying TSV file. The map supports interactive zooming and panning through d3.zoom, which applies a transform to the grouped SVG elements. Population data from a local CSV is loaded but not yet visualized, leaving the focus on the geographic interaction.

HHillKinsh

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

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

80% match

Loading thumbnail…

World Map

This visualization displays a world map using SVG paths, with each country rendered as a distinct shape that changes color on mouse hover. It also shows country names and population estimates as tooltip labels. The map uses d3.geoNaturalEarth1 projection and d3.geoPath to draw geographic features from TopoJSON data, while country metadata comes from a TSV file. Interaction is handled through CSS hover effects, with country names and populations loaded from world-atlas and countries.json sources.

王王神鐸

80% match

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

80% match