fresh block

100%

✓ Published0🌍 Public

Last edited Jul 15, 2017

Created on Apr 15, 2017

This visualization shows the percentage of internet users and GDP per capita for countries within a selected world region, using an interactive bar chart. Users choose a region via radio buttons, which filters the dataset and updates the chart with a sorting animation. The code uses D3 v4 to create SVG elements, including `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.csv` to load the data. Tooltips display country-specific GDP figures on hover.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example, built with D3 v5 and SVG, visualizes a Gapminder-style dataset using a bubble chart. The x-axis represents GDP per capita, the y-axis shows life expectancy, circle size encodes population, and color maps to geographic region. The chart animates through years 1964 to 2013, showing how countries' development indicators evolve over time. A play button and time slider allow users to scrub through the years, with circles transitioning smoothly between states. The visualization highlights global trends in health and wealth, with tooltips providing country-specific data on mouseover.

AAitorCCE

82% match

Loading thumbnail…

fresh block

This visualization displays a force-directed bubble chart of per-capita GDP data from Gapminder for 100 countries. Each country appears as a circle whose size and color encode its GDP value, with a color scale interpolating from blue to orange. Circles repel and collide using `d3.forceSimulation`, `d3.forceManyBody`, and `d3.forceCollide`. A tooltip showing the country code and dollar amount appears on mouseover. The SVG is rendered with D3 v4.

NNicholasARossi

80% match

Loading thumbnail…

fresh block

A bubble chart maps life expectancy against GDP per capita, with each circle sized by population and colored by continent, using data from a `recent.csv` file. The SVG visualization employs `d3.scaleLog` for the x-axis, `d3.scaleLinear` for the y-axis, `d3.scaleSqrt` for circle radii, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, sorted by descending population. Axis labels are added via `d3.axisBottom` and `d3.axisLeft`.

PPierreLrnt

80% match

Loading thumbnail…

fresh block

This example animates the classic Gapminder bubble chart, mapping fertility, life expectancy, and population over time. It uses D3 v5 to render SVG circles, with x position encoding GDP per capita, y position encoding life expectancy, and circle size encoding population, while color distinguishes world regions. The chart plays through decades of country-level data, showing how nations move across the socioeconomic landscape as development indicators shift.

AAitorCCE

79% match

Loading thumbnail…

fresh block

This visualization is a bubble chart that plots countries by wealth (GDP per capita, on a logarithmic x-axis) against health (life expectancy at birth, on a linear y-axis). Each circle’s radius encodes population using a square-root scale, while its color maps the continent via an ordinal scale with the `d3.schemeCategory10` palette. The SVG is rendered with D3 v4, using `d3.axisBottom` and `d3.axisLeft` for labeled axes, and the data is loaded from a CSV with `d3.csv`.

PPierreLrnt

79% match

Loading thumbnail…

fresh block

This example visualizes global health and wealth data as a bubble chart, where each circle represents a country positioned by life expectancy (y-axis) and GDP per capita (x-axis), with circle size encoding population and color encoding continent. It uses D3 v4’s scales (`scaleLinear`, `scaleLog`, `scaleSqrt`, `scaleOrdinal`) to map variables and renders SVG circles with axes labeled accordingly. The code loads CSV data via `d3.csv` and applies sorting by population, while styling uses opacity and a light grey background. The chart focuses on comparing country-level indicators, with axes labeled in French.

CClaraGriot

78% match

Loading thumbnail…

fresh block

A scatterplot maps average GDP per capita against life expectancy, with circle size encoding population and color indicating geographic region. The SVG visualization uses D3 v4’s `scaleLinear` and `scaleSqrt` to position and size circles, loading data from `gapminder_avg.csv`. Each point is rendered with a black stroke and fill opacity adjusted for overlap, revealing broad correlations between wealth, longevity, and population across nations.

LLiddler

77% match

Loading thumbnail…

fresh block

A scatterplot shows the evolution of Gross Domestic Product (GDP) for Sub-Saharan African countries, with each point encoding GDP on the vertical axis and year on the horizontal axis, while the size of each point reflects population. The visualization filters the source CSV data to exclude missing values before plotting. It uses d3.v4 with SVG rendering, employing `d3.scaleLinear` for both axes, `d3.scaleSqrt` for circle area, and `d3.scaleOrdinal` for color, all styled with the Amatic SC and Roboto fonts.

EEd190

77% match