Fork of Cheap Tricks for Interaction1

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

Fork of Cheap Tricks for Interaction

This map demonstrates interactive pan and zoom on a Natural Earth projection of the world, with country boundaries rendered as SVG paths and tooltips showing country names on hover. The visualization loads world-atlas TopoJSON data and a TSV file mapping ISO country codes to names, then draws countries using `d3.geoPath` with a `geoNaturalEarth1` projection. The zoom behavior is implemented via `d3.zoom`, which applies a transform to the SVG group, while hover styling changes country fill to red.

Ccharliemok

Fork of Cheap Tricks for Interaction

This interactive map visualizes world countries using a natural Earth projection, with hover highlighting and zoom controls. The visualization renders geographic boundaries as SVG paths, colored light green against a blue sphere, and displays country names as tooltips. It uses D3 v5's `geoNaturalEarth1` projection and `geoPath` for map generation, with data from the world-atlas package. The zoom functionality is implemented via D3's `zoom` event, while the `topojson` library's `feature` API processes the TopoJSON data.

CChase Hall

Fork of Cheap Tricks for Interaction

This interactive map displays world countries as SVG paths, with hover highlighting in red and a blue sphere background. Users can pan and zoom using d3.zoom, which applies transforms to the map group. The visualization loads world topology data from the World Atlas TopoJSON and country names from a TSV file, rendering with d3.geoNaturalEarth1 and d3.geoPath. The code uses d3.json and d3.tsv for data loading, and topojson.feature to extract country geometries.

RRahulChaitu999

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

Fork of Cheap Tricks for Interaction

This visualization displays a world map using a natural Earth projection, with countries colored in light green that turn red on hover. It supports zooming and panning through the d3.zoom behavior, which applies transformations to an SVG group element containing all geographic paths. The map is rendered with d3.geoPath and d3.geoNaturalEarth1, using TopoJSON and TSV data from the world-atlas package to associate country names with their shapes via tooltips. The code imports specific D3 modules and the topojson feature function to generate the geographic features.

DDonggov

Fork of Cheap Tricks for Interaction

This example shows an interactive world map rendered with SVG paths. It presents countries in light green against a blue spherical background, and hovering over a country turns it red. The visualization uses a D3 geoNaturalEarth1 projection with a geoPath generator to draw continents from a world-atlas TopoJSON dataset. The code imports from d3.js v5 and TopoJSON, and it handles zooming and panning through D3’s zoom interaction, which applies a transform to the map group on zoom events.

EErico Vasconcelos

Fork of Cheap tricks for interaction D3 version 5

This interactive map displays world countries using a Natural Earth projection, with hover highlighting and zoom-and-pan capabilities. The visualization renders SVG paths generated by `d3.geoPath` and `geoNaturalEarth1`, while `d3.zoom` applies transform updates to the map group. Country names come from a TSV file joined to TopoJSON geometry via `d3.json` and `topojson.feature`. Hover states change country fill colors, and the sphere background uses a distinct blue fill.

PPiotr Paszek