Skip to main content
SimilarExport ZIP
100%

Sara Maria - Fork TASK: Voronoi and Tooltips

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

This scatterplot shows the relationship between GDP per capita and life expectancy for countries in 2007, with circle size encoding population and color encoding continent. Built with Svelte and d3, it uses a Voronoi diagram from `d3.Delaunay` to create invisible hover regions over each point, triggering a tooltip that displays the country name and population radius.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

This scatterplot shows the relationship between GDP per capita and life expectancy across countries, with bubble size encoding population and color distinguishing continents. It renders each country as a circle positioned by linear x and y scales, while a square-root scale maps population to radius and an ordinal scale assigns continent colors. Built with Svelte and D3, the visualization imports CSV data, converts string values with `autoType`, and renders SVG circles through a reusable `Datapoint` component featuring radial gradient definitions.

Ssam.jumphouses@gmail.com
87% 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
87% 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
84% 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
82% 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
82% match
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
81% 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
78% match
Loading thumbnail…

Scatterplot with Voronoi

This interactive scatterplot displays life expectancy versus GDP per capita for countries, colored by region and sized by GDP. It uses a Voronoi partition to identify the nearest data point to the cursor, but limits the interactive area by checking the distance from the pointer to the point. D3 v3’s `d3.geom.voronoi` and a `clipPath` cut off oversized cells, so tooltips appear only when the mouse is close enough to a circle.

KKcnarf
78% match