100%

Visualizing transformed data

✓ Published0🌍 Public

Last edited Nov 21, 2019

Created on Nov 21, 2019

Forked from 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.

AI-generated description

Making a datavis with nested data with d3

Concept

Nest data in countries so we can visualize something per country
Put data cleaning and transformation in separate module

MIT Licensed

Similar vizzes

Loading thumbnail…

Visualizing transformed data

A world map displays geographic points colored by country, with each location's data nested per nation and visualized as small circles. The visualization uses D3 v5 with a Natural Earth projection via `geoNaturalEarth1`, `geoPath` for rendering map features, and `d3.nest()` to group SPARQL query results by country. Circles animate with a staggered bounce effect using `transition.delay` and `d3.easeBounce`, while an ordinal color scale from `d3.schemeDark2` differentiates countries. Data is loaded from a remote SPARQL endpoint and processed in a separate module.

GGiovanni Kaaijk

91% 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

89% 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

88% match

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.

RRoyCsuka

88% 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

86% match

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.

RRoyCsuka

82% match

Loading thumbnail…

world map

This example presents a world map using the Natural Earth projection, overlaid with animated green dots that represent geographic locations queried from a SPARQL endpoint. The map is rendered as SVG paths, with countries drawn using `d3.geoPath` and TopoJSON data, while the data circles are plotted using the projection and animated with a staggered transition. It uses `d3.json`, `d3.geoNaturalEarth1`, and `transition.attr` to create the visual effect.

BBajiSharifPatan@my.unt.edu

82% match

Loading thumbnail…

D3 map

This example visualizes a world map with animated points representing geographic locations from a SPARQL query against the Network Digital Heritage dataset. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries from TopoJSON data. After fetching and parsing the query results, circles are appended to the SVG and animated with staggered `transition.attr` delays, using `d3.easeBounce` to grow each point from zero to its full radius. The rendering relies on SVG elements and the D3 v5 library, including `select`, `json`, and `feature` from TopoJSON.

DDaanKos

82% match