Line Chart

100%

✓ Published1🌍 Public

Last edited Oct 27, 2025

Created on Oct 27, 2025

This line chart compares the growth of four global energy sources—solar, wind, hydro, and nuclear—in gigawatts (GW) from 2000 to 2022, using data from Sun_Wind_Energy.csv. Each source is rendered as a smooth monotone line with distinct pastel colors, and a legend identifies the series. The visualization uses D3.js v7 to load the CSV, generate SVG paths via the `d3.line` generator with `d3.curveMonotoneX`, and scales axes with `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft`. Light horizontal gridlines aid reading values across the increasing trends.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Line chart

This line chart displays the growth of four global energy sources—solar, wind, hydro, and nuclear—from 2000 to 2022, using smoothed monotone curves over a white SVG canvas. The visualization reads a CSV file and maps each source to a distinct pastel color, with a legend on the right. It uses `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` with `d3.curveMonotoneX` to construct the axes and paths, while gridlines and labels are added via D3’s selection and join methods.

Mmaddulanagasanjana@gmail.com

96% match

Loading thumbnail…

Line chart

Four pale pastel line charts track installed capacity in gigawatts for solar, wind, hydro, and nuclear energy from 2000 to 2022, all trending upward. Built with D3 v7 and SVG, the chart reads a CSV file via `d3.csv`, maps data with `d3.scaleLinear`, and renders smooth monotone curves using `d3.line` with `d3.curveMonotoneX`. A legend and gridlines complete the view.

Mmaddulanagasanjana@gmail.com

87% match

Loading thumbnail…

Area Chart

This simple stacked area chart visualizes the growth of global installed energy capacity (Solar, Wind, Hydro, and Nuclear, in GW) from 2000 to 2022, highlighting that all categories rise over the period. The chart uses the D3.js library version 7, reading data from a CSV file and rendering to SVG. It constructs the visualization using `d3.stack()` and `d3.stackOffsetNone` to compute the layers, `d3.curveMonotoneX` for smooth area interpolation, and standard D3 scales, axes, and gridlines; a legend identifies each energy source.

Mmaddulanagasanjana@gmail.com

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

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

75% match

Loading thumbnail…

ICE63MD

This visualization presents two views of renewable energy data spanning 2010–2024. The first chart shows trends for Solar, Wind, and Hydro generation, with lines and points for each energy source. The second chart combines bars showing total generation per year with a line overlay tracking the solar trend specifically. The implementation uses the D3 library, with `d3.select` to build SVG elements, `d3.scaleLinear` and `d3.scaleBand` for axis scaling, and `d3.axisBottom` and `d3.axisLeft` to render axes. Data is loaded from a CSV file using `d3.csv`.

Ddandamidhun41613@gmail.com

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

74% match

Loading thumbnail…

4th visualisation

This visualization shows the composition of electricity generation by country, using stacked bar charts to break down each country’s total energy mix into six sources: coal, biofuel, hydro, nuclear, solar, and wind. The chart uses d3.csv to load data from a GitHub-hosted dataset, then applies d3.stack, d3.scaleBand, and d3.scaleLinear to compute and position the stacked segments. Color-coded bars via d3.scaleOrdinal distinguish the energy types, while interactive tooltips are provided through SVG title elements and axes are generated with d3.axisBottom.

Vvenkatabhaskaratetali@my.unt.edu

74% match