Sebastian Graeff

@sebastian-graeff·5 public vizzes

Fork of #Utrecht2024TASK: Voronoi and Tooltips reactive

This visualization displays global health and economic data for 2007, plotting life expectancy against GDP per capita for each country. The circle size encodes population, and color denotes continent. A reactive tooltip appears on hover, displaying the country's name against its colored background. Built with Svelte and rendered as SVG, the example uses d3's `scaleLinear`, `scaleSqrt`, and `scaleOrdinal` for positioning, sizing, and coloring. It employs the `Delaunay` class from 'd3' to compute a Voronoi overlay, whose invisible paths capture mouse events to update the tooltip.

Jul 2, 2024

Loading thumbnail…

Fork of #Utrecht2024 TASK: Voronoi and Tooltips

A bubble chart shows life expectancy against GDP per capita for countries in 2007, with circle size representing population and color encoding continent. Hovering over any bubble displays a tooltip with the country name. The visualization uses d3.scaleLinear, d3.scaleSqrt, and d3.scaleOrdinal for scales, while d3.Delaunay generates Voronoi cells that overlay the chart to capture mouse events for each data point, triggering the tooltip display.

Jul 2, 2024

Loading thumbnail…

Fork of #Utrecht2024 TASK: First steps in Svelte

This example shows a gapminder-style bubble chart representing global health and economic data for 2007. The visualization maps GDP per capita on the x-axis and life expectancy on the y-axis, with circle size encoding population and colors distinguishing continents. Built with Svelte and d3.js, the code uses d3.scaleLinear, d3.scaleSqrt, and d3.scaleOrdinal to map data values to positions, radii, and fills. Each bubble is rendered as an SVG circle with reduced opacity, driven by data from the Gapminder dataset.

Jul 1, 2024

Loading thumbnail…

Fork of #Utrecht2024 TASK: First steps in Svelte

This example demonstrates the initial step of a data preparation task using the Gapminder dataset, displaying the raw CSV data as JSON in the browser. The code loads the data with an import statement and applies the `autoType` function from the `d3` library to convert string values into their appropriate data types, such as numbers. It does not yet perform the required filtering for the year 2022 or compute the minimum and maximum values for GDP and life expectancy, as those instructions remain in the README. The Svelte framework renders the parsed data in a formatted `<main>` element.

Jul 1, 2024

Loading thumbnail…

Fork of #Utrecht2024 TASK: SVG

This example renders a blank SVG canvas with a light blue border, ready for drawing a smiley face or reproducing artworks inspired by Dick Bruna or Marlow Moss. The code uses Svelte's component structure with a minimal `<script>` tag and an empty `<svg>` element sized at 500x500 pixels. Styling centers the SVG on the page with flexbox and applies a rounded border. While the visualization currently displays no graphical content, it demonstrates a basic Svelte setup for SVG-based drawing tasks, with d3 available as a dependency.

Jul 1, 2024