clicky label demo

100%

clicky label demo

✓ Published0🌍 Public

Last edited Mar 9, 2017

Created on Mar 9, 2017

This interactive visualization maps global socio-economic development in 2016, plotting GDP per capita against life expectancy for each country. Users can click any bubble to create a draggable text label, connected by a curved swoopy arc. Built with D3.js, the visualization uses `d3.scaleLog` for the x-axis, `d3.scaleSqrt` for bubble sizing, and `d3.scaleOrdinal` for region colors. Labels are added via `d3.selectAll` and rendered as SVG text, while the swoopy connection paths are generated dynamically. The code leverages the `d3-swoopy-drag` library for interactive label dragging.

AI-generated description

click on a circle to add a draggable label with a nice swoopy arc connecting the label to the circle

this iteration converts the code to ES2015 in something like the airbnb style

forked from @jburnmurdoch's block: bcdb4e85c7523a2b0e64961f0d227154

forked from <a href='http://bl.ocks.org/micahstubbs/'>micahstubbs</a>'s block: <a href='http://bl.ocks.org/micahstubbs/7a2cd2e02367c7ac2643cd2198706e50'>es2015 clicky label</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Fork of Bubble chart

This bubble chart visualizes the relationship between GDP, population, and life expectancy for 16 countries using a Cartesian coordinate system. Each circle's x-position corresponds to GDP, y-position to population, and radius to life expectancy, with color distinguishing countries. Built with D3 v7, the visualization uses `d3.scaleLinear()` for axes, `d3.scaleSqrt()` for bubble sizing, and `d3.scaleOrdinal()` for categorical coloring. Interactive hover effects enlarge bubbles and display country labels via `.on('mouseover')` handlers. Data loads from a local CSV file, rendered as SVG with animated transitions on user interaction.

Ssathvik0311@gmail.com

78% match

Loading thumbnail…

Bubble Chart: All Data

This bubble chart displays global life expectancy against GDP per capita, with bubble size representing population and color indicating continent. The visualization includes an interactive tooltip showing country names on hover, plus a legend for population scale. Built with D3 v4, it uses SVG circles, d3.scaleLinear for axes, d3.scaleSqrt for bubble sizing, and d3.scaleOrdinal with d3.schemeSet1 for color mapping. The chart reads data from a CSV of three numeric variables per country and adds hover effects to highlight individual data points.

SSimon Hackbert

76% match

Loading thumbnail…

Activity test

This bubble chart visualizes the correlation between average life expectancy, population, and GDP per capita for six countries using a CSV dataset. Each circle’s position maps to life expectancy and population on the x and y axes, while its radius encodes GDP per capita and its color distinguishes countries via a `d3.scaleOrdinal` with interpolated turbo colors. Interactive tooltips appear on hover using mouse events. A legend includes size reference circles and color swatches, all rendered with SVG in D3 v7.

SSamir Tarda

76% match

Loading thumbnail…

Activity6_Task4

This visualization shows the relationship between GDP per capita, life expectancy, and population for ten countries. Each bubble’s x and y positions represent GDP and life expectancy, while the bubble radius encodes population size, with a categorical color scale distinguishing countries. Using D3 v7, the code loads data from a CSV file, scales values with `d3.scaleLinear`, renders SVG circles, and adds interactive tooltips that display country-specific details on mouseover. Axis labels and a title clarify the chart’s context, and the animation of tooltip transitions enhances user exploration.

Aamarnadhkari98@gmail.com

76% match

Loading thumbnail…

Interactividad

This interactive scatter plot displays global health and economic data, plotting life expectancy against GDP per capita, with circle radius encoding population and color distinguishing continents. Built with React and D3.js v7, the visualization uses `d3.scaleLog` for the x-axis, `d3.scaleLinear` for y and radius, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. The code implements enter/update/exit logic for SVG circles, enabling dynamic highlighting. Hovering over a circle triggers a custom tooltip showing country, population, GDP, and life expectancy, with other circles dimmed via `d3.selectAll` and opacity styles. Data comes from a remote rosling.json file.

Mmaxthamt

76% match

Loading thumbnail…

Activity6_task4

This interactive bubble chart visualizes the relationship between happiness scores, GDP per capita, and life expectancy across 30 countries, with bubble size encoding life expectancy and color distinguishing seven global regions. The visualization uses d3.v7 to implement SVG rendering, including scaleOrdinal for regional color mapping, scaleSqrt for bubble sizing, and scaleLinear axes for GDP and happiness dimensions. A tooltip reveals detailed country metrics—including social support, freedom, generosity, and corruption—on hover. The chart reads from a static CSV dataset and employs transition methods to animate tooltip opacity and bubble styling during mouse interactions.

Vvidyagangasani@my.unt.edu

76% match

Loading thumbnail…

project plot2

This interactive scatter plot shows the relationship between GDP per capita and happiness scores for countries worldwide, with a dropdown menu allowing selection of individual years from 2015 to 2022. Each circle represents a country, positioned by its economic output and well-being score, while color encodes healthy life expectancy using a sequential plasma scale via d3.scaleSequential. Tooltips provide detailed country-specific values on hover. Built with D3 v7, the visualization uses d3.csv to load external data, SVG circles with enter/update transitions for animated year changes, and d3.axisBottom/d3.axisLeft for the coordinate axes.

Kkallappareddygari Lohith reddy

76% match

Loading thumbnail…

Activity 8 - Q4.9

This bubble chart visualizes the correlation between life expectancy, population, and GDP per capita for a small set of countries. Each circle's x-axis position encodes life expectancy, its y-axis position encodes population, and its radius and color encode GDP per capita. The visualization uses D3.js (v7) with SVG rendering, and on hover, a tooltip displays the country name. The code applies `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with an `interpolateTurbo` color scale, and legends for GDP values and country colors. Data comes from the included `bubblechart.csv` file.

SSamir Tarda

76% match