Skip to main content
SimilarExport ZIP
100%

Area Chart

✓ Published1🌍 Public
Mmaddulanagasanjana@gmail.com
Last edited Oct 27, 2025
Created on Oct 27, 2025
Forked from Fork of 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.

AI-generated description
MIT Licensed

Similar vizzes

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
82% match
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
82% match
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
80% match
Loading thumbnail…

Activity-6-Q3

A stacked horizontal bar chart displays the percentage distribution of five energy sources—Coal, Solar, Wind, Nuclear, Hydro, and Natural Gas—across five categories from below 10% to above 40%. The chart uses d3.stack, d3.scaleOrdinal, d3.scaleBand, and d3.scaleLinear to render SVG rectangles, with tooltips on mouseover showing exact percentages via d3.format. A legend identifies each color-coded energy source. Data comes from the embedded energy_data.csv file.

Kkotasc18@gmail.com
74% match
Loading thumbnail…

ICE 74 MD

This animated area chart displays renewable energy generation trends for the USA from 2010 to 2024, comparing solar, wind, and hydro sources. The visualization uses D3 v7’s `d3.area()` and `d3.line()` generators with `curveMonotoneX` to render semi-transparent filled regions with stroked boundaries, while `d3.axisBottom` and `d3.axisLeft` provide labeled scales. Hover interactions reveal tooltips on data points, and the chart reads from a CSV file containing annual GWh values for multiple countries, though only USA records are visualized.

Ddandamidhun41613@gmail.com
74% match
Loading thumbnail…

ICE-7:Area Chart

This area chart visualizes nuclear energy usage from 2010 to 2020, with a red line showing the trend and an indigo-filled area beneath it. Time is mapped on the x-axis and nuclear values on the y-axis, using D3 v5 with scaleTime, scaleLinear, axisBottom, and axisLeft. The line and area paths are generated with d3.line and d3.area using curveBasis for smoothing, while CSV data is loaded and parsed via d3.csv and d3.timeParse. Grid lines and styled axis labels enhance readability.

BBajiSharifPatan@my.unt.edu
74% 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
73% match
Loading thumbnail…

area chart

This area chart visualizes electricity consumption against population for major cities, with the data sorted by population to show a clear upward trend. The chart uses blue filled areas beneath a yellow line, with orange points providing interactive tooltips that display additional city metrics. Built with D3 v7, the visualization loads CSV data from a GitHub gist, applies data-cleaning regex operations, and uses `d3.area`, `d3.line`, and `d3.curveMonotoneX` for smooth rendering. It also features grid lines, axis labels, and SVG animation for tooltip transitions.

Sshreelasya.bezawada@gmail.com
73% match