Skip to main content
SimilarExport ZIP
100%

Cheap Tricks for Interaction

✓ Published0🌍 Public
LLeoBergqvist
Last edited Feb 21, 2020
Created on Feb 21, 2020

This interactive map shades countries by economic classification using a categorical color scale, with a clickable legend that filters the visible categories. The visualization uses d3.zoom for panning and zooming, d3.geoNaturalEarth1 with d3.geoPath for geographic projection, and SVG paths with title tooltips for hover details. Data comes from the world-atlas TopoJSON dataset joined with TSV metadata via d3.tsv and topojson.feature. The colorLegend module builds a custom SVG legend with circles and text, while CSS hover effects highlight individual countries.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Cheap Tricks for Interaction

A world map colored by economy type uses D3 v5's geoNaturalEarth1 projection and d3.geoPath to render country boundaries from TopoJSON data. Hovering highlights countries in red via CSS, while a reusable colorLegend function displays a clickable legend with colored circles. The map supports pan and zoom through d3.zoom, with the visualization powered by SVG rendering and a sequential spectral color scale.

LLeoBergqvist
93% match
Loading thumbnail…

Cheap Tricks for Interaction

This interactive map uses a natural Earth projection with D3’s `geoPath` and `geoNaturalEarth1` to color countries by economic classification, employing a spectral `scaleOrdinal` and a custom color legend with circles and text. Zooming is enabled via `d3.zoom`, while hovering highlights countries in red through CSS. World map geometry comes from TopoJSON’s `world-atlas`, enriched with metadata from a TSV file. The example demonstrates simple, reusable interaction patterns—tooltips via SVG `<title>` elements and a hover effect—without complex brushing or transitions.

LLeoBergqvist
92% match
Loading thumbnail…

Cheap Tricks for Interaction

This interactive map uses a natural Earth projection with a color scale to display world economies, with country names and economic classifications shown as tooltips on hover. The visualization implements zoom and pan functionality through D3's zoom behavior, while a hover effect turns countries red via CSS. Data comes from the World Atlas TopoJSON and TSV files, processed with TopoJSON's feature method, and rendered as SVG paths using d3.geoPath with d3.geoNaturalEarth1.

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

Cheap Tricks for Interaction

This example shows an interactive world map colored by economic classification, with a categorical color legend. Users can pan and zoom the map using mouse or touch gestures, and hovering over a country highlights it and reveals its name and economic group via a tooltip. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering GeoJSON features, and d3.zoom for interaction. d3.scaleOrdinal with schemeSpectral maps economic categories to colors, while the legend is custom-built from SVG elements.

Ss-janibekova
91% match
Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map colored by economic classification, using a sequential spectral color scale. Users can pan and zoom the map via d3.zoom, which applies a transform to the geographic group. Hovering highlights individual countries with a red fill via CSS. The visualization loads country boundaries from TopoJSON and metadata from TSV, projecting them with d3.geoNaturalEarth1 and rendering paths with d3.geoPath. It uses d3.scaleOrdinal and d3.schemeSpectral to map economic data to colors, with tooltips showing country names and values.

IIsabel
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

This example displays a world map colored by each country’s economy category, using a natural Earth projection and D3’s `geoPath`. A hover effect highlights individual countries in red, while `d3.zoom` enables pan and zoom interactions that transform the entire map group. The map is rendered as SVG, with data loaded from the World Atlas TopoJSON and TSV files, and country names appear via native `<title>` tooltips. The code uses `scaleOrdinal` with `schemeCategory10` for the color scale and topojson’s `feature` method for geometry.

Ggcappadaniel
91% match