Skip to main content
SimilarExport ZIP
100%

Cheap Tricks for Interaction

✓ Published0🌍 Public
CChooo4u
Last edited Mar 29, 2019
Created on Sep 26, 2018

This example demonstrates interactive annotation on a natural Earth projection world map. Clicking anywhere places a scaled pointer marker that fades in via a D3 transition, while holding Ctrl and clicking a marker removes it. The map is rendered from TopoJSON world-atlas data using `d3.geoPath`, with pan and zoom handled by `d3.zoom`. The pointer shape is defined as an SVG symbol, and mouse events rely on `d3.event` and `d3.mouse`.

AI-generated description

Since meeting a problem when trying to select multiple countries, I choose to add a landmark on the world map by clcking. Thanks to the tutorial:D3.JS TUTORIAL: MOUSE EVENTS HANDLING

MIT Licensed

Similar vizzes

Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map where users can click to place blue pointer markers anywhere on the globe. The map renders countries from TopoJSON data using d3.geoPath with a natural Earth projection. Click handlers use d3.mouse to capture coordinates and append SVG `<use>` elements referencing a predefined pointer icon. The visualization also incorporates d3.zoom for panning and scaling, with country names displayed via hover titles from a TSV dataset.

CChooo4u
93% match
Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map where clicking anywhere on the SVG injects randomly sized circles onto the canvas, while hovering over individual countries highlights them by changing fill color using CSS. The visualization renders country boundaries from TopoJSON world-atlas data via a natural Earth projection in d3.geoPath, and implements pan-and-zoom controls through d3.zoom. The map itself uses svg elements, with mouse interaction handled through d3.mouse to capture click coordinates, and the underlying country names are loaded from a TSV file.

CChooo4u
89% match
Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates interactive pan and zoom on a world map, with countries highlighted in red on hover and tooltips displaying country names via SVG `<title>` elements. It uses a natural Earth projection (`geoNaturalEarth1`) and renders geographic features with `d3.geoPath`. The map loads world-atlas TopoJSON data and merges it with TSV country names, while the zoom behavior is implemented through `d3.zoom` applied to an SVG group.

HHe Jianfeng
89% match
Loading thumbnail…

Cheap Tricks for Interaction

This example shows a world map rendered with D3 v5, using Natural Earth projection and TopoJSON data. Users can pan and zoom the map via d3.zoom. Hovering over a country turns it red, with country names available as tooltips via SVG `<title>` elements. The code uses d3.geoNaturalEarth1, d3.geoPath, and d3.event for interactions.

KKumhee
88% match
Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map with zooming and panning controlled by the mouse. Hovering a country turns it red, and a tooltip displays the country’s name. Built with D3 v5, it uses `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate the country shapes, and the `zoom` behavior from the `d3` module to apply transforms on a zoom event. The map draws a blue sphere background and green countries, using TopoJSON shape data and TSV country names from the `world-atlas` package.

WWouterero
88% match
Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates how to enhance a natural Earth projection map with basic interactive affordances. Users can pan and zoom the world map, and hovering over any country highlights it in red. The map renders geographic data from the World Atlas TopoJSON and TSV datasets using `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.zoom`. Country names are joined from the TSV file and displayed as SVG `<title>` tooltips. Styling relies on CSS hover effects while the zoom behavior applies SVG group transformations.

XXenos Panagiotis
88% match
Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map where hovering over a country highlights it and clicking selects it, turning it red. The visualization uses the D3.js library, specifically `d3.geoNaturalEarth1` for the map projection and `d3.geoPath` for rendering country boundaries. It loads geographic data from the `world-atlas` package via `d3.json` and `d3.tsv`, using `topojson` to convert the TopoJSON features. The map supports zooming through the `d3.zoom` API, which dynamically transforms the SVG group containing the paths.

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