100%

D3 map

✓ Published1🌍 Public

Last edited Nov 14, 2019

Created on Nov 13, 2019

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

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 displays a natural Earth projection world map with photo thumbnails plotted at geographic coordinates. It queries the Network Digital Heritage SPARQL endpoint for image URLs and latitude/longitude pairs, then renders the images as SVG elements using d3.geoPath and d3.geoNaturalEarth1. The map itself loads TopoJSON world boundaries from the world-atlas package. Hovering over an image appends a text label via an event handler. The visualization uses d3.json for asynchronous data loading and d3-selection for DOM manipulation.

Kkimgarrard

91% match

Loading thumbnail…

D3 map

This visualization displays a world map with images of photographs positioned over the countries where they were taken. The map uses D3.js and the topojson library to render geographic boundaries, while a SPARQL query retrieves data from the Netwerk Digitaal Erfgoed API. D3's `geoNaturalEarth1` projection and `geoPath` generate the map, and fetched image URLs are plotted as SVG images at coordinates derived from each photo's latitude and longitude.

Kkimgarrard

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

90% match

Loading thumbnail…

D3 map

This example visualizes a world map with photographs plotted at their geographic coordinates. Built with D3.js and TopoJSON, it loads a Natural Earth map and renders it as SVG paths using `geoNaturalEarth1` and `geoPath`. It fetches sample photo data (with latitude, longitude, and image URLs) from a SPARQL endpoint, then places clickable thumbnail images on the map, projecting coordinates with the same projection. The map supports zooming and panning via `d3.behavior.zoom`.

AArun Pratap

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

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

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

89% match

Loading thumbnail…

D3 map

This example visualizes a world map with photos plotted as small images at their geographic coordinates, sourced from a SPARQL query against the Netwerk Digitaal Erfgoed API. The map uses the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with country boundaries drawn from TopoJSON. Photo thumbnails are placed as SVG `image` elements at projected latitudes and longitudes, and users can hover over them to see titles and enlarged details. The visualization supports zooming through `d3.zoom`.

Kkimgarrard

89% match