Fork of ICE-7:Area Chart

100%

Fork of ICE-7:Area Chart

✓ Published0🌍 Public

Last edited Mar 29, 2022

Created on Mar 29, 2022

This example visualizes nuclear usage from 2010 to 2020 as a combined line and area chart, with the red line tracing the trend in units over time and an indigo fill beneath the curve. It uses D3 v5 via the `d3` module, employing `scaleTime` and `scaleLinear` for the axes, `line` and `area` generators with `curveBasis` for smoothing, and `axisLeft`/`axisBottom` for tick marks. The chart loads CSV data from a Gist, parsing the year and unit columns, and renders to an SVG with custom-styled axes and labels.

AI-generated description

combined line and area charts

MIT Licensed

Similar vizzes

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

88% match

Loading thumbnail…

Fork of ICE-7 Fork of Area Chart

This area chart displays CO2 emission values from 1960 to 1973, with years on the x-axis and emission values on the y-axis. The visualization combines a smooth line and a filled pink area beneath it, using D3 v5’s `scaleTime`, `scaleLinear`, and `area` generator with `curveBasis`. Data is loaded from a CSV via `d3.csv` and rendered as an SVG with styled axes, tick marks, and axis labels. The example demonstrates importing D3 modules locally and via UNPKG.

Ppemmasaniprudhvinadh

85% match

Loading thumbnail…

ICE-7

This example shows a line chart of the highest nuclear energy consumption from 2010 to 2020, with the year on the x-axis and nuclear usage on the y-axis. The visualization uses D3 v5 to load CSV data, parse dates with `d3.timeParse`, and render an SVG with `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators. The chart includes labeled axes, red tick text, blue grid lines, and a brown stroke for the line path. The data is fetched from a GitHub gist.

Ppreethamkesa

85% match

Loading thumbnail…

ICE-7 Fork of Area Chart

This example shows CO2 emission values from 1960 to 1973 as a pink area chart overlaid with a black line curve. The visualization loads CSV data from a GitHub gist and uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, `d3.line`, and `d3.curveBasis` to generate smooth paths in SVG. Gridlines are drawn via axes with tick sizes, and axis labels are formatted using `d3.format`.

Kkarumanchimanasa

85% match

Loading thumbnail…

Fork of ICE-7 Fork of Area Chart

This area chart visualizes CO2 emission values from 1960 to 1973, using a pink filled area beneath a black smooth curve to show trends over time. The chart includes labeled axes for year and value, with gridlines and tick formatting. Built with D3 v5, it uses `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.area` with `d3.curveBasis` to generate the SVG path.

Pprachow

85% match

Loading thumbnail…

ICE 7- Line Chart

This line chart displays nuclear energy usage across countries from 2010 to 2019, with year on the x-axis and nuclear usage values on the y-axis. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render an SVG path. Data is loaded asynchronously from a CSV file via `d3.csv` and parsed into date and numeric values. Axes include tick lines and labels, with custom styling for axis text, titles, and the maroon line path defined in an external stylesheet.

BBajiSharifPatan@my.unt.edu

84% match

Loading thumbnail…

Fork of ICE-7 Area Chart

This fork of ICE-7 Area Chart visualizes the cost of sales from 2000 to 2013 using an area chart with a smooth curve. The SVG rendering uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `line`, `curveBasis`, `axisLeft`, and `axisBottom`. A black line traces the data while a yellow filled area beneath it emphasizes the trend. The chart loads CSV data from a GitHub gist, formats years as dates, and labels axes with the provided titles.

Ssumit

84% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart displays the current population of different countries over time, using a smooth, basis-curved line and an orange fill beneath it. The visualization is built with D3 v5, leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `line` and `area` generators with `curveBasis`. Data is loaded from a remote CSV file and rendered as an SVG, with a grid, axis labels, and a title.

0057SatvikDamera

84% match