Sarah C Gall

@sarahcgall·3 public vizzes

Fork of #Utrecht2024 TASK: Voronoi and Tooltips

A scatter plot of 2007 Gapminder data shows life expectancy against GDP per capita, with circle size encoding population and color encoding continent. Hovering over a point reveals a tooltip with its country name, GDP, and life expectancy. The visualization uses D3 scales and an SVG Voronoi overlay to detect mouse position and trigger tooltips. Voronoi cells are computed with `Delaunay.from` and `voronoi.renderCell`.

Jul 2, 2024

Loading thumbnail…

Fork of #Utrecht2024 TASK: First steps in Svelte

A scatterplot shows countries positioned by GDP per capita and life expectancy, with circle size encoding population and color distinguishing continents. The Svelte app formats the data with `autoType` from d3, computes scales with `scaleLinear`, `scaleSqrt`, and `scaleOrdinal`, and renders SVG circles via a custom Datapoint component. Data comes from the Gapminder dataset, though the example uses 2007 values.

Jul 2, 2024

Loading thumbnail…

Fork of #Utrecht2024 TASK: SVG

This fork of the Utrecht 2024 task renders a simple smiley face inside a 500 by 500 SVG canvas. The face is constructed from primitive shapes—two eyes with pupils, eyelashes, a nose, and red lips—all drawn using SVG `circle`, `line`, `path`, and `g` elements. A `transform` attribute groups and scales the facial features, while a lightblue border and rounded corners frame the canvas. The Svelte component, named `App.svelte`, uses no external data or D3 library, relying purely on static SVG markup and CSS for layout.

Jul 1, 2024