Skip to main content
SimilarExport ZIP
100%

Fork of Geospatial Map of Top 10 Oil Producers in 2020

✓ Published0🌍 Public
88Tigers2020
Last edited Jul 20, 2021
Created on Jul 20, 2021

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.

AI-generated description

This is a graph to practice creating and customizing geospatial data.

The information from IG, a site that focuses on the global market and felicitates CFD trades. They also got their information from EIA- the data source I used for the chart on CO2 emissions based on renewable prices.

The aim is to map the top 10 oil producing countries which will connect to the CO2 Reductions Chart to analyze which countries will be affected and what steps need to be done fo rthe renewable energy transition.

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
95% 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
94% match
Loading thumbnail…

Fork of Geospatial Map of Top 10 Oil Producers in 2020

This geospatial scatter plot maps the top 10 oil-producing countries in 2020, using a natural Earth projection and semi-transparent circles sized by 2019 production values. It layers country landmasses, graticules, and ocean backgrounds via `d3.geoPath` and `d3.geoNaturalEarth1`, with circle radii scaled through `d3.scaleSqrt`. The React component imports map data from the world-atlas TopoJSON and country statistics from a CSV hosted on GitHub. The visualization supports interactive filtering through a brush extent, although the current filter logic is incomplete.

88Tigers2020
91% 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
90% match
Loading thumbnail…

Geospatial Map of Top 10 Oil Producers in 2020

This geospatial visualization maps the top 10 oil-producing countries in 2020, with each country represented by a semi-transparent circle sized according to its production data. The map connects to a companion chart on CO2 emissions to explore the relationship between oil production and renewable energy transitions. Built with React and D3 v5, it uses `d3.geoPath` with a Mercator projection to render world landmasses and country boundaries from TopoJSON data. The country locations and production values come from a CSV file hosted on GitHub, sourced from EIA data via IG.

88Tigers2020
87% match
Loading thumbnail…

bubble

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.

Hhanulik.ondrej@gmail.com
78% match
Loading thumbnail…

Fork of Pathetic Bar Chart

This fork of the pathetic bar chart displays the top 10 most populous countries as green landmasses on a black globe, with white graticule lines and country borders. It uses React with D3 v5 to load world topology data via `d3.json` and `topojson.feature` and `topojson.mesh`. The map is rendered as SVG using `d3.geoEqualEarth`, `d3.geoPath`, and `d3.geoGraticule`. Population data comes from the United Nations World Population Prospects 2019, though no bars or axes are shown.

Ssteelerfan107
76% match
Loading thumbnail…

Fork of Fork of Simple World Map

This visualization shows a world map highlighting renewable energy production for 2024, using a yellow-green sequential color scale to indicate production levels across countries, with a legend and tooltip providing exact values. It renders the map as SVG using `d3.geoNaturalEarth1` projection and `d3.geoPath`, pulling geographic data from a TopoJSON world atlas. The code uses `d3.scaleSequential` with `d3.interpolateYlGn` to color countries, and a linear scale with axis for the legend. Countries not in the dataset appear gray, and the tooltip displays production in TWh or no data.

Ssaiabhishekmunnangi@gmail.com
76% match