Area Chart

100%

✓ Published0🌍 Public

Last edited Mar 29, 2022

Created on Mar 29, 2022

This area chart visualizes global ozone-depleting substance emissions from 1960 to 2014, drawn with D3 v5 as an SVG. It uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` with gridlines, and a `d3.line` plus `d3.area` generator with `curveBasis` to create a smoothly filled purple shape beneath the line. The data is loaded from a CSV via `d3.csv` and rendered after coercing year and emission values to numbers.

AI-generated description

Area Chart

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart

This line chart shows the depletion of ozone-depleting substance emissions from 1960 to 2014, with year on the x-axis and emission levels on the y-axis. The visualization uses React and D3 v5, employing d3.csv to load the dataset, scaleLinear for both axes, and d3.line with curveBasis to generate a smooth purple path. Axis labels and a title are added via d3.axisBottom, d3.axisLeft, and SVG text elements within a 1000x500 SVG.

Ddivyageethanjali

85% match

Loading thumbnail…

Area Chart

This example visualizes carbon emissions over time using an area chart. The x-axis represents total emissions, while the y-axis represents the year, with the green filled area and blue stroke line showing the trend. Built with D3 v5 and React, it loads CSV data and renders as an SVG. The code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` for smooth interpolation, along with custom axis labels and title styling.

MManoj Kolluri

80% match

Loading thumbnail…

Area Chart

This area chart visualizes global warming trends by plotting annual CO2 emissions per capita against time. The chart uses a black filled area beneath a curve to emphasize emission levels over the years, with axes labeled for both time and emission intensity. Built with D3 v5, the visualization employs `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the smooth path, while `axisBottom` and `axisLeft` add gridlines and tick marks. Data comes from the Data Canvas - Sense Your City dataset, rendered as SVG in the browser.

RRohith Reddy

80% match

Loading thumbnail…

Fork of Line Chart

This fork of a line chart visualizes the decline in ozone-depleting substance emissions from 1960 to 2014. The data, loaded via `csv` from a GitHub gist, is rendered as a smooth curve using D3’s `line` generator with `curveBasis`. Scales are set with `scaleLinear` for both axes, while `axisLeft` and `axisBottom` add labeled ticks with gridlines. The React-based example uses SVG output, styling the maroon path with a thick stroke via CSS.

SSquad-UNT

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

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

77% match

Loading thumbnail…

ICE-7: Area Chart

This area chart visualizes CO2 emissions over time, with the x-axis representing total emissions and the y-axis showing the year. The chart uses an area generator with a basis curve to create a smooth, filled path in maroon. Built with D3 v5 within a React framework, it employs `scaleLinear`, `scaleTime`, `axisLeft`, and `axisBottom` for scales and axes, and renders as an SVG. Data is loaded from a CSV file using D3’s `csv` method.

CChaitanya Galla

77% match

Loading thumbnail…

Area_chart_Niharika

An area chart visualizes pollution percentages by year, filling the space beneath a smooth curve with orange. The data comes from a GitHub gist and is loaded via `d3.csv`. The chart uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with axes rendered using `d3.axisBottom` and `d3.axisLeft`. The area path is generated with the `d3.area` generator and a `curveBasis` interpolation, all drawn as SVG elements.

NNiharika Reddy Amanaganti

77% match