Skip to main content
SimilarExport ZIP
100%

ywontthiswork

✓ Published1🌍 Public
Jjons288
Last edited Sep 26, 2018
Created on Sep 26, 2018
Forked from ywontthiswork

An interactive world map colors every country red, turning a selected country green upon click. Built with D3 v5 and TopoJSON, it loads country boundaries from the World Atlas 50m dataset and pairs them with names from a TSV file. The map uses a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, with country paths rendered as SVG elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ywontthiswork

This example shows an interactive world map where clicking a country turns it green while all other countries remain red, displaying a selected-country highlighting behavior. The visualization loads geographic data from the world-atlas TopoJSON dataset and country names from a corresponding TSV file, then renders the map using d3.geoPath with a d3.geoNaturalEarth1 projection. Click events trigger a re-render that updates fill colors based on the selected country’s ID. The code uses d3.json, d3.tsv, and d3.select to manage data loading and SVG elements.

Jjons288
93% match
Loading thumbnail…

Its finally working

This interactive map colors countries red by default, turning a clicked country green. Built with D3 v5 and TopoJSON, it loads world geographic data from the world-atlas package and renders it as SVG paths via a `geoNaturalEarth1` projection. Click handlers on each country path trigger a re-render, updating the fill based on the selected country's name from the TSV metadata.

Jjons288
89% 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
85% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js v5, displaying countries as green SVG paths with black borders that turn red on hover. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with country boundaries loaded from a TopoJSON file (world-atlas 50m) and country names from a matching TSV file. Zooming is enabled through d3.zoom, which applies a transform to the map group. The sphere background is rendered as a blue path, and each country includes a tooltip title showing its name.

YYoram
85% 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…

Map D3.js HW

This interactive world map lets users click individual countries to select them, highlighting each in orange with a red stroke while displaying the country’s name in red text above the SVG. Clicking a selected country reverts its fill to light green, though the name label remains visible. The visualization uses D3 v5 and TopoJSON, rendering with `d3.geoPath` and the `geoNaturalEarth1` projection, with zoom support via `d3.zoom`. Country names come from a TSV file paired with the world-atlas TopoJSON dataset.

KKCachel
85% match
Loading thumbnail…

lets make a map!

This example displays an interactive world map with countries rendered in light green and hover effects that change their color to red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath to draw geographic features from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file. Pan and zoom functionality is implemented via d3.zoom, and the map is rendered as SVG with a light blue sphere background.

SShane Carey
85% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map rendered as SVG, where each country is colored light green and turns red on hover, with a dark blue sphere backdrop. Built with D3.js v5 and TopoJSON, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw country boundaries from the World Atlas 50m dataset. Zoom and pan are enabled via `d3.zoom`, while country names are loaded from a TSV file and attached as SVG title tooltips.

IIgor Borzunov
85% match