100%

D3 map

✓ Published0🌍 Public

Last edited Nov 14, 2019

Created on Nov 14, 2019

Forked from D3 map

This example visualizes a world map with data-driven location points, plotting over a thousand geographic coordinates as animated circles on a natural Earth projection. It uses D3 v5 with `d3.geoNaturalEarth1`, `d3.geoPath`, and TopoJSON’s `feature` to render country boundaries from the World Atlas dataset, while querying a SPARQL endpoint from the Dutch Digital Heritage Network for latitude and longitude data. Each circle appears sequentially with a bounce ease transition, growing from zero to a fixed radius to show the distribution of the dataset across continents.

AI-generated description

Creating a map with data in d3

This example will show how to load data into d3 to create a worldmap

I've based this off of Curran's map example

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 map

This example visualizes a world map with animated points representing geographic locations from a SPARQL query against the Network Digital Heritage dataset. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries from TopoJSON data. After fetching and parsing the query results, circles are appended to the SVG and animated with staggered `transition.attr` delays, using `d3.easeBounce` to grow each point from zero to its full radius. The rendering relies on SVG elements and the D3 v5 library, including `select`, `json`, and `feature` from TopoJSON.

DDaanKos

93% match

Loading thumbnail…

D3 map

This example visualizes a world map with animated location markers derived from a SPARQL query against the Network Digital Heritage dataset. The map uses a natural Earth projection, with countries rendered as SVG paths via `d3.geoPath` and `topojson.feature`. Each data point is plotted as a circle whose radius transitions from 10px to 8px using a staggered delay and `d3.easeBounce`, creating a popping effect. The code loads world geometry from a TopoJSON file and fetches JSON results, converting latitude and longitude values before projecting them.

GGiovanniD_

91% match

Loading thumbnail…

D3 map

This example visualizes a world map using D3 v5 and TopoJSON, plotting museum object locations from a SPARQL query against the Netherlands Digital Heritage Network’s NMVW dataset. A natural Earth projection renders country boundaries and a black sphere, while white circles animate onto coordinates using `d3.geoPath` and `d3.easeBounce`. Each circle’s position is computed from latitude and longitude via the projection, with staggered transitions revealing the data points sequentially.

Kkimgarrard

91% match

Loading thumbnail…

D3 map

A world map uses D3’s geoNaturalEarth1 projection and geoPath to render country boundaries as SVG paths. Data points from a SPARQL endpoint—querying museum objects and their associated locations—are plotted as animated circles that bounce into place with a staggered transition delay. The map uses TopoJSON for geographical features and d3.json for loading. Each circle’s position is computed via the projection from longitude and latitude values, with a simple bounce easing to animate the radius.

CCoenmathijssen

91% match

Loading thumbnail…

D3 map

A world map visualizes the geographic distribution of museum objects by plotting animated, bouncing dots at their recorded locations. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and renders country boundaries with `d3.geoPath`. Data is fetched from a SPARQL endpoint and displayed as SVG circles, with each circle transitioning from zero radius to its final size using a staggered delay and `d3.easeBounce`. The map itself comes from the TopoJSON world atlas, processed with the `topojson` library.

RRoyCsuka

91% match

Loading thumbnail…

D3 map

A world map rendered with D3 shows a natural Earth projection of countries in goldenrod over a black sphere. Circles representing museum objects are plotted and animated with a staggered bounce-in effect using D3 transitions. The code uses `geoNaturalEarth1` and `geoPath` for geographic rendering, TopoJSON for country boundaries, and fetches SPARQL query results from a Dutch heritage dataset, mapping latitude and longitude coordinates to circle positions.

RRoyCsuka

90% match

Loading thumbnail…

D3 map

This example displays a world map with color-coded countries and circular markers positioned at geographic coordinates, each filled with a photographic image. It uses D3.js (v5) with the `geoNaturalEarth1` projection and `geoPath` to render the map, loading TopoJSON country boundaries from the world-atlas package. Data is fetched from a SPARQL endpoint via a query that retrieves images, titles, and latitude/longitude for cultural heritage objects. The code creates SVG patterns containing images and applies them as fills to circles positioned using the projection function.

Kkimgarrard

89% match

Loading thumbnail…

Fork of D3 map

This example presents a world map populated with animated data points sourced from a live SPARQL query (Netwerk Digitaal Erfgoed). It uses d3.geoPath and d3.geoNaturalEarth1 to render country boundaries via TopoJSON, then plots geographic coordinates as circles. The circles animate in sequence using d3 transitions with a bouncy ease, starting from zero radius. The visualization demonstrates loading external data, projecting coordinates, and adding motion to a static map.

AAMINU LAWAL

89% match