Messing around

100%

Messing around

✓ Published0🌍 Public

Last edited Aug 15, 2025

Created on Aug 15, 2025

This interactive map displays 100 randomly generated consultation points across South Africa, animating their appearance over a 30-day time window. Using a D3 Mercator projection with a TopoJSON world map, it renders the country outline as a subtle blue overlay and draws each point on a Canvas layer with glowing trails that fade based on age. Play/pause controls and a time slider let viewers scrub through the temporal sequence. The visualization combines React state management with D3's timer, scaleTime, and geoPath APIs alongside lucide-react icons for interface controls.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Map Tutorial

This visualization presents an interactive world map using a Mercator projection, rendered as SVG paths with animated zooming capabilities. Built with D3 v7 alongside the d3-geo and topojson libraries, the map displays countries from the world-atlas 110m JSON dataset as black-filled paths with whitesmoke borders. When users click a country, the map smoothly transitions and scales to center on that region, using d3.geoPath projections and transition animations with cubic easing. Clicking the same country again resets the view to the full world map.

Llupica.matthew@gmail.com

76% match

Loading thumbnail…

Interactive Map

An interactive world map rendered as an SVG using D3.js, with pan and zoom controls. The map displays countries as gray polygons with dark borders, and allows users to click on a country to highlight it and display its label. It uses d3.geoEquirectangular for projection, d3.geoPath for rendering, and the d3.zoom behavior for interactive navigation. The map data comes from a TopoJSON file, and the visualization also responds to window resizing by recalculating zoom limits and centering the view.

CChooo4u

75% match

Loading thumbnail…

Interactive Tricks

This interactive map displays world countries using a natural Earth projection, with hover effects that change country colors to pink and tooltips showing country names. The visualization supports zooming and panning through d3.zoom, applied to the SVG group containing all geographic paths. It uses d3.geoPath with geoNaturalEarth1 projection, loads TopoJSON data from world-atlas, and merges country names from TSV data using reduce. The code leverages D3 v5 selection, JSON, TSV, and zoom APIs, rendering geographic features as SVG paths with CSS styling for interactivity.

Llrakla

74% match

Loading thumbnail…

Interactive world map

This interactive world map displays country boundaries with hover highlighting and zoom/pan capabilities. Built with React and D3 v5, the visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render SVG paths from TopoJSON data in the world-atlas package. A zoom behavior enables interactive transformations, while country names from a TSV file appear as tooltips via SVG `title` elements. The map fills countries in green and the ocean sphere in blue, with hover states turning countries red.

Eevapavlinek

74% match

Loading thumbnail…

Sized Points on a Map

This interactive world map displays populated places with over 50,000 residents as sized points, using an orthographic projection that rotates and zooms when users click on individual countries. Built with React and D3, the visualization loads city coordinates from Simplemaps and country boundaries from World Atlas TopoJSON. The code uses d3.geoOrthographic, d3.geoPath, and topojson.feature to render landmasses, graticules, and water, while click interactions trigger transition.attrTween animations that interpolate projection rotation and scale to center the selected country.

MMaciek Sitkowski

74% match

Loading thumbnail…

Lets build a map with interactions!

This example shows an interactive world map rendered with SVG, where each country displays its name as a tooltip on hover. The visualization uses D3 v5 to load TopoJSON and TSV data from the world-atlas package, projecting the geographic features with `d3.geoNaturalEarth1` and drawing paths via `d3.geoPath`. Zooming and panning are enabled through `d3.zoom` with an event listener that applies transforms to the map group. Countries are styled with CSS, turning grey on hover, while a fixed blue sphere represents the globe's background. React manages the page structure, though D3 handles all data binding and interactions.

JJoseph Popoola

74% match

Loading thumbnail…

An interactive D3 map

This interactive D3 map displays a world map with countries colored pink and overlaid with green-bordered circles, visualizing numerical values from a CSV dataset via a color-coded choropleth. Built with React and D3 v5, it loads GeoJSON topology data from the world-atlas package and uses topojson’s feature and mesh functions to render land and country boundaries as SVG paths, while the data CSV is joined by ISO country codes for the visual encoding.

Nnouralkhoury

73% match

Loading thumbnail…

HTML Starter

This example displays an interactive world map with countries colored according to their numeric ID modulo 10, using a spectral color scale to distinguish the resulting categories. The visualization uses D3 v5 with a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, while loading country boundaries from a topojson file. A custom color legend with circles and text labels is built using D3 selections and scales, and the map supports panning and zooming through `d3.zoom`. Population data from a CSV file is not directly displayed; instead, country names and their category values appear as tooltips on click.

Kkasalwelengwe@gmail.com

73% match