Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
PPeter Gish
Last edited Mar 15, 2022
Created on Mar 15, 2022
Forked from HTML Starter

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`.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Renewable energy production vs Consumption from 10 Random Countries

This example visualizes renewable energy production versus consumption for nine countries in 2010 using a diverging stacked bar chart. Each bar shows the ratio of energy consumption to production, with bar segments colored by relative production values using a diverging RdYlGn color scale. The visualization uses D3 v7 to load CSV data, apply scales for positioning and color, and render SVG elements including axes, labels, and a linear gradient legend. The chart filters data to aggregate renewable sources and formats each country's values for comparison.

Mmandadi1999
90% match
Loading thumbnail…

Untitled

This visualization shows the average share of renewable energy production from 2000 to 2020 across EU member states, with each year plotted as a green vertical bar. The bar heights are scaled proportionally to the data’s maximum value, and axis tick labels appear at intervals rounded up to the nearest five. Built with p5.js, the sketch loads a CSV dataset via `loadTable`, draws axes and gridlines using Canvas drawing functions like `line` and `rect`, and spaces bars dynamically based on row count and available chart width.

SSnigdha6698
73% match
Loading thumbnail…

Bar Chart

This bar chart displays the average share of renewable energy production from 2000 to 2020 across EU member states. It uses the p5.js library, loading CSV data via `loadTable` in a `preload` function and rendering custom axes, tick marks, and bars through functions like `drawTicks`, `drawAxis`, and `drawBars`. The bars are drawn with `rect` after translating coordinates, with heights scaled proportionally via `getHeight`, and the chart includes a title and axis labels.

Mmandadi1999
72% 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
72% match
Loading thumbnail…

US Solar and Oil Production 2010-2020

This visualization shows US electricity production from solar and oil between 2010 and 2020, with bars representing solar production percentages and color encoding oil production values using a sequential YlOrRd color scale. The chart filters data to the United States from a CSV source, using d3.csv for loading and preprocessing. It employs d3.scaleBand for the year axis, d3.scaleLinear for the percentage axis, and d3.scaleSequential with d3.interpolateYlOrRd for color mapping. Axes are rendered via d3.axisBottom and d3.axisLeft, with a d3.legendColor legend indicating oil production levels.

PPeter Gish
71% match
Loading thumbnail…

Bar chart UN data

This example shows a horizontal bar chart displaying the top ten countries by 2020 population, as sourced from UN population data. The bars are rendered as green SVG rectangles, with the bar lengths proportional to population values from the CSV file. Built with React and D3 v5, the chart uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The visualization includes axis ticks, labels, and a gridline.

FFlorian Maas
71% match
Loading thumbnail…

Population

A horizontal bar chart displays the 2020 population of ten countries, sourced from a CSV file and rendered as SVG elements. The visualization uses React with a `useEffect` hook to fetch and parse the data via `csv`, then applies D3's `scaleBand` and `scaleLinear` for positioning. Gridlines and axis labels are generated from `xScale.ticks()`, while each country's bar length reflects its population value.

AAnmol Gupta
71% match
Loading thumbnail…

Bar chart

This bar chart displays the populations of ten countries in 2020, sorted by country name. Using React and D3 v5, it renders SVG rectangles via a scaleBand for the categorical y-axis and a scaleLinear for the numerical x-axis. The data loads from a CSV via d3.csv. Axes are custom components, and hover tooltips use native SVG `<title>` elements with formatted population values.

TTakuya Kitazawa
71% match