Climate Change and Energy Consumption Change in U.S.

100%

Climate Change and Energy Consumption Change in U.S.

✓ Published0🌍 Public

Last edited Jul 31, 2023

Created on Jul 30, 2023

Forked from barGraph

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Climate Change and Energy Consumption Change in U.S.

This interactive bar chart visualizes energy consumption per person in the U.S. from 2012 to 2021, highlighting the trend alongside climate change context. Built with D3 v5, the visualization uses an axis and bar layout where hovering over a bar triggers a tooltip displaying the exact value. The chart employs a listening rectangle to capture mouse events, with bars colored steel blue that change to green when selected. The tooltip, styled with a light blue background and red span text, provides detailed data points. The visualization is part of a series linked from the main page, connecting energy usage patterns to broader climate discussions.

Xxiaojingwu138

87% 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

81% 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

75% match

Loading thumbnail…

D3 Diverging Color Bar Chart

This interactive D3 bar chart visualizes the percentage change in natural gas consumption by the electric power sector across eleven U.S. states, with bars diverging from a central zero axis. Each bar’s fill color reflects the magnitude and direction of change using a sequential color scale based on the `interpolateRdBu` interpolator. The chart employs `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for both the horizontal value scale and bar lengths, and `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` for axis ticks. A `d3.legendColor` legend with nine cells maps the color scale to the numeric range. Data is loaded from a CSV file via `d3.csv`.

Mmariahdiaz

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…

D3 Bar Chart

This example visualizes natural gas consumption by the electric power sector across eleven U.S. states, using a horizontal bar chart where each bar’s length encodes the consumption value in billion BTU. The chart is built with D3.js (v7) and rendered as SVG, using `d3.csv` for data loading, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft`/`d3.axisBottom` for tick marks. Each bar is labeled with its exact value, and the plot includes a title and axis labels. The data comes from the included `data.csv` file.

Mmariahdiaz

71% match

Loading thumbnail…

D3 Sequential Color Bar Chart

This bar chart displays natural gas consumption by the electric power sector across eleven U.S. states, with each bar’s length encoding the consumption value in billion BTU. A sequential color scale using `d3.scaleSequential` and `d3.interpolatePuRd` maps higher consumption to darker hues, with a `d3.legendColor` legend clarifying the gradient. The chart is rendered as SVG using D3 v7, with axes created via `d3.axisBottom` and `d3.axisLeft`, and data loaded from a CSV file.

Mmariahdiaz

71% match

Loading thumbnail…

Dynamic Linechart

This dynamic line chart visualizes U.S. electricity consumption over time, with a growing path and data points that reveal the trend as the animation progresses. The graphic is rendered as an SVG, with the chart updating by increasing a counter that shifts the visible data window. The implementation uses the `d3` library for data parsing, time formatting, and chart construction, including `scaleTime`, `scaleLinear`, and axis functions. Data is fetched from a CSV file hosted on GitHub, and the animation is driven by a `setInterval` callback.

Sscheenmi@gmail.com

70% match