Skip to main content
SimilarExport ZIP
100%

Chart Controls III

✓ Published0🌍 Public
TThanaporn-sk
Last edited Mar 9, 2017
Created on Mar 9, 2017

This interactive bubble chart animates global life expectancy and fertility rates over time, using circle size to represent population and a drop-down menu to filter by region. It uses D3 v3 with SVG rendering, a linear scale for axes, a power scale for circle radii, and a timer to advance through yearly data. The visualization reads from a CSV file containing country-level statistics.

AI-generated description

Built with blockbuilder.org

Forked from D3byEx.

There are more interactive with data. If there are more elements than the data, the extra elements(circles) will move up to top and dispared with zero radius.

The origin example uses linear scale to size circles, while I set it to pow scale. All the fancy is come from the timer function.

forked from <a href='http://bl.ocks.org/1Cr18Ni9/'>1Cr18Ni9</a>'s block: <a href='http://bl.ocks.org/1Cr18Ni9/c49a267d9cc7f458526a6be77b264fd6'>Chart Controls III</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Chart Controls III

This interactive bubble chart animates global life expectancy and fertility rates over time, using circle size to represent population and a drop-down menu to filter by region. It uses D3 v3 with SVG rendering, a linear scale for axes, a power scale for circle radii, and a timer to advance through yearly data. The visualization reads from a CSV file containing country-level statistics.

TThanaporn-sk
100% match
Loading thumbnail…

Chart Controls III

This chart animates four dimensions of global development data—life expectancy, fertility rate, population, and time—using a bubble chart. Each circle represents a country, positioned by life expectancy and fertility rate, with size encoding population via a power scale. The animation steps through years, transitioning all circles simultaneously. A dropdown menu filters the display by region. The visualization is built with D3 v3, using `d3.scale.pow` for sizing, `d3.nest` to group data by year, and the `d3.timer` function to drive transitions. Data comes from the included `lfp_all.csv` file.

11Cr18Ni9
91% match
Loading thumbnail…

D3byEX 6.4: Bubble Plot

This bubble plot displays global fertility rates against life expectancy, with each circle sized by population and colored by region. The visualization uses D3.js v3 with SVG rendering, loading data from a CSV file containing country-level statistics. The code builds linear scales for both axes and population-based bubble sizing, while an ordinal color scale maps unique regions to a categorical palette. Axis styling is handled through d3.svg.axis with custom tick and domain presentation.

TThanaporn-sk
85% 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
82% match
Loading thumbnail…

Activity6_Question4

This interactive D3.js bubble chart visualizes fertility rate against life expectancy for ten countries, with bubble size representing population and color distinguishing geographic regions. The visualization uses an SVG-based rendering with d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with interpolated turbo colors for regional categorization. Hovering over any circle triggers a tooltip displaying the region name, implemented through mouse event handlers. The chart includes a size legend and a color-coded category legend. Data is loaded from a CSV file, and the visualization demonstrates animated transitions for tooltip opacity changes.

Ddandudivya98@gmail.com
81% match
Loading thumbnail…

Data Reading &amp; Shaping

This animated bubble chart shows the relationship between income per capita, life expectancy, and population for nations from 1800 to 2009, with bubbles colored by region. Using D3 v4 and SVG, it loads data from a JSON file, applies logarithmic and linear scales, and updates circle positions through a 2-second transition each year. A counter displays the current year as the visualization progresses through the dataset.

EElaineYu
80% match
Loading thumbnail…

Activity6_Question4

This interactive bubble chart displays the relationship between fertility rate and life expectancy for ten countries in 2010, with bubble size representing population and color encoding geographical region. Hovering over a bubble reveals a tooltip with the country name, region, and population. The visualization uses D3 v7's `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for regional coloring, and `axisBottom`/`axisLeft` for tick marks, loading data from a local CSV file into an SVG rendered through D3's selection API.

Ddandudivya98@gmail.com
80% match
Loading thumbnail…

Activity6_q4

A bubble chart visualizes fertility, life expectancy, and population size for countries, using circle position for the first two variables and radius for population. The chart includes a color-coded legend by country and interactive tooltips that display the country name on hover. Built with D3 v7, it loads CSV data, renders SVG circles, and uses D3 scales for axes, bubble size, and ordinal color mapping with the interpolateTurbo color scheme.

Cchinnivikramnunna@gmail.com
79% match