Interaction

100%

✓ Published1🌍 Public

Last edited Nov 7, 2018

Created on Sep 22, 2018

Forked from Cheap Tricks for 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.

AI-generated description

When hovering on countries, they will all be selected, while when click a specific country, then there will be only one country being selected.

I actually don't tackle the task. I have tried the method in Bowl of Fruit - Click to Select (https://vizhub.com/NTCHANG1289/17953e2e1e864c4e8ab5a637553dec49), but I didn't successfully get any result from the map.

The method I used in this one is found on the website Making a map using D3.js

But I am not really sure: is such method more like the cheap tricks example?

I would say this is the most difficult assignment as to now~~~

MIT Licensed

Similar vizzes

Loading thumbnail…

Interaction

A D3.js visualization displays a world map using a natural Earth projection, with countries rendered as SVG paths colored in bright green against a dark sea. Hovering a country turns it red and reveals its name via a tooltip. The map is built with `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.zoom` for interactive panning and zooming, while `d3.tsv` and `d3.json` load country names and geometries. A `topojson` feature layer draws each country, and CSS handles hover styling.

MMatan

91% match

Loading thumbnail…

Map Interactions

This example displays an interactive world map using a natural Earth projection, with countries rendered as light green SVG paths that turn teal on hover. The visualization combines world-atlas TopoJSON data with a TSV file containing country names, which are added as native SVG `<title>` tooltips. The map supports pan and zoom through d3.zoom, while d3.geoPath and d3.geoNaturalEarth1 handle geographic projections. Hover effects use CSS pseudo-classes, and the map includes a blue sphere background for context.

Ggilbster

89% match

Loading thumbnail…

interactions!

This interactive world map displays country boundaries using a natural Earth projection, with countries rendered in light green and hovering states highlighted in red. The visualization loads geographic data from the world-atlas TopoJSON dataset, merging it with a TSV file to map ISO numeric codes to country names for tooltips. Built with D3 v5, it uses `d3.geoPath` and `d3.geoNaturalEarth1` for projection and path generation, while `topojson.feature` converts the TopoJSON topology into GeoJSON features. The sphere background appears blue, with semi-transparent black strokes outlining each country.

Kkaviya-ds

89% match

Loading thumbnail…

Map Interaction Assignment

This visualization displays a world map using a natural Earth projection, with countries shaded in light green and oceans in blue. Clicking a country triggers an interaction where the selected country turns red, highlighting the user’s choice. The map is rendered as SVG, with geographic data from the world-atlas TopoJSON dataset and country names loaded from a TSV file. The code utilizes d3.geoPath, d3.geoNaturalEarth1, and d3.zoom, along with topojson.feature to process the data.

MMukund Khandelwal

89% match

Loading thumbnail…

Tricks for Interaction

This visualization displays a zoomable, natural Earth projection map with countries colored light green. Users can pan and zoom the map using the d3.zoom behavior, which applies a transform to the SVG group containing all geographic paths. The map data comes from the world-atlas TopoJSON files, with country names joined from TSV data. Hovering over any country turns it red, implemented through CSS :hover rules. The visualization uses d3.geoPath, d3.geoNaturalEarth1, and the topojson.feature API to render the geographic features.

Mmla341

88% match

Loading thumbnail…

World Map

This example displays an interactive world map using a natural Earth projection, with countries rendered as filled paths that highlight red on hover. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, joining country names via ISO codes. It uses d3.geoPath with geoNaturalEarth1 for projection, d3.zoom for pan and zoom interactions, and TopoJSON’s feature method to convert topology to GeoJSON. The SVG sphere appears blue, while countries are light green with black strokes.

CChinzorigt Ganbat

88% match

Loading thumbnail…

Map Interaction

This example displays an interactive world map rendered with SVG using the d3-geo-projection library, specifically the geoNaturalEarth1 projection. Countries from the world-atlas TopoJSON dataset are drawn as paths with d3.geoPath, each featuring a tooltip showing the country name. The map supports pan and zoom through d3.zoom, which applies a transform to the map group on events. Hovering over a country changes its fill color to red via CSS, while the sphere background uses a distinct blue fill.

WWayne716

88% match

Loading thumbnail…

World Map interaction

This interactive world map displays country boundaries over a blue sphere, with countries highlighted in green and a darker shade on hover. It uses D3’s geoPath and geoNaturalEarth1 projection to render geographic features from a TopoJSON dataset provided by world-atlas. The zoom behavior, implemented via the d3.zoom API, adjusts the SVG group’s transform during navigation. The visualization renders as SVG within an HTML page, and the code relies on the topojson library’s feature function to extract country polygons.

EEmma

88% match