Fork of Cheap Tricks for Interaction

100%

Fork of Cheap Tricks for Interaction

✓ Published0🌍 Public

Last edited Aug 23, 2023

Created on Aug 19, 2023

Forked from Cheap Tricks for Interaction

This fork of the "Cheap Tricks for Interaction" example displays world countries on an orthographic projection, colored by continent using an ordinal color scale. The map is built with `d3.geoPath` and data from `world-atlas`, with country names from a matching TSV file. A custom drag interaction, implemented via `d3.drag`, allows users to move a temporary green rectangle across the screen, while the underlying sphere rotation code remains commented out.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Cheap Tricks for Interaction

A fork of a D3.js interaction example displays a world map using the Natural Earth projection with countries rendered as SVG paths. The visualization loads geographic data from the `world-atlas` package, merging country names from a TSV file with geometry from a TopoJSON file. Pan and zoom interactions are handled by `d3.zoom` with the `event.transform` updating the map group. Hovering highlights countries in red via CSS, and tooltips show country names using `d3.geoPath` for projection and the `.title` element.

Bbluelionz7

90% match

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This fork displays a world map with country boundaries, where hovering over any country highlights it in black. It supports zooming and panning through mouse or touch gestures. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath to render the map, and d3.zoom for interaction. Country names come from a TSV file, while geographic shapes use TopoJSON from the world-atlas package.

EEgxr41k

90% match

Loading thumbnail…

Fork of Cheap Tricks for Interaction1

This interactive map of the world renders landmasses as SVG paths using the `d3.geoPath` and `d3.geoNaturalEarth1` projections, with country names provided by TSV data loaded via `d3.tsv`. A `d3.zoom` control lets users pan and scale the map, updating the SVG group's transform on each event. Countries turn red on hover, and the topojson library processes the GeoJSON data from the world-atlas package.

Ddaniellopez3377

89% match

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This fork demonstrates interactive map exploration using a zoomable, hover-highlighted world map rendered with SVG. It visualizes country boundaries from the World Atlas TopoJSON dataset, projected using d3.geoNaturalEarth1 and drawn with d3.geoPath. The code uses d3.zoom to enable pan and zoom transformations, and CSS :hover styling turns countries red. A title tooltip displays each country’s name, sourced from the accompanying TSV file and matched by ISO numeric ID.

Ccristian-media-animation

89% match

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This interactive map displays world countries on a natural Earth projection, with a blue sphere background and light green landmasses that turn red on hover. Built with d3.geoPath and d3.geoNaturalEarth1, it loads geographic data from the world-atlas package, combining TopoJSON country boundaries with TSV names. The visualization implements pan and zoom functionality through d3.zoom, updating the SVG group’s transform on zoom events. Country names appear as tooltips via SVG title elements.

Mmavercikalvin

89% match

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows an interactive world map rendered in SVG using the natural Earth projection. Users can pan and zoom by dragging or scrolling, with the viewport transform applied to a group element. Country boundaries and names come from world-atlas TopoJSON and TSV data. The visualization uses d3.geoPath for geographic paths, d3.zoom for interaction, and CSS hover states that turn countries red. A sphere outline and background fill complete the globe-like appearance.

Lleongtini

89% match

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This interactive world map displays country boundaries on a globe, with countries colored light green and the sphere blue. Hovering over a country turns it red, and users can zoom and pan the map. The visualization uses d3.geoPath with geoNaturalEarth1 projection, d3.zoom for interaction, and topojson.feature to convert TopoJSON data from the world-atlas package. Country names are loaded from a TSV file and attached as tooltips via SVG titles.

NNICHAPA

89% match

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows a world map with countries rendered in light green, where clicking a country turns it red, and users can zoom and pan the view. It uses an equirectangular-like natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw SVG paths from TopoJSON data loaded from the world-atlas package. Country names come from a TSV file, and a `d3.zoom` handler applies transforms to the map group. A spherical background and active-state styling complete the interactive visualization.

Ffrozengem397

89% match