Map D3.js HW

100%

✓ Published0🌍 Public

Last edited Nov 5, 2018

Created on Sep 25, 2018

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.

AI-generated description

Kathleen Cachel Week 5 Homework

<br/> I found this page at [D3 in Depth](https://d3indepth.com/selections/) to be helpful in making the selection events. And these [code examples](https://github.com/d3/d3-selection) as well.

<br /> I would really like feedback on how to remove the Name when you deselect a country. When you click on a country that is selected I change it back to the unselected state, but the name still stays up. I fiddled with it, but was not able to get that working. I tried a remove etc. would love some pointers on that!

MIT Licensed

Similar vizzes

Loading thumbnail…

Map with Selectable Countries D3.js HW

This example shows a world map where users can click individual countries to select and deselect them, with the selected country’s name displayed above the map. The visualization uses D3 v5 with `geoNaturalEarth1` projection and `geoPath` to render geographic features from TopoJSON data sourced from the World Atlas. Click events toggle a yellow highlight on the selected country by modifying its fill and stroke styles, while a separate `div` element updates to show the country’s name from a TSV file. Pan and zoom interactions are enabled via `d3.zoom`.

KKCachel

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

90% match

Loading thumbnail…

Map with D3.js

This map visualization displays world countries on a natural Earth projection using D3.js and TopoJSON data from the world-atlas dataset. It renders an SVG sphere background and country paths filled with teal, which turn red on hover through CSS. The code employs D3 v6 features like `geoNaturalEarth1` and `geoPath` to project geographic coordinates, while `topojson.feature` extracts country boundaries from the loaded TopoJSON file. A tooltip showing each country’s name appears via appended `title` elements.

WWayne716

88% match

Loading thumbnail…

HW Map with Selectable Countries

This map visualizes world countries using a natural Earth projection, rendered with SVG paths via the d3.geoPath and d3.geoNaturalEarth1 APIs. The choropleth initially displays all countries in light green against a dark sphere. Clicking a country highlights it in a distinct green and displays its name in a fixed banner, allowing users to explore geographic identities interactively. Country names come from the world-atlas TSV dataset, joined to the TopoJSON geometries via their ISO numeric codes. The visualization also includes zoom functionality through the d3.zoom module, which applies a transform to the map group.

YYF

88% match

Loading thumbnail…

Lets make a map with D3.js

This example demonstrates an interactive world map where each country is a clickable path element, with country names available as tooltips on hover. The visualization uses D3.js v5 with the `d3.geoPath` and `d3.geoNaturalEarth1` projection to render geographic boundaries from the world-atlas TopoJSON and TSV datasets, which supply the country shapes and names. The map supports zooming and panning via the `d3.zoom` module, which updates the SVG group's transform attribute. Country hover states change fill color to red, highlighting the selected nation.

HHelenaShu

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

88% match

Loading thumbnail…

D3 World Map III

This example displays an interactive world map with countries rendered in light green against a light blue ocean. Users can pan and zoom the map using mouse or touch gestures, with a hover effect that highlights countries in red and reveals their names as tooltips. The visualization uses d3-geo with the geoNaturalEarth1 projection and d3.geoPath to draw SVG paths, while d3.zoom handles the interactive transformations. Geographic data comes from the world-atlas TopoJSON dataset, with country names loaded from a corresponding TSV file.

YYoung Song

88% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map rendered in SVG, with countries displayed in dark green against a dark blue sphere. Hovering highlights each country in red, and users can zoom and pan using the mouse. It uses D3 v5 with `d3.geoPath` and `d3.geoNaturalEarth1` for geographic projection, `d3.zoom` for interaction, and TopoJSON to load world boundaries. The map pulls country names from a TSV file paired with the world-atlas 50m JSON dataset.

Ffahmijaafar

88% match