Climate Change and Energy Consumption Change in U.S.

100%

Climate Change and Energy Consumption Change in U.S.

✓ Published0🌍 Public

Last edited Aug 1, 2023

Created on Jul 31, 2023

Forked from Document

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

68% match

Loading thumbnail…

A2 - Bar Chart

This bar chart visualizes petroleum consumption in residential areas across U.S. states in 2019, highlighting the top five and bottom five states by usage. The chart uses a logarithmic scale for bar widths, with color intensity (green to red) indicating whether consumption levels are considered good or bad. Interactive hover annotations display exact values. Built with p5.js, the visualization loads data from a remote CSV file and sorts it programmatically, drawing axes, bars, and labels through canvas rendering functions.

RRavneet Singh Bhatia

68% match

Loading thumbnail…

Bar Chart

A horizontal bar chart displays CO2 emissions in kilotonnes for 39 countries in 2009, ranking the United States highest at over 5.4 million kt. The visualization uses D3.js v3 with an ordinal y-scale, a linear x-scale, and transitions that animate the bars and value labels from zero to their final lengths. Countries are labeled on the left, with a separator line, and hover effects increase bar opacity.

LLuisSevillano

67% match

Loading thumbnail…

Beer Consumption in U.S.

This area chart displays beer consumption per person in the U.S. over time, with the x-axis representing years and the y-axis measuring litres per person. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to render the SVG path, alongside `axisBottom` and `axisLeft` for labeled axes. Data is loaded via `csv` from a VizHub-hosted dataset, and the chart includes a legend for multiple series, though the primary rendered element is the maroon area fill.

CChooo4u

66% match