bubble

100%

✓ Published1🌍 Public

Last edited Aug 16, 2022

Created on Aug 15, 2022

This bubble map displays global natural gas production by country, with circle size proportional to production volume. The visualization uses D3.js v6 with a Mercator projection, plotting latitude and longitude coordinates from a CSV file onto a GeoJSON world map. The map renders as gray SVG paths with blue semi-transparent bubbles, sized using d3.scaleLinear. Country positions are projected via d3.geoPath with a custom geoMercator projection, while the data loading relies on Promise.all to fetch both the GeoJSON and CSV sources.

AI-generated description

https://d3-graph-gallery.com/graph/bubblemap_template.html

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Geospatial Map of Top 10 Oil Producers in 2020

This example displays a geospatial bubble map of the world’s top 10 oil-producing countries in 2020, with circle size scaled to each nation’s daily production in million barrels. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render landmasses, graticules, and country borders from TopoJSON data. Bubble radii are computed with `d3.scaleSqrt`, and the data is loaded from a CSV file containing country coordinates and production figures. The project is built with React and renders SVG elements, with styling applied through CSS classes for the map’s sphere, land, and interior boundaries.

88Tigers2020

78% match

Loading thumbnail…

Fork of Geospatial Map of Top 10 Oil Producers in 2020

This example displays a geospatial bubble map of the top 10 oil producers in 2020, with circle size encoding each country’s hydrocarbon production index (hpi). It uses a React-based D3 v5 workflow, combining `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render world landmasses, interiors, and graticules in SVG. The bubbles are sized with `scaleSqrt` and global data comes from a CSV, while the world atlas is loaded via TopoJSON. The map serves as a companion to a renewable energy transition analysis.

88Tigers2020

78% match

Loading thumbnail…

Final Geospatial Map of Top 10 Oil Producers in 2020

This geospatial map displays the top 10 oil-producing countries in 2020, with bubble size scaled to each nation’s output in million barrels per day. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders land, graticules, and sphere paths with `geoPath` and SVG circles. Country positions are projected from latitude/longitude coordinates, while bubble radii are determined by a square-root scale (`scaleSqrt`). The underlying data, sourced from the Energy Information Administration, is loaded using `d3.csv`, and the world atlas geometry is fetched from `world-atlas` and processed with `topojson`’s `feature` and `mesh` functions.

88Tigers2020

75% match

Loading thumbnail…

Fork of Fork of Fork of Geospatial Map of Top 10 Oil Producers in 2020

This example displays a geospatial bubble map of the top 10 oil-producing countries in 2020, with circle size scaled to each nation’s daily oil output in million barrels. The visualization renders world landmasses and graticules using d3.geoNaturalEarth1 and d3.geoPath, while React manages component state and data filtering. Circles are positioned via a d3.scaleSqrt and projected coordinates from CSV data. The map uses TopoJSON world-atlas data and SVG rendering, with the underlying dataset sourced from the U.S. Energy Information Administration via an IG trading-strategies article.

88Tigers2020

74% match

Loading thumbnail…

Size Bubbles

A world map displays cities as semi-transparent bubbles, with bubble area scaled by population using a sqrt scale and a maximum radius of 15 pixels. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render landmasses, graticules, and interiors from TopoJSON world-atlas data, while city coordinates and populations come from a cleaned CSV. React manages the component state and rendering, with SVG circles positioned by projecting each city’s longitude and latitude. The map’s styling uses light gray fills for land and graticules, with teal, translucent circles for urban centers.

Rrstrauss127

74% match

Loading thumbnail…

Bubble World Map

This bubble world map visualizes the number of Nike factories per country, with circle area proportional to factory count using d3.scaleSqrt. The map uses a d3.geoNaturalEarth1 projection and d3.geoPath to render countries, with topojson loading world atlas data and CSV factory data from a gist. Users can pan and zoom via d3.zoom, hover for tooltips, and click legend circles to filter highlighted countries based on factory thresholds.

SSiddhi Patil

73% match

Loading thumbnail…

D3 Country Bubble Chart

This bubble chart displays each country as a circle scaled by population, with hover tooltips showing the country name and population. Interactive radio buttons switch between grouping modes—combining all bubbles, clustering by continent, positioning at country centers, or sorting by population—and toggle circle fills between continent colors and country flag patterns. The visualization uses d3.forceSimulation with custom force configurations for each grouping, d3.scaleSqrt for radius scaling, and SVG patterns for flag fills. It loads data from a CSV file and animates transitions between the different layouts.

AAnnie Chang

71% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data on a natural Earth projection map. Countries with missing data appear in red, while the rest are gray, and semi-transparent circles sized by population are placed at country centroids. A custom legend shows the population scale. The code uses D3 v5 functions like `geoPath`, `geoCentroid`, `geoNaturalEarth1`, and `scaleSqrt`, along with a custom `sizeLegend` for the bubble chart. Data is loaded from a CSV file and a TopoJSON world atlas.

RRoger Yu-Hsiang Lo

71% match