sam.jumphouses@gmail.com

@sara-maria·4 public vizzes

Sara Maria - Fork TASK: Voronoi and Tooltips

This scatterplot shows the relationship between GDP per capita and life expectancy for countries in 2007, with circle size encoding population and color encoding continent. Built with Svelte and d3, it uses a Voronoi diagram from `d3.Delaunay` to create invisible hover regions over each point, triggering a tooltip that displays the country name and population radius.

Jul 2, 2024

Loading thumbnail…

Sara Maria - Fork 2 of #Utrecht2024 TASK: First steps in Svelte

This scatterplot shows the relationship between GDP per capita and life expectancy across countries, with bubble size encoding population and color distinguishing continents. It renders each country as a circle positioned by linear x and y scales, while a square-root scale maps population to radius and an ordinal scale assigns continent colors. Built with Svelte and D3, the visualization imports CSV data, converts string values with `autoType`, and renders SVG circles through a reusable `Datapoint` component featuring radial gradient definitions.

Jul 2, 2024

Loading thumbnail…

Sara Maria - Fork of #Utrecht2024 TASK: First steps in Svelte

This example demonstrates a minimal Svelte application that loads Gapminder data from a CSV file and displays it as raw JSON text on the page. It uses the `autoType` function from D3 to automatically convert numeric strings into numbers, preparing the dataset for future analysis. The code currently renders the formatted data structure without any filtering or calculations, serving as a first step toward building an interactive bubble chart. The visualization updates its layout based on the container’s client width and height, and uses Svelte’s reactivity system to bind these dimensions.

Jul 1, 2024

Loading thumbnail…

SaraMaria - Fork of #Utrecht2024 TASK: SVG

A smiley face rendered in SVG features two brown circles with white highlights as eyes, while a red bezier curve beneath them animates between a curved smile and a single point, creating a winking effect. The Svelte component draws directly in the SVG markup, with the path’s animation driven by SMIL’s `<animate>` element, cycling through the `d` attribute values. The simple composition uses basic shapes and a looping transition.

Jul 1, 2024