Skip to main content
SimilarExport ZIP
100%

Cheap Tricks for Interaction

✓ Published1🌍 Public
CChooo4u
Last edited Sep 26, 2018
Created on Sep 26, 2018

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.

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 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`.

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
92% match
Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map, where hovering over a country highlights it in red and reveals its name in a tooltip. The map uses a natural Earth projection rendered as SVG paths, with a blue sphere background. Interaction is powered by D3's `zoom` module for pan and zoom, while country boundaries and names come from the `world-atlas` dataset loaded via D3's `tsv` and `json` helpers. The `topojson` library converts the raw topology data into geoJSON features for rendering.

Jjons288
91% match
Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map rendered in SVG, with country boundaries displayed in light green and a blue sphere backdrop. Users can zoom and pan the map using their mouse or touch gestures, while hovering over a country highlights it in red and reveals its name as a tooltip. The visualization uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `zoom` behavior, with TopoJSON data from the world-atlas package. Country names are joined from a TSV file using ISO numeric codes, and the map is drawn from TopoJSON features converted with `feature`.

Vveagy
91% 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
91% match
Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map rendered with SVG, where hovering over a country highlights it in red and zooming is enabled through mouse or touch gestures. The visualization uses D3 v5’s `d3.zoom` to apply a transform to a group element, while countries are drawn using `d3.geoPath` with a natural Earth projection. Geographic data comes from the world-atlas TopoJSON and TSV files, which supply country boundaries and names for tooltips.

Rrealperoxid
90% match
Loading thumbnail…

Cheap Tricks for interaction

This example shows an interactive world map visualization that renders countries as light green polygons on a blue sphere. Hovering over any country changes its fill color to red and displays the nation’s name via a tooltip. The map is built using D3 (d3.v5) with d3.geoPath and a d3.geoNaturalEarth1 projection, combining TopoJSON and TSV data from the world-atlas package. User interaction is enhanced by d3.zoom, enabling pan and zoom transformations on the SVG group.

Hhugomell
90% 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
90% match