Skip to main content
SimilarExport ZIP
100%

Some energy consumption data by type from the eia

✓ Published0🌍 Public
AAndre J Denais
Last edited Sep 24, 2020
Created on Sep 24, 2020

This interactive scatter plot displays energy consumption data across U.S. states and regions, with a dropdown menu to switch between different fuel types and years from the EIA dataset. The visualization renders SVG circles whose vertical position reflects the selected consumption value while the horizontal axis shows the state or region. React handles the component state and dropdown interactions, while d3.v6 provides the scale functions (`scaleTime`, `scaleLinear`) and axis components. The underlying CSV data is loaded asynchronously via d3.csv, and each circle includes a native SVG `<title>` element for hover tooltips.

AI-generated description

A dataset of information obtained from the eia

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Scatter plot with drop down

This scatter plot visualizes fuel consumption data from a Kaggle dataset, showing relationships between continuous variables such as fuel consumption, CO2 emissions, and engine cylinders. The visualization uses drop-down menus to let users select which attributes appear on the x and y axes, updating the scatter plot dynamically. Built with React and D3 v5, the code uses `scaleLinear`, `extent`, and `csv` from D3 to process the data, while custom SVG components (`AxisBottom`, `AxisLeft`, `Marks`) render the axes and circles. The plot uses a `ReactDropdown` component for interactive axis selection, with tooltips displaying formatted tick values on hover.

AArjun Rao
74% match
Loading thumbnail…

reusable

This interactive scatter plot visualizes city-level energy metrics, comparing population against CO₂ emissions while using color to represent renewable energy adoption buckets (low, medium, high). The chart cycles through five different x-axis variables every three seconds, including electricity consumption, renewable percentage, and temperature, with smooth updates via D3’s data joins. Built with d3.v7, the reusable scatterPlotFactory pattern manages scales, axes, and a categorical color legend, rendering animated SVG marks that re-position as the axis changes. The dataset is fetched from a remote CSV and parsed client-side.

Sshreelasya.bezawada@gmail.com
74% match
Loading thumbnail…

D3 Scatter Plot

This scatter plot displays U.S. natural gas consumption by the electric power sector in billion BTU per year from 2000 to 2010. The code loads data from a CSV file and renders it as an SVG using D3 v7. It uses `d3.scaleLinear` for the x-axis, `d3.scalePoint` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for tick marks. Circles are appended to represent each data point, with axis labels and a title included.

Mmariahdiaz
73% match
Loading thumbnail…

activity9-task9

This pie chart visualizes net electricity consumption worldwide from 1982 to 2022, displaying the top 15 years by consumption value. The visualization uses D3 v5 within a React framework to render SVG arcs via `d3.arc` and `d3.pie`, with color encoding through `d3.scaleOrdinal` and `schemeCategory10`. A legend with rectangles and text labels shows each year and its corresponding consumption value using custom number formatting. Data is loaded from a CSV URL and sorted descending before rendering.

BBindumadhavi
72% match
Loading thumbnail…

new

This visualization displays a line chart of energy sector intensity forecasts over time, using a dataset from an external JSON API. The x-axis represents forecast years, while the y-axis maps intensity values, with a colored legend distinguishing intensity levels from "Very Low" to "V.High." Built with D3 v6 in a React framework, the code employs `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the axes, and `line` with `curveCatmullRom` to draw the smoothed path. Data points are rendered as circles, colored conditionally based on intensity thresholds, with grid lines and labels styled via CSS.

AAkshay
72% match
Loading thumbnail…

Untitled

This interactive line chart displays energy consumption data across multiple building sites, allowing users to switch between locations via a dropdown menu. The visualization employs an SVG-rendered multi-series plot with a smooth animated transition when a new site is selected. The code uses `d3.csv` for data ingestion, `d3.scaleLinear` for axes, `d3.line` for plotting, and `d3.transition` to animate changes. A color scale assigns distinct hues to each site. The chart reveals periodic patterns in usage, with site 7 showing notable gaps where zero consumption was recorded.

KKeerthiKandadai
72% match
Loading thumbnail…

Untitled

A small-multiple area chart displays monthly energy consumption across different sites, with each panel representing a distinct location. The visualization uses D3.js v4 to load data from a CSV file, parse the time series, and render a separate small SVG chart for each site. The code employs d3.nest() to group data by site, d3.line() for path generation, and d3.scaleOrdinal() for color encoding, with axes rendered per chart.

Mmab3105
72% match
Loading thumbnail…

Scatterplot Version 2

This example shows how an interactive scatterplot lets users explore relationships between variables in the classic 1970s automobile fuel-efficiency dataset. Through dropdown menus, users select which numeric columns (such as miles per gallon, horsepower, or weight) map to the X and Y axes, and optionally group points by model year or origin via a categorical legend. A slider and numeric input control circle size and opacity. Built with React and D3 v5, the visualization uses `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` with animated transitions on SVG circles, plus a custom tooltip that appears on mouseover, displaying the values for the currently selected axes.

SSchmittYannic
72% match