Skip to main content
SimilarExport ZIP
100%

Document

✓ Published1🌍 Public
Xxiaojingwu138
Last edited Jul 31, 2023
Created on Jul 28, 2023
Forked from D3 Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

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
85% 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
77% 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
75% match
Loading thumbnail…

Dynamic Linechart

A dynamic line chart visualizes electric production over time, progressively revealing data points as the animation advances. The chart uses D3’s `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while a `line()` generator draws the path and circles mark each observation. Data from the Electric_Production dataset is loaded via `d3.csv` and parsed with `d3.timeParse`. The visualization animates by incrementing the number of plotted points, updating the SVG in a `setInterval` loop.

AAbhinay-Mannepalli
73% match
Loading thumbnail…

Document

This interactive bar chart shows monthly values for a selected year, with a slider controlling the year from 2009 to 2014 and a smooth 2-second transition animating the bars to their new heights and colors. The visualization uses D3 v4 with a band scale for months, a linear scale for values, and a quantile color scale to encode magnitude. Data is loaded from six CSV files using d3.queue, and the chart updates by merging entering and existing SVG rect elements via `selection.merge` and applying axis transitions.

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

HYDRO ENERGY GENERATION

This visualization displays global hydro energy generation (in Terawatt-hours) across multiple years, using a smooth blue line plot to trace the trend over time. The chart renders as an SVG using D3 v5, explicitly importing functions like `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with a `curveBasis` smoothing applied. Data is loaded from a GitHub gist CSV via `csv()`, with numeric fields parsed before drawing. The visualization includes labeled axes for “Year” and “Hydro_TWh,” plus a title, all styled through an external CSS file that sets the line’s blue color and stroke width.

VVAbhiram99
71% match