kimgarrard

@kimgarrard·10 public vizzes

Let's make a face!

Five fruit circles appear in a row as apples, then one is removed and another turns into a lemon, demonstrating D3's enter, update, and exit selections. The example uses d3.scaleOrdinal to map fruit types to colors and radii, with selection.data and selection.enter handling the dynamic changes. Rendered as SVG circles on a 960 by 500 canvas, the visualization shows how data joins update the DOM over time through setTimeout callbacks.

Nov 26, 2019

Loading thumbnail…

Transforming data using d3

This example demonstrates how to group a collection of ethnographic artefact records by date using the `d3.nest()` method. The visualization is generated from SPARQL query results, accessed via the Web API using `d3.json`, and the data is subsequently cleaned and transformed to calculate a count of records per entry. The final visualization is not rendered; instead, the process focuses on logging the transformed, nested data structure to the console, showcasing the data preparation stage before any visual encoding takes place. The code relies on the D3.js v5 library and its built-in nesting and data-loading utilities.

Nov 22, 2019

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

Nov 21, 2019

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.

Nov 18, 2019

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.

Nov 14, 2019

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.

Nov 14, 2019

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.

Nov 13, 2019

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.

Nov 12, 2019

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.

Nov 12, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example illustrates a car pricing report asynchronously loaded via a JavaScript Promise. The `getCars` module parses a static JSON array and resolves it after a two-second delay. `index.js` then filters this data by a maximum price using `generateReport`, formats each car with the `formatCar` template, and injects the resulting text into the DOM. The page also contains an SVG circle rendered solely with HTML and CSS, while the report text updates dynamically without any visualization library.

Nov 11, 2019