Skip to main content
SimilarExport ZIP
100%

Fork of Fork of #Utrecht2024 TASK: Tooltips/Voronoi

✓ Published0🌍 Public
Kkatha.hofbauer@t-online.de
Last edited Jul 2, 2024
Created on Jul 2, 2024

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.

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

SSebastian Graeff
95% match
Loading thumbnail…

Fork of #Utrecht2024 TASK: Voronoi and Tooltips

A scatter plot of 2007 Gapminder data shows life expectancy against GDP per capita, with circle size encoding population and color encoding continent. Hovering over a point reveals a tooltip with its country name, GDP, and life expectancy. The visualization uses D3 scales and an SVG Voronoi overlay to detect mouse position and trigger tooltips. Voronoi cells are computed with `Delaunay.from` and `voronoi.renderCell`.

SSarah C Gall
93% match
Loading thumbnail…

Fork of #Utrecht2024 TASK: Voronoi and Tooltips

This scatterplot from the Gapminder dataset shows life expectancy versus GDP per capita for countries in 2007, with circle size encoding population and color encoding continent. It uses Svelte and renders SVG via D3's `scaleLinear`, `scaleSqrt`, and `scaleOrdinal`. A Voronoi overlay, computed with `Delaunay.from` and `voronoi.renderCell`, captures mouse movement to trigger tooltips displaying country name and life expectancy.

Kk.hurskaya@gmail.com
92% match
Loading thumbnail…

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.

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

#Utrecht2024TASK: Voronoi and Tooltips reactive

A scatter plot displays 2007 country data—GDP per capita on the x-axis, life expectancy on the y-axis, and population encoded by circle radius, colored by continent. The code uses `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` from d3.js to map the data. A `Delaunay` triangulation generates a Voronoi diagram, whose invisible cells serve as hover targets, triggering a custom tooltip that names the country and matches its fill color.

MMatthias Stahl
86% 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
84% 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
83% match