100%

D3 map

✓ Published1🌍 Public

Last edited Jul 21, 2023

Created on Jul 21, 2023

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

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

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

92% match

Loading thumbnail…

D3 map

This example displays a natural Earth projection world map populated with thumbnail images of photographs, each positioned by geographic coordinates derived from a SPARQL query against the Network Digital Heritage Netherlands API. The map is rendered as SVG using D3’s `geoPath` and `geoNaturalEarth1` projection, while country boundaries come from TopoJSON world-atlas data. Photographs are fetched, cleaned, and plotted as SVG `<image>` elements, with hover effects using CSS `mix-blend-mode`. The code leverages D3’s `json` loader and TopoJSON’s `feature` method.

BBryan Ray

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

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

89% match

Loading thumbnail…

D3 map

A world map rendered in SVG plots photographs from the Network of Digital Heritage (NDE) SPARQL endpoint as points on a natural Earth projection. The D3 visualization uses `d3.geoPath` and TopoJSON to draw country boundaries from the world-atlas dataset, while a second data layer queries the SPARQL API for photo metadata including latitude, longitude, and image URLs. The code attempts to overlay images as SVG patterns, though the final placement logic is commented out.

Kkimgarrard

86% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create an interactive world map using D3.js v5 and TopoJSON. It renders a natural Earth projection with country boundaries, showing country names as hover tooltips and enabling zoom and pan through d3.zoom. The visualization loads geographic data from the world-atlas package, combining TopoJSON geometry with TSV metadata for country names. The map uses an SVG rendering approach, with countries styled as light green polygons that darken on hover, all implemented through d3.geoNaturalEarth1, d3.geoPath, and d3.json.

Dddperdue

86% match

Loading thumbnail…

Let's make a map with D3.js

This example renders a world map using D3.js and TopoJSON, applying the natural Earth projection via `d3.geoNaturalEarth1` and drawing country boundaries with `d3.geoPath`. The SVG shows a blue sphere outline and light green countries with subtle black strokes. It loads country geometries from the world-atlas 110m TopoJSON dataset and converts them to GeoJSON using TopoJSON’s `feature` function. The code appends paths for the sphere and each country, demonstrating a straightforward choropleth-free geographic visualization.

Xxsg13

86% match