Coenmathijssen

@Coenmathijssen·8 public vizzes

Stylized Bar Chart

This example displays a stylized bar chart comparing average sales values for two entities, “Jouw adres” and “Gem. A’Dam,” loaded from a CSV file. It uses D3 v4’s `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, rendering bars as SVG rectangles with a steelblue fill. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The chart also includes unused margin settings and a test object, though the visible visualization focuses solely on the CSV-driven data.

Jan 9, 2020

Loading thumbnail…

D3 map

A world map in a natural Earth projection shows the locations of jewelry objects from Africa and Oceania, sourced from a SPARQL query against the Network Digital Heritage API. Each location appears as a circle, drawn with SVG, that animates in with a bounce effect. The code uses D3 v5’s `geoNaturalEarth1`, `geoPath`, and `transition` to render the map, while TopoJSON loads country boundaries. Data points are projected and positioned based on latitude and longitude values fetched from the endpoint.

Nov 27, 2019

Loading thumbnail…

Wheel of Fortune Bingo

A spinning wheel of fortune displays 20 CSS and HTML questions, each on its own slice, for a classroom bingo game. Clicking the center circle spins the wheel, and a question appears to the right, prompting users to answer. Built with D3.js v5, this SVG and animation example uses the `d3.arc`, `d3.pie`, and `transition.attrTween` APIs to create and rotate the wheel, while the question bank is stored in a JavaScript array.

Nov 27, 2019

Loading thumbnail…

D3 map

This interactive map displays the geographical distribution of jewelry artifacts from an ethnographic collection, with animated data points that pulse onto the map via SVG transitions. Clicking a point enlarges it to reveal a thumbnail image and title, while a tooltip provides additional details. The visualization uses a SPARQL query to fetch data from a Dutch digital heritage API, which is plotted using d3.geoPath with a geoNaturalEarth1 projection and the world-atlas TopoJSON dataset. d3-tip enhances the hover interactions.

Nov 26, 2019

Loading thumbnail…

D3 map

An animated world map visualizes the geographic distribution of jewelry objects from the National Museum of World Cultures (NMVW) collection, with overlaid circles marking item locations. The example uses D3 v5 with `geoNaturalEarth1` and `geoPath` for map rendering, TopoJSON for country outlines, and fetches SPARQL query results from an external endpoint to plot coordinates. Circles animate in with a staggered delay and bounce easing, while the map itself uses SVG paths and CSS styling.

Nov 25, 2019

Loading thumbnail…

D3 map

A D3 map displays cultural heritage objects across Africa and Oceania, plotting images of jewelry at their geographic coordinates on a natural Earth projection. The visualization uses `d3.geoNaturalEarth1`, `d3.geoPath`, and TopoJSON to render country boundaries, then fetches SPARQL query results from a Dutch digital heritage API to position object thumbnails. Each image animates in with a staggered delay and bounce easing via `transition().delay().duration().ease()`. The map is built with D3 v5, SVG elements, and features a blue ocean backdrop with red landmasses.

Nov 23, 2019

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.

Nov 23, 2019

Loading thumbnail…

D3 map

A D3 map visualization plots museum objects from the Netherlands Digital Heritage Network’s SPARQL endpoint onto a natural Earth projection. Animated circular images, each representing an artifact, appear at their geographic coordinates with a bouncing transition. The map uses `d3.geoNaturalEarth1`, `d3.geoPath`, and TopoJSON world-atlas data for country outlines. Data cleaning functions parse date formats and filter entries to four-digit years, while SVG transitions with `d3.easeBounce` animate the markers.

Nov 15, 2019