Skip to main content
SimilarExport ZIP
100%

Steven #Utrecht2024 TASK: First steps in Svelte

✓ Published0🌍 Public
SSteven Nijman
Last edited Jul 1, 2024
Created on Jul 1, 2024

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.

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

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.

SSebastian Graeff
82% match
Loading thumbnail…

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.

SSteven Nijman
80% match
Loading thumbnail…

Fork of #Utrecht2024 TASK: First steps in Svelte

This example demonstrates a minimal Svelte setup for processing Gapminder data. It displays the raw dataset as JSON text after converting data types with `d3.autoType`, ensuring that numeric fields like population and GDP are parsed as numbers rather than strings. The visualization uses Svelte's reactive bindings to track the container's dimensions, though the current view shows no chart or filtering. The code reads from a CSV file and outputs the structured data directly, serving as a foundation for building more complex bubble charts with the library.

Kk.hurskaya@gmail.com
79% match
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.

Ssam.jumphouses@gmail.com
79% match
Loading thumbnail…

Fork of #Utrecht2024 TASK: First steps in Svelte

This fork of #Utrecht2024 processes Gapminder CSV data, converting its strings to numbers with d3.autoType. The code uses `autoType` to parse the data before presenting it as raw JSON text. The example demonstrates the first steps of working with data in Svelte, where the loaded dataset includes GDP and life expectancy values. The visualization shows parsed data as a JSON output on screen, ready for a future Year 2022 filter and min/max analysis.

Kkatha.hofbauer@t-online.de
78% match
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.

SSarah C Gall
70% match
Loading thumbnail…

Activity 6 - Task 2,3

This example loads a CSV file from a GitHub gist and displays the first 10 rows as JSON in a pre-formatted text block on the page. It uses D3 v5 via UNPKG, specifically the `csv` and `csvFormat` functions, along with `select` to manipulate the DOM. The visualization is rendered with SVG and WebGL, though the main output is textual, showing the data structure without additional graphical encoding.

Ssaipaidipalli
69% match
Loading thumbnail…

Svelte Circles with D3

This example combines Svelte’s reactive components with D3.js to render two distinct visualizations. The primary view displays an array of circles with varied radii and colors, scaled from raw coordinate data using d3.scaleLinear functions. The secondary component loads CSV data from a GitHub gist via d3.csv and renders it as a simple HTML list. The visualization demonstrates data binding through Svelte’s templating syntax alongside D3’s selection and scaling APIs, using SVG elements for the circle rendering.

AAbdulhaq Adetunji Salako
69% match