Bryan Ray

@bryanray67·4 public vizzes

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.

Nov 19, 2019

Loading thumbnail…

Cheap Tricks for Interaction

An orthographic world map demonstrates interaction with drag and zoom. The drag handler rotates the globe by adjusting the D3 projection’s rotation, while the zoom handler scales it using `projection.scale`. Rendered with `d3.geoPath`, the land features come from TopoJSON’s `world-110m.json`. Both `d3.drag` and `d3.zoom` trigger redraws, keeping the single landmass path updated. The example uses D3 v5 with SVG output, showing a blue sphere background and green countries that turn red on hover.

Nov 19, 2019

Loading thumbnail…

Nu het inladen van de nieuwe data

This visualization displays a world map with small circles indicating the geographic locations of museum objects, with each point colored according to its associated object function or type. The data is retrieved via a SPARQL query from the Network Digital Heritage (Netwerk Digitaal Erfgoed) API. Using D3 v5, the code employs `d3.geoOrthographic` and `d3.geoPath` to render the globe, together with `d3.zoom` for interactive panning and zooming. A `d3.scaleOrdinal` color scheme maps object categories to a legend.

Nov 19, 2019

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.

Nov 14, 2019