joanpadolina

@joanpadolina·3 public vizzes

Exploring survey data interactively - y-axis

An interactive bar chart explores survey data grouped by students’ subject preference on the x-axis, with the y-axis variable selectable via a dropdown menu. Changing the selection triggers a rerender that updates the bars and y-axis scale. The visualization uses D3 v5’s general update pattern, data joins for generating options, and d3.nest with rollups to compute averages and totals from the loaded JSON data.

Nov 22, 2019

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A bar chart displays the distribution of exchange items across categories in the NMVW collection, sourced from a SPARQL query against the Network Digital Heritage API. The visualization shows category labels on the x-axis and item counts on the y-axis, with a reference line and tooltip appearing on mouse enter. Built with D3 v5, it renders SVG bars with animation transitions, binding mouse events to adjust bar opacity, width, and position. The chart includes axis labels, a title, and grid lines, all styled via CSS.

Nov 20, 2019

Loading thumbnail…

Loading data through SPARQL

This example demonstrates a SPARQL query against the Network of Digital Heritage (NDE) API, displaying the results as raw JSON text in a paragraph element. The visualization shows counts of cultural heritage objects grouped by material type and African place names. The code uses D3 v5’s `d3.json()` helper to fetch data from the SPARQL endpoint, with the query wrapped in template literals and passed as a URL-encoded parameter. The results are rendered by directly setting the innerText of the paragraph, without any further visual encoding.

Nov 14, 2019