Cheap Tricks for Interaction

Cheap Tricks for Interaction

This interactive globe displays world countries colored red, with a zoom and pan interface that transforms the map projection. The visualization merges country boundaries from the world-atlas TopoJSON dataset with demographic attributes joined from tabular TSV data, matching records by ISO country codes. Using d3.geoPath with the Natural Earth projection, the code renders SVG paths and enables hover tooltips showing country names via SVG `<title>` elements. The zoom interaction relies on d3.zoom's event system, updating the group's transform attribute. The globe's sphere is filled blue, while countries use a red fill with a distinct hover state.

ZZhengyan Yu

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

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

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

Cheap Tricks for Interaction

This interactive map displays world countries as red-filled polygons on a blue sphere, allowing users to click any nation to highlight it. Built with D3 v5 and TopoJSON, it uses a natural Earth projection and loads geographic data from the World Atlas. The visualization relies on `d3.geoPath` for rendering, `d3.zoom` is not implemented, and click events trigger a `render` function that updates fill colors. Country names are derived from a TSV file and attached as SVG `<title>` tooltips.

Jjons288

Cheap Tricks for Interaction

This map visualization presents an interactive world atlas, highlighting countries in green against a blue sphere. Hovering over a country turns it red and reveals its name in a tooltip. The example uses D3.js v5 for SVG rendering, specifically employing `geoPath` and `geoNaturalEarth1` for map projection, `zoom` for interactive panning and scaling, and TopoJSON's `feature` to process geographic data. Country names are matched from a TSV file from the `world-atlas` package, which also supplies the GeoJSON data.

Lloicvdk

Cheap Tricks for Interaction

This interactive map displays world countries colored in light green, with hover states that turn countries red and click selections that highlight them in black. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render TopoJSON data from the world-atlas package, while country names and population estimates come from accompanying TSV data. Pan and zoom functionality is implemented through d3.zoom, and country details appear via SVG title tooltips.

MMihir Sawant

Cheap tricks for interaction

A world map rendered with D3's geoNaturalEarth1 projection presents countries in light green against a blue sphere. The visualization loads country boundaries from the world-atlas TopoJSON and TSV files, using d3.geoPath to generate SVG paths. Interaction is handled via D3's zoom function, which applies a scale and translate transform to the map group on zoom events, while a CSS :hover rule turns countries red when moused over.

RRiccardo Pressiani