Line chart

100%

✓ Published0🌍 Public

Last edited Oct 27, 2025

Created on Oct 27, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart

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.

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

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

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

79% match

Loading thumbnail…

project

This example presents a dashboard of four D3.js charts—a line chart, bar chart, pie chart, and scatter plot—visualizing global sustainable energy data from a CSV file. It shows trends in renewable energy share, electricity access, fossil versus renewable energy proportions, and the relationship between GDP and energy consumption per capita, with a tooltip and country selector. The visualization uses D3 selections, scales, and time parsing to render SVG charts, updating all views based on the selected country.

YYeruva Snehith Reddy

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

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

76% match

Loading thumbnail…

ICE-6 Multi-Series Line Chart

This multi-series line chart visualizes renewable energy production over time, plotting yearly values for solar, wind, and hydro energy sources from a CSV dataset. The chart uses React with D3 v7 to render SVG elements, employing `d3.scaleLinear` for axes, `d3.line` for the path generator, and `d3.axisBottom`/`d3.axisLeft` for ticks. Colored lines distinguish each energy type, with a legend and axis labels clarifying the data.

Ppvvaishnavi93@gmail.com

76% match