Its finally working

100%

Its finally working

✓ Published1🌍 Public

Last edited Oct 10, 2018

Created on Sep 26, 2018

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.

AI-generated description

Click the countries and turn them colors!

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

Jjons288

89% match

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

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

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

84% match

Loading thumbnail…

D3.js Map

This map visualization displays world countries on a natural Earth projection, allowing users to click individual countries to toggle their fill between light green and red. Built with D3.js v5 and TopoJSON, it loads geographic data from the world-atlas package and country names from a TSV file. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for rendering, with d3.zoom enabling pan and zoom interactions on the SVG canvas.

Ffloresh

84% match

Loading thumbnail…

Interactive maps

This interactive map displays world countries using a natural Earth projection, with hover states that highlight individual nations in red. The visualization loads geographic data from a world-atlas TopoJSON file and renders it as SVG paths, with country names appearing as tooltips. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `d3.zoom` for panning and zooming. The map also includes a dark blue sphere background, while CSS styles control the country and hover fill colors.

Ddaanasma

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

83% match

Loading thumbnail…

Interactive Map

This interactive map displays world countries on a natural Earth projection, rendered as SVG paths using d3-geo’s `geoNaturalEarth1` and `geoPath`. It loads geographic data from the World Atlas TopoJSON and matches country names via TSV metadata. Users can pan and zoom using d3.zoom, which applies a transform to the map group. Countries are styled with silver fills and turn orange on hover via CSS.

FFhouston17

83% match