Skip to main content
SimilarExport ZIP
100%

#Utrecht2024 TASK: First steps in Svelte

• Draft12🔗 Unlisted
MMatthias Stahl
Last edited Jul 1, 2024
Created on Jun 30, 2024

This example displays a bubble chart of countries, plotting life expectancy against GDP per capita while using bubble size to represent population and color to distinguish continents. The visualization uses data from the Gapminder dataset, though the code includes data from 2007 despite the README specifying 2022. The implementation uses Svelte components and D3.js APIs, including `scaleLinear` for axes, `scaleSqrt` for bubble sizing, and `scaleOrdinal` for coloring. Each bubble is a custom SVG path rendered via a `Datapoint` component, with positions and attributes calculated declaratively through Svelte's reactive statements.

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 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.

SSebastian Graeff
92% 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
92% match
Loading thumbnail…

Fork of #Utrecht2024 TASK: First steps in Svelte

This is a scatter plot that compares the GDP per capita and life expectancy of countries for the year 2007, with the size of each circle representing the country's population. The SVG is rendered using Svelte, with a `Datapoint.svelte` component drawing semi-transparent circles. The code uses D3's `scaleLinear`, `scaleSqrt`, and `scaleOrdinal` to map the data to positions, radii, and continent-based colors. The data originates from the Gapminder dataset, which is loaded from a CSV file.

Kk.hurskaya@gmail.com
90% 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
89% match
Loading thumbnail…

Fork of #Utrecht2024 TASK: First steps in Sveltenew

This example shows a scatterplot of countries, with each country represented by a circle whose position is determined by GDP per capita on the x-axis and life expectancy on the y-axis, and whose size reflects population. The circles are colored by continent, and the data is sourced from Gapminder. The visualization maps data using `d3.scaleLinear` for the axes, `d3.scaleSqrt` for the radius, and `d3.scaleOrdinal` for the categorical color scale. It renders circles as SVG elements, with the entire plot dynamically generated in the Svelte component.

Kkatha.hofbauer@t-online.de
88% match
Loading thumbnail…

#Utrecht2024 TASK: Voronoi and Tooltips

A scatterplot visualization displays the relationship between life expectancy and GDP per capita for countries in 2007, using circle size to encode population and color to represent continent. Constructed with Svelte and rendered as SVG, the chart employs Delaunay triangulation from the d3 library to generate a Voronoi diagram overlay for each data point.

MMatthias Stahl
85% match
Loading thumbnail…

#Utrecht2024 TASK: Voronoi and Tooltips and Axes (Solution)

This visualization displays the relationship between GDP per capita, life expectancy, and population for countries in 2007. It uses a scatter plot with circles scaled by population, colored by continent, and labeled via interactive tooltips on hover. The implementation leverages D3’s `scaleLinear`, `scaleSqrt`, and `scaleOrdinal` for scaling, along with `Delaunay.from` and its `voronoi` method to create Voronoi regions that capture mouse movements and highlight the nearest data point.

MMatthias Stahl
85% match
Loading thumbnail…

Fork of Fork of #Utrecht2024 TASK: Tooltips/Voronoi

This interactive bubble chart displays Gapminder data from 2007, plotting countries by GDP per capita against life expectancy, with circle size encoding population and color distinguishing continents. A Voronoi overlay, generated using `Delaunay` from D3, enables precise hover detection between overlapping bubbles. Hovering a region displays a tooltip with the country name and its assigned color. The visualization is built with Svelte components and SVG, using D3 scales including `scaleLinear`, `scaleSqrt`, and `scaleOrdinal` to map data attributes.

Kkatha.hofbauer@t-online.de
84% match