Skip to main content
SimilarExport ZIP
100%

Geospatial Map of Top 10 Oil Producers in 2020

✓ Published2🌍 Public
88Tigers2020
Last edited Jul 21, 2021
Created on Jul 19, 2021

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.

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…

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

Global renewable energy production (per capita) from 2010-2020

This visualization shows the ratio of energy consumption to production for ten countries in 2010, with each bar colored by the relative production of renewable energy. A diverging stacked bar chart uses a linear scale for the x-axis and a band scale for the y-axis, while a diverging color scale (interpolateRdYlGn) encodes production values. The chart is rendered as an SVG using D3 v7, with data loaded from a CSV file via `d3.csv` and axes created with `d3.axisBottom`.

PPeter Gish
72% 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
70% match
Loading thumbnail…

Fork of Pie Chart

This visualization displays the top 10 countries by total non-renewable energy generation (in TWh) during COVID, using a pie chart with a legend listing each country and its corresponding generation value. The chart uses d3.pie, d3.arc, and d3.scaleOrdinal with schemeCategory10 for coloring. It loads CSV data from a GitHub gist via d3.csv, sorts the data descending, and renders SVG paths for slices. Mouseover events log the data to console, while legend entries combine rects and text elements.

VVAbhiram99
69% match