100%

D3 map

✓ Published0🌍 Public

Last edited Nov 14, 2019

Created on Nov 14, 2019

Forked from 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.

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 using Natural Earth data, with goldenrod countries and a black sphere, onto which white circles representing locations from a SPARQL query are animated. The map uses d3.geoPath with a geoNaturalEarth1 projection. Data is fetched from a live SPARQL endpoint, and circles are rendered as SVG elements with a transition delay for sequential appearance. The code relies on d3.json, d3.select, and topojson.feature for processing, with d3.easeBounce controlling the animation.

MManoukK

92% 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

92% match

Loading thumbnail…

D3 map

Semicircles animate onto a natural Earth projection, marking 1500 museum objects from a Dutch digital heritage SPARQL endpoint by their geographic coordinates. D3’s `geoPath` and `geoNaturalEarth1` render country boundaries from TopoJSON, while `fetch` retrieves and parses the query results. Circles use `transition().delay().ease(d3.easeBounce)` to pop in sequentially, overlaid on goldenrod countries and a black sphere.

Kkimgarrard

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

D3 map visualizes museum object locations on a natural Earth projection, plotting over 1,500 coordinates from a SPARQL query against the Network Digital Heritage dataset. The map renders countries as goldenrod paths using `d3.geoPath` and `topojson.feature`, then animates white circles bouncing onto each location with staggered `transition.attr` delays. Built with d3.v5 and SVG, it uses `geoNaturalEarth1` for projection and fetches live JSON data from the dataset endpoint.

LLaurens

91% match

Loading thumbnail…

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.

RRoyCsuka

90% 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

89% 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