Steven Nijman

@Stayven·4 public vizzes

Steven #Utrecht2024 TASK: First steps in Svelte

This example creates an interactive bubble chart plotting life expectancy against GDP per capita, with bubble size encoding population and color distinguishing continents. It includes a tooltip that appears on hover, revealing the country name. The visualization is built with Svelte components using d3's `scaleLinear`, `scaleSqrt`, `scaleOrdinal`, and `schemeAccent` for scales, and a Voronoi overlay from `Delaunay` for efficient hover detection. Data is loaded from a CSV file and rendered as SVG circles.

Jul 6, 2024

Loading thumbnail…

Steven #Utrecht2024 TASK: First steps in Svelte

This example demonstrates a minimal Svelte application that loads and displays raw data from a CSV file using the `d3` library. The code imports CSV data via `import rawData from './data.csv'` and formats each row's string values into native JavaScript types using `d3.autoType`. The result is serialized to JSON and rendered as text within the main element, showcasing the first step in a data-visualization workflow focused on data preparation. The implementation relies on Svelte’s script and style blocks, with `d3` as the only external dependency.

Jul 1, 2024

Loading thumbnail…

Steven#Utrecht2024 TASK: SVG

A minimalist SVG drawing features a single continuous black path that outlines a stylized shape resembling the letter "Z" or a geometric composition, rendered on a 500x500 canvas. The path uses explicit coordinate commands (`M`, `L`) to create angular segments, with a thick stroke and white fill. Built with Svelte and the d3 library available in the environment, the example demonstrates how to construct basic vector graphics programmatically. The code is displayed within a bordered, rounded container, showcasing a simple yet precise exercise in SVG path syntax.

Jul 1, 2024

Loading thumbnail…

Smiley face 2.0

A yellow smiley face rendered with React and SVG. The example defines a static composition of three circles—a large yellow face with a black stroke, and two black eyes positioned symmetrically around the center. It uses React 18 to create functional components and ReactDOM to render the SVG into the DOM. The viewport is fixed at 960 by 500 pixels.

Jun 9, 2022