RoyCsuka

@RoyCsuka·13 public vizzes

Exploring survey data interactively - y-axis

An interactive bar chart explores survey data by visualizing aggregated values for different student interest groups. A dropdown menu lets users select which variable to display on the y-axis, including averages for height, stress, and expenses. Built with D3 v5, the chart updates scales, axes, and bar positions dynamically when the selection changes, while the data preparation module handles filtering and aggregation. The chart uses SVG rendering and data joins to generate the form options and bars.

Nov 22, 2019

Loading thumbnail…

Visualizing transformed data

This example visualizes geographic survey data by animating circles onto a world map, with each dot representing a location and colored by its country. It demonstrates a data pipeline that fetches SPARQL query results, cleans and nests the data per country, then uses a D3 animation to grow the circles. The visualization uses `d3.geoPath` and `geoNaturalEarth1` projection for the map, while `d3.nest()` and `transition.attrTween` handle data transformation and the animated reveal.

Nov 21, 2019

Loading thumbnail…

Untitled

This example displays a world map colored by continent, with each landmass labeled at its geographic centroid. It uses a Natural Earth projection with a slight rotation, rendered as SVG paths. The code loads TopoJSON data, converts it to GeoJSON features via `topojson.feature`, and projects centroids using `d3.geoCentroid` and `d3.geoPath`. Continent colors are assigned from a hardcoded array, and labels are appended as SVG `<text>` elements. The visualization relies on d3.v4, topojson.v2, and d3-geo-projection.

Nov 21, 2019

Loading thumbnail…

Visualizing transformed data

A world map visualizes geographic locations of cultural heritage objects, with each country’s data points appearing as colored circles that animate onto the map with a bouncing effect. The visualization queries a SPARQL endpoint for latitudinal and longitudinal coordinates, cleans and nests the data by country using `d3.nest`, and renders the map with `d3.geoPath` and `topojson.feature`. Circle positions are projected via `d3.geoNaturalEarth1`, while ordinal scales and transitions control color and staggered entry timing.

Nov 20, 2019

Loading thumbnail…

Visualizing transformed data

This example visualizes transformed museum collection data on a natural Earth projection map, showing the geographic distribution of objects by country. It fetches SPARQL query results from a Dutch digital heritage endpoint, cleans and nests the data per country using `d3.nest()`, then plots animated circles with `transition` and `d3.easeBounce`. The map itself is drawn with `d3.geoPath` and TopoJSON world atlas data. Colors are assigned using `d3.scaleOrdinal` with the `d3.schemeDark2` palette to distinguish countries.

Nov 19, 2019

Loading thumbnail…

Transforming data using d3

This example demonstrates how D3's `nest()` function and custom mapping can transform SPARQL query results about ethnographic artefacts into a hierarchical, country-based dataset with calculated counts. The visualization first loads data from a SPARQL endpoint using `d3.json`, cleans the raw bindings by extracting property values, then groups entries by country label and computes each country’s total number of artefacts. The code uses D3 v5’s `nest().key().entries()` API to perform the grouping, and logs the raw, cleaned, and transformed data to the console for inspection.

Nov 18, 2019

Loading thumbnail…

Let's make a map with D3.js!

This example loads a GeoJSON file of world country boundaries from a remote URL and logs the parsed data structure to the browser console, preparing for map visualization. The SVG canvas is set to 960 by 500 pixels, and the page uses D3 v5 along with TopoJSON v3 to handle geographic data. The code imports `select` and `json` from D3 and `feature` from TopoJSON, though the actual map rendering with `d3.geoPath` is not yet implemented, leaving the visualization incomplete at this stage.

Nov 14, 2019

Loading thumbnail…

Let's make a face with D3.js!

A smiley face constructed entirely with D3.js demonstrates fundamental SVG DOM manipulation. The static yellow circle, eyes, and arc-based mouth are created using d3.select, d3.append, and the d3.arc shape generator. The eyebrows, rendered as rectangles within a translated group, animate upward and back down over two seconds using chained transition().duration() calls. The example highlights basic data-binding-free element creation and attribute setting within an SVG canvas.

Nov 14, 2019

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with SVG demonstrates basic D3.js DOM manipulation and animation. Drawn with a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth, the face animates by moving the eyebrows upward and back down using chained `transition().duration()` calls. The example uses D3 v5’s `select`, `arc`, and `attr` methods to construct and style elements, with the eyebrow displacement triggered automatically on load.

Nov 14, 2019

Loading thumbnail…

D3 map

A world map rendered with D3 shows a natural Earth projection of countries in goldenrod over a black sphere. Circles representing museum objects are plotted and animated with a staggered bounce-in effect using D3 transitions. The code uses `geoNaturalEarth1` and `geoPath` for geographic rendering, TopoJSON for country boundaries, and fetches SPARQL query results from a Dutch heritage dataset, mapping latitude and longitude coordinates to circle positions.

Nov 14, 2019

Loading thumbnail…

D3 map

This example visualizes a world map with data-driven location points, plotting over a thousand geographic coordinates as animated circles on a natural Earth projection. It uses D3 v5 with `d3.geoNaturalEarth1`, `d3.geoPath`, and TopoJSON’s `feature` to render country boundaries from the World Atlas dataset, while querying a SPARQL endpoint from the Dutch Digital Heritage Network for latitude and longitude data. Each circle appears sequentially with a bounce ease transition, growing from zero to a fixed radius to show the distribution of the dataset across continents.

Nov 14, 2019

Loading thumbnail…

Transforming data using d3

This example demonstrates how to transform SPARQL query results about ethnographic artefacts by cleaning and nesting the data per country using d3.nest(), then calculating the number of records per country. It loads data from a live SPARQL endpoint via d3.json and applies a custom cleanData function to extract property values. The transformed data structure, with country keys and value counts, is logged to the console, showing the grouping and aggregation process using d3 v5.

Nov 13, 2019

Loading thumbnail…

D3 map

A world map visualizes the geographic distribution of museum objects by plotting animated, bouncing dots at their recorded locations. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and renders country boundaries with `d3.geoPath`. Data is fetched from a SPARQL endpoint and displayed as SVG circles, with each circle transitioning from zero radius to its final size using a staggered delay and `d3.easeBounce`. The map itself comes from the TopoJSON world atlas, processed with the `topojson` library.

Nov 13, 2019