Cheap Tricks for Interaction old version

100%

Cheap Tricks for Interaction old version

✓ Published1🌍 Public

Last edited Nov 20, 2020

Created on Nov 5, 2020

Forked from Cheap Tricks for Interaction

This interactive map visualizes world countries, highlighting each one in red on hover and displaying its name as a tooltip. Built with D3 v5 and the TopoJSON library, it projects geographic data using the Natural Earth projection (`geoNaturalEarth1`) and renders paths via `geoPath`. The visualization incorporates a zoom interaction (`zoom().on('zoom')`) that transforms the map group, with country names loaded from a separate TSV file that is joined to the GeoJSON shapes by ISO code.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Cheap Tricks for Interaction

This interactive map displays world countries as colored SVG paths on a globe, with country names shown as tooltips on hover. Built with D3 v5 and topojson, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` for generating vector outlines. A `d3.zoom` interaction enables pan and zoom transformations on the map group. Country names are joined from a TSV file (world-atlas 50m) using ISO numeric codes, and hover effects change fill to red via CSS.

Ssravyasona

94% match

Loading thumbnail…

Cheap Tricks for Interaction

This interactive map visualizes world countries using D3 v5 with a natural Earth projection, rendered as SVG paths with hover highlighting and zoom/pan capabilities. It loads geographic data from the world-atlas TopoJSON and country names from a TSV file, attaching tooltips via SVG `<title>` elements. The code uses `d3.geoPath`, `d3.geoNaturalEarth1`, `d3.zoom`, and `topojson.feature` to enable smooth interaction and clear country identification.

CCassie

94% match

Loading thumbnail…

Cheap Tricks for interaction

This visualization displays a world map using a natural Earth projection, with countries rendered as light green SVG paths that turn red on hover, accompanied by tooltips showing country names. The map is built with D3 v5, using `d3.geoPath` and `d3.geoNaturalEarth1` for projection, and TopoJSON for converting geographic data into features. It loads country boundaries and names from the world-atlas package (50m TSV and JSON files), and the rendering is done entirely in SVG. The zoom interaction is handled by `d3.zoom`, which applies a transform to the map group when the user presses and drags.

DDaniel García

93% match

Loading thumbnail…

Cheap Tricks for Interaction

This interactive map displays world countries with hover and click interactions. Hovering highlights a country and displays its name in a large text label above the map, while clicking locks the selection and turns the country red. The visualization uses D3 v5 with `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.zoom` to render and manipulate the SVG projection, pulling geographic data from TopoJSON world-atlas files.

Wwangjonathan

93% match

Loading thumbnail…

Cheap Tricks for Interaction

This interactive world map displays countries in light green with black borders, highlighting them in red on hover. It uses a geographic projection to render the map and provides zooming capabilities through the `d3.zoom` API, which applies a transformation to the map group on zoom events. Country boundaries are drawn using `d3.geoPath` with the `geoNaturalEarth1` projection, and country names are retrieved from a TSV file while geometry comes from a TopoJSON dataset, processed via the `topojson.feature` function.

MMaciek Sitkowski

93% match

Loading thumbnail…

Cheap Tricks for Interaction

This interactive map shows world countries colored in light green on a blue sphere, with countries highlighted in red on hover. It uses d3.geoPath and d3.geoNaturalEarth1 for geographic projections and d3.zoom for pan/zoom interaction, rendering in SVG. Country names appear as tooltips via appended title elements, with data sourced from the world-atlas 50m TSV and TopoJSON files. The code imports from the d3 and topojson libraries.

Iianleekq

93% match

Loading thumbnail…

Cheap Tricks for Interaction

This interactive map displays world countries colored in light green against a blue sphere, with hover highlighting in red. Built with D3.js v5 and topojson, it uses `d3.geoPath` with the `geoNaturalEarth1` projection to render geographic features. The map background includes a graticule sphere, and zooming is handled through `d3.zoom` with a transform event. Country names are loaded from a world-atlas TSV file and displayed as tooltips via SVG `<title>` elements.

JJuyeonee

93% match

Loading thumbnail…

Cheap Tricks for Interaction

This example presents an interactive world map using D3.js and TopoJSON. It displays country boundaries from the world-atlas 50m dataset, rendered as SVG paths using the `geoNaturalEarth1` projection and `geoPath`. The map supports zooming via the `zoom` function, which applies a transform to the grouped elements. Hovering over a country highlights it in red through CSS, and clicking the sphere logs an event to the console, while country names appear as tooltips from a TSV lookup file.

Vveagy

92% match