Skip to main content
SimilarExport ZIP
100%

US Solar and Oil Production 2010-2020

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

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

Climate Change and Energy Consumption Change in U.S.

A stacked bar chart shows the annual change in U.S. primary energy source growth rates (Solar, Coal, Gas, Nuclear) from 2012 to 2021, with tooltips revealing exact values on hover. Built with D3 v5, it uses `d3.layout.stack()` and `d3.scale.ordinal()` to render SVG rectangles, with axes and a legend. The visualization highlights how energy consumption patterns shift over the decade, reflecting climate-related trends. Data is embedded directly in the code as arrays, and interactivity is implemented via mouseover and mousemove events.

Xxiaojingwu138
71% match
Loading thumbnail…

Document

This interactive line chart shows the annual growth in U.S. electricity generation from Solar and Gas sources from 2012 to 2021. Users click buttons to toggle between the two datasets, triggering a transition that updates the axes and line path. Built with D3 v4, it uses `d3.line`, `d3.axisBottom`, and `d3.axisLeft` with linear scales, plus SVG transitions and a tooltip for mouseover values. Data comes from the provided `data.csv`, with hardcoded arrays in `vis.js` for each energy source.

Xxiaojingwu138
70% match
Loading thumbnail…

Untitled

An interactive bar chart displays the growth rate change in U.S. energy sources from 2012 to 2021, with buttons to toggle between Solar and Gas datasets. The visualization shows outlined, red-stroked bars in an SVG, where each bar’s height represents the annual emission growth value. Using D3 v4, the code implements `d3.scaleBand()` for the x-axis, `d3.scaleLinear()` for the y-axis, and transitions that animate axis updates over 2.5 seconds. A tooltip appears on mouseover, and the chart title and axis labels update dynamically based on the selected energy source.

Xxiaojingwu138
69% match
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
69% 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
67% match
Loading thumbnail…

Australian energy: bar chart

This interactive bar chart visualizes Australian energy production by fuel type from 1977 to 2013, using data from a CSV file. The visualization displays five energy sources—coal, oil and LPG, gas, renewables, and uranium—with each vertical bar representing a year’s output in petajoules. Built with D3 v3, the chart renders as an SVG with smooth animations. Users can click buttons to switch between fuel types, and hover over bars to view exact values via a tooltip. The x-axis maps years while the y-axis encodes energy amounts, with coal showing a steady upward trend from roughly 2,000 to over 11,000 petajoules across the period. The design uses a clean white background, Roboto and PT Serif fonts, and subtle hover effects on the bars.

GGerardoFurtado
67% match
Loading thumbnail…

US Energy Flow Data 2018

This example visualizes the flow of energy across the United States in 2018, tracing sources like petroleum, natural gas, and renewables through to end-use sectors such as residential, commercial, and transportation. It uses a Sankey diagram built with D3.js, where link widths represent energy quantities in quadrillion BTUs. The data comes from the Department of Energy, with nodes and links defined in CSV files and rendered using D3’s sankey plugin.

CCurran Kelleher
65% match