Skip to main content
SimilarExport ZIP
100%

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

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

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.

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 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
97% 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
95% 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
93% 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
92% 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
88% 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…

Top 10 Production Bar/Map

This example combines a choropleth map and a bubble chart to compare top wine-producing countries. The map colors each country by production volume using a white-to-blue scale, while the scatter plot positions countries by fertility rate and life expectancy, with bubble size reflecting wine quantity. Hovering over a country on either view highlights its data in both. The visualization uses d3.geoPath with a geoEqualEarth projection for the map, d3.scaleLinear for color and size encodings, and d3.csv to load the production data.

LLouisa Penrice
76% 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