Skip to main content
SimilarExport ZIP
100%

Cheap Tricks for Interaction

✓ Published1🌍 Public
JJuyeonee
Last edited Aug 10, 2021
Created on Aug 10, 2021

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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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

Cheap Tricks for Interaction

This interactive world map displays countries in light green with black borders, highlighting them in red on hover. It uses a geographic projection to render the map and provides zooming capabilities through the `d3.zoom` API, which applies a transformation to the map group on zoom events. Country boundaries are drawn using `d3.geoPath` with the `geoNaturalEarth1` projection, and country names are retrieved from a TSV file while geometry comes from a TopoJSON dataset, processed via the `topojson.feature` function.

MMaciek Sitkowski
95% match
Loading thumbnail…

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

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

cheap tricks for interaction

This interactive map projection displays world countries over a dark blue sphere using D3.js v5 and topojson. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render geographic features, loading country boundaries from the world-atlas 50m dataset. Users can pan and zoom the map via d3.zoom event handling, which applies an SVG transform to the map group. Country names appear as tooltips on hover, derived from the accompanying TSV file, while the green country fill changes to red on mouse-over through CSS hover states.

YYedrup
95% match
Loading thumbnail…

Cheap Tricks for Interaction

This interactive map displays world countries colored in light green against a blue ocean, with hover effects highlighting each country in red. The visualization uses a natural Earth projection realized through d3.geoPath and d3.geoNaturalEarth1, rendering geographic data from the world-atlas TopoJSON dataset alongside names from its accompanying TSV file. Users can pan and zoom the map using d3.zoom, which applies transformations to the entire group of country paths. Tooltips showing country names appear via SVG title elements appended to each path.

Ssaatraju
95% 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
95% match