katha.hofbauer@t-online.de

@kahocode·4 public vizzes

Fork of Fork of #Utrecht2024 TASK: Tooltips/Voronoi

This interactive bubble chart displays Gapminder data from 2007, plotting countries by GDP per capita against life expectancy, with circle size encoding population and color distinguishing continents. A Voronoi overlay, generated using `Delaunay` from D3, enables precise hover detection between overlapping bubbles. Hovering a region displays a tooltip with the country name and its assigned color. The visualization is built with Svelte components and SVG, using D3 scales including `scaleLinear`, `scaleSqrt`, and `scaleOrdinal` to map data attributes.

Jul 2, 2024

Loading thumbnail…

Fork of #Utrecht2024 TASK: First steps in Sveltenew

This example shows a scatterplot of countries, with each country represented by a circle whose position is determined by GDP per capita on the x-axis and life expectancy on the y-axis, and whose size reflects population. The circles are colored by continent, and the data is sourced from Gapminder. The visualization maps data using `d3.scaleLinear` for the axes, `d3.scaleSqrt` for the radius, and `d3.scaleOrdinal` for the categorical color scale. It renders circles as SVG elements, with the entire plot dynamically generated in the Svelte component.

Jul 2, 2024

Loading thumbnail…

Fork of #Utrecht2024 TASK: First steps in Svelte

This fork of #Utrecht2024 processes Gapminder CSV data, converting its strings to numbers with d3.autoType. The code uses `autoType` to parse the data before presenting it as raw JSON text. The example demonstrates the first steps of working with data in Svelte, where the loaded dataset includes GDP and life expectancy values. The visualization shows parsed data as a JSON output on screen, ready for a future Year 2022 filter and min/max analysis.

Jul 1, 2024

Loading thumbnail…

Fork of #Utrecht2024 TASK: SVG

This example presents a minimalist abstract composition inspired by the works of Dick Bruna and Marlow Moss, featuring black-outlined rectangles, a blue square, a black rectangle, and a central yellow square arranged on a white canvas. Rendered as a static SVG using Svelte, the code defines geometric shapes with `<rect>` elements, applying translations and explicit coordinate attributes to position each form precisely. The visualization demonstrates how basic vector primitives can construct a balanced, color-blocked image without interactivity or data binding.

Jul 1, 2024