Bubble Chart GDP by Country

100%

Bubble Chart GDP by Country

✓ Published0🌍 Public

Last edited Sep 20, 2018

Created on Sep 20, 2018

This bubble chart visualizes GDP by country for 2016, using circle size to represent GDP value and color to indicate geographic region. The data comes from a World Bank CSV file loaded via `d3.csv`. The visualization is rendered using the `d3.pack` layout, which positions bubbles within the SVG canvas, with a tooltip displaying country names and formatted GDP values on hover. The code also uses `d3.hierarchy` with a `sum` accessor to calculate bubble areas, and `d3.scaleOrdinal` with `d3.schemeSet3` for region-based coloring.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Bubble Chart GDP by Country

This bubble chart displays GDP by country for 2016, with each bubble’s size encoding the GDP value and its color indicating the region. The visualization is built with D3 v5 using the `d3.pack` layout and `d3.hierarchy` to structure the data, rendered as SVG circles with text labels. Tooltips appear on mouseover, showing the country name and formatted GDP. The data is loaded via `d3.csv` from a World Bank dataset hosted in a GitHub gist.

663anp3ca

97% 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

81% match

Loading thumbnail…

Fork of Bubble chart

This bubble chart shows the correlation between travel and GDP data, with each bubble representing a country and its position determined by GDP on the x-axis and torque on the y-axis. The bubble size encodes highway MPG values. The visualization uses D3 v7 to load CSV data, create linear scales for axes and bubble size, and render circles as SVG elements. Interactive tooltips appear on mouseover, displaying the country name, while a legend explains the bubble size and color mappings.

Rrallabandisushen@gmail.com

76% match

Loading thumbnail…

Historical Global GDP

A streamgraph shows the historical GDP of countries and regions from 1820 onward, with each colored band representing a geographic area. The chart uses D3 v4's stack layout with the wiggle offset and inside-out ordering to create the flowing shape, while d3-area-label positions labels within each band. Data comes from a CSV file with columns for individual countries and regional aggregates. The visualization renders as SVG, with hovering over a path turning it black and displaying its name in a tooltip.

CCurran Kelleher

76% match

Loading thumbnail…

GDP Variation over time plot-2

This scatter plot shows GDP variation over time, with each circle representing a country-year observation. The color of each point corresponds to the year, using an ordinal color scale with a diverging RdYlBu color scheme. The visualization includes an interactive color legend that filters points by year through click events. Built with D3 v5, the example uses `d3.scaleOrdinal`, `d3.schemeRdYlBu`, and custom modules for the scatter plot and legend, rendering as SVG with data loaded from a CSV file.

MMukund Khandelwal

76% match

Loading thumbnail…

Untitled

A bubble chart displays countries as circles positioned by GDP per capita (x-axis) and life expectancy (y-axis), with circle size encoding population. Each bubble is colored by continent, drawn as SVG circles using `d3.forceSimulation` with custom forces for positioning. The code loads data from a JSON array and uses `d3-scale-chromatic` for categorical color mapping. Hovering a bubble changes its stroke from white to black via CSS.

JJoker-tr

76% match

Loading thumbnail…

New Scatter Plot

This scatter plot visualizes worldwide GDP versus population for 1980, with each circle representing a country and tooltips revealing GDP per capita. The code loads CSV data from a GitHub gist using D3 v7’s `csv` loader, then renders an SVG with `scaleLinear`, `axisLeft`, and `axisBottom`. Axis ticks are formatted via a custom `numMaker` utility that converts large numbers into abbreviated units (e.g., “B” for billions). Circle tooltips use D3’s `title` element, driven by React-free DOM selection and data joins.

Aadventuresenglish.info@gmail.com

75% match

Loading thumbnail…

Bubble Chart

A bubble chart displays the relationship between cost of living and population across five countries, with circle size encoding population and position encoding both variables. The example loads D3 v6 via UNPKG and uses SVG rendering. It constructs linear scales for the x- and y-axes, a square-root scale for circle radii, and an ordinal color scale from `d3.schemeCategory10`. Axis components are generated with `d3.axisBottom` and `d3.axisLeft`, and country labels are added as SVG text elements.

UUVarshaReddy

75% match