100%

A different D3 map

✓ Published0🌍 Public

Last edited Mar 24, 2020

Created on Mar 24, 2020

This example creates an interactive orthographic world map in D3 v5 where points from a SPARQL query are plotted as animated circles. The visualization shows a black sphere with goldenrod country outlines, while white circles representing museum locations fade and bounce into place based on their latitude and longitude. The map uses `d3.geoOrthographic` projections, `d3.geoPath` for country features, and `topojson.feature` to load world-atlas data. Users can drag and zoom the globe, with `d3.drag` and `d3.zoom` handlers re-rendering the projection as needed.

AI-generated description

Creating a different map with data in d3

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

MIT Licensed

Similar vizzes

Loading thumbnail…

An interactive D3 map

An interactive orthographic world map visualizes geographic data from a SPARQL endpoint, plotting museum object locations as bouncing circles. The map rotates perspective using an orthographic projection, with countries rendered as goldenrod paths via `d3.geoPath` and TopoJSON data. Circle markers animate in sequentially with `transition.delay` and `d3.easeBounce`, while a black sphere backdrop highlights the globe's curvature. The visualization combines `d3.json` for map loading, `fetch` for querying the endpoint, and D3 v5's selection and transition APIs to create an engaging data-driven globe.

LLaurens

91% match

Loading thumbnail…

A different D3 map

An interactive orthographic world map displays the geographic distribution of objects from the Dutch digital heritage collection, with roughly 1,500 locations sourced via a SPARQL query to the Network Digital Heritage endpoint. The globe renders country boundaries using `d3.geoPath` with TopoJSON data from World Atlas, while white circles representing item coordinates appear with staggered, bouncing transitions. Users can drag to rotate the sphere or scroll to zoom, with both interactions updating the projection via `d3.drag` and `d3.zoom` to trigger re-rendering.

BBryan Ray

88% 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_

87% match

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

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

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

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

85% match

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

85% match