Skip to main content
Log in
K

k.hurskaya@gmail.com

@Katechkin·4 public vizzes

Loading thumbnail…

Fork of #Utrecht2024 TASK: Voronoi and Tooltips

This scatterplot from the Gapminder dataset shows life expectancy versus GDP per capita for countries in 2007, with circle size encoding population and color encoding continent. It uses Svelte and renders SVG via D3's `scaleLinear`, `scaleSqrt`, and `scaleOrdinal`. A Voronoi overlay, computed with `Delaunay.from` and `voronoi.renderCell`, captures mouse movement to trigger tooltips displaying country name and life expectancy.

Jul 2, 2024
Loading thumbnail…

Fork of #Utrecht2024 TASK: First steps in Svelte

This is a scatter plot that compares the GDP per capita and life expectancy of countries for the year 2007, with the size of each circle representing the country's population. The SVG is rendered using Svelte, with a `Datapoint.svelte` component drawing semi-transparent circles. The code uses D3's `scaleLinear`, `scaleSqrt`, and `scaleOrdinal` to map the data to positions, radii, and continent-based colors. The data originates from the Gapminder dataset, which is loaded from a CSV file.

Jul 2, 2024
Loading thumbnail…

Fork of #Utrecht2024 TASK: First steps in Svelte

This example demonstrates a minimal Svelte setup for processing Gapminder data. It displays the raw dataset as JSON text after converting data types with `d3.autoType`, ensuring that numeric fields like population and GDP are parsed as numbers rather than strings. The visualization uses Svelte's reactive bindings to track the container's dimensions, though the current view shows no chart or filtering. The code reads from a CSV file and outputs the structured data directly, serving as a foundation for building more complex bubble charts with the library.

Jul 1, 2024
Loading thumbnail…

Fork of #Utrecht2024 TASK: SVG

A smiling face is rendered as a static SVG composition, depicting two eyes, a curved mouth, and two rotated, mirrored pink shapes that suggest hair or decorative elements on a blank canvas. The visualization is built using the Svelte framework and relies on the SVG specification for its vector graphics output. The code defines the shapes using SVG elements like `<circle>`, `<path>`, and `<g>` with specific `d` attributes for the paths, and it uses `transform` attributes to rotate and translate the decorative components around a central point.

Jul 1, 2024