Giovanni Kaaijk

@GiovanniKaaijk·5 public vizzes

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.

Dec 3, 2019

Loading thumbnail…

Sized Points on a Map

This visualization shows a world map with cities as sized points, where each circle’s radius reflects population using a `scaleSqrt` in d3. It renders a natural Earth projection with `geoNaturalEarth1` and `geoPath` for country boundaries, interior borders, and graticules. City coordinates are projected from longitude and latitude, with population data loaded via `d3.csv` from a Simplemaps dataset. The React-based code uses reusable `Marks` components, while SVG circles are semi-transparent to reveal overlapping urban areas.

Dec 3, 2019

Loading thumbnail…

World map

This interactive world map visualizes the distribution of museum objects across countries over time. The D3.js visualization uses a Natural Earth projection, displaying countries colored on a white-to-red scale based on object counts for a selected time period. Users can click on a country to view historical colonial events related to that territory in a side panel. The map retrieves data from a SPARQL endpoint and animates through time periods using a timeline play button, while the `d3.zoom` library enables zooming and panning capabilities.

Nov 27, 2019

Loading thumbnail…

World map

This example displays a simple world map rendered as an SVG, with each country depicted as a dark green path with a semi-transparent white stroke. The visualization uses D3 to generate the map, though the specific geographic data is not loaded in the provided code. A separate interactive feature adds a small green circle that, when hovered, reveals an absolutely positioned tooltip displaying the text "I'm a circle!" The tooltip’s position updates based on mouse movement using the D3 selection API and event coordinates. The map’s styling is defined in an external CSS file.

Nov 14, 2019

Loading thumbnail…

World map

A world map rendered with dark green landmasses and white outlines on a light blue background. The visualization uses a GeoJSON-derived feature collection from the world-atlas TopoJSON source, projected with `d3.geoMercator` and drawn via `d3.geoPath`. The code loads the TopoJSON file, converts it to GeoJSON features using `topojson.feature`, and appends SVG paths for each country. Styling is applied through CSS with the `fill` and `stroke` properties.

Nov 11, 2019