100%

Transforming data using d3

✓ Published0🌍 Public

Last edited Nov 22, 2019

Created on Nov 22, 2019

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.

AI-generated description

Transforming data using d3

Concept

I'm going to group data using nest() and to add some calculated values. I'll try to do this based on SPARQL data about ethnographic artefacts

Inspiration

Some nesting examples

MIT Licensed

Similar vizzes

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.

RRoyCsuka

88% match

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.

RRoyCsuka

87% match

Loading thumbnail…

Transforming data using d3

This example demonstrates how to clean, group, and enrich SPARQL query results about ethnographic artefacts. It loads data from a Dutch heritage endpoint using `d3.json`, maps each row to extract plain values with `cleanData`, then applies `d3.nest()` to group artefacts by their parent country. For each country group, it calculates the total count of artefacts as a new `amount` property. The code uses d3 v5 APIs such as `d3.nest()` and `d3.json`, and logs the raw, cleaned, and transformed data to the console for inspection.

LLaurens

85% match

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.

RRoyCsuka

74% match

Loading thumbnail…

Visualizing transformed data

The example displays a world map with animated, color-coded circles representing cultural heritage object locations, grouped per country through nested data. It uses d3.json to fetch SPARQL query results and TopoJSON world atlas data, then transforms raw bindings via d3.nest. Circles are rendered as SVG with d3.geoPath projections and animated using transition.attrTween-like easing, while color scales from d3.scaleOrdinal.

LLaurens

72% match

Loading thumbnail…

Visualizing transformed data

This example visualizes geographic data transformed from a SPARQL query, nesting locations per country after cleaning and aggregating the results. A world map is drawn using `d3.geoPath` and TopoJSON data from the world-atlas package, with each country rendered as a path. The visualization then applies `d3.nest` to structure the data, though the plotting of circles on the map is present but commented out, and a color scale is set up with `d3.scaleOrdinal` and `d3.schemeDark2`. SVG and animated transitions are used throughout.

CChoerd

71% match

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.

RRoyCsuka

70% match

Loading thumbnail…

Loading data through SPARQL

This example demonstrates how to query a live SPARQL endpoint using d3.json, fetching up to 1000 records created in 1893 from the Dutch Network of Digital Heritage. The results are displayed as raw JSON text in a paragraph element. The code encodes a SPARQL query with encodeURIComponent and appends it to the endpoint URL, then parses the response with d3’s JSON loader. It relies on d3.v5 and the public API endpoint, which must remain active for the example to function.

LLaurens

69% match