Skip to main content
100%

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

✓ Published0🌍 Public
Ssam.jumphouses@gmail.com
Last edited Jul 1, 2024
Created on Jul 1, 2024

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.

AI-generated description

Task

  • format the data: numbers should be numbers – not strings
  • filter and only use data of the year 2022
  • determine the min and max value of GDP and life expectancy

Original visualization

Interactive version

Data

Gapminder

MIT Licensed

Similar vizzes