Skip to main content
SimilarExport ZIP
100%

Cheap Tricks for Interraction

✓ Published1🌍 Public
Ooptimizeresume
Last edited Jan 12, 2021
Created on Jan 11, 2021

A world map displays country outlines as light green paths with black strokes against a dark blue sphere. Hovering over any country turns it red, providing immediate visual feedback. The visualization uses D3.js v5 with the geoNaturalEarth1 projection and geoPath to render geographic features, while topojson processes the GeoJSON data. The dataset comes from the world-atlas package, loaded via JSON and TSV files that map ISO codes to country names.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

Cheap tricks for interaction

A world map rendered with D3's geoNaturalEarth1 projection and geoPath displays country boundaries in green on a dark blue sphere. Zooming is enabled through D3's zoom module, which applies an SVG transform to the map group. Hovering highlights individual countries. Country names come from a TSV file joined to TopoJSON geographic data, with tooltips provided by SVG title elements.

Jjlongwellchc
91% match
Loading thumbnail…

Cheap Tricks for Interactions

This visualization displays a world map using a natural Earth projection, with countries rendered as light green SVG paths that turn red on hover. The map loads geographic data from the world-atlas TopoJSON and TSV files, joining country names via ISO codes. Users can pan and zoom the map using d3.zoom, which applies a transform to the group containing all country paths. The sphere background is filled blue, and tooltips showing country names appear through SVG title elements.

BBazarbayevManas
91% match
Loading thumbnail…

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

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

Cheap Tricks for Interaction

A world map rendered with SVG paths displays countries in light green against a blue sphere, with red highlighting on hover. The visualization uses D3 v5’s geoNaturalEarth1 projection and geoPath to draw geographic features from TopoJSON world-atlas data, while country names come from a TSV file. Pan and zoom interaction is implemented via d3.zoom, applying transforms to a group element. Tooltips are provided by SVG `<title>` elements showing each country’s name.

Ggcappadaniel
91% match
Loading thumbnail…

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

Cheap Tricks for Interaction

This interactive map displays world countries as light-green SVG paths on a blue sphere, using a natural Earth projection and a 50m resolution TopoJSON dataset from the world-atlas package, with country names loaded from a matching TSV file. Tooltips reveal country names via SVG title elements, while hovering turns countries red. The visualization supports pan and zoom through d3.zoom, which applies an SVG transform to a group containing all country paths. The implementation uses d3.geoPath, d3.geoNaturalEarth1, and topojson.feature for map generation.

Zzlastefcia
90% match