Skip to main content
SimilarExport ZIP
100%

7

✓ Published0🌍 Public
Ssowmyanagula@my.unt.edu
Last edited Mar 26, 2022
Created on Mar 26, 2022

This SVG line chart, built with React and D3 v5, visualizes India’s annual CO2 emissions per capita over time. It loads data from a remote CSV and uses `d3.scaleTime`, `d3.scaleLinear`, and a `d3.line` generator to plot the trend. Gridlines and axis labels are added via `d3.axisBottom` and `d3.axisLeft`, while customizable marker lines highlight specific data points. The chart spans the full viewport and includes a black, thick line path to emphasize the emission curve.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

India CO2 Emissions

This visualization shows India’s annual CO2 emissions per capita over time as a line chart, with the x-axis representing years and the y-axis emissions values. Built using React and D3 v5, it loads CSV data via `d3.csv`, scales time and linear domains with `scaleTime` and `scaleLinear`, and renders SVG axes and a path using `axisBottom`, `axisLeft`, and the `line` generator. Grid lines and marker components add reference points for readability.

LLakshmiVandanaNunna
87% match
Loading thumbnail…

ICE 7 The Line Chart

This line chart displays CO2 emissions in India from 1860 to 2022. The visualization uses a linear scale for both the year (x-axis) and emission tons (y-axis), with gridlines and labeled axes. Built with D3 v5 and React, the code loads CSV data from a GitHub gist, then renders an SVG path using `d3.line` and scales (`scaleLinear`, `extent`, `max`). Axis ticks are generated via `axisBottom` and `axisLeft`, with tick formatting and padding configured. The chart is styled through CSS, with a blue stroke for the line path.

AAniv Chakravarty
85% match
Loading thumbnail…

Fork of India CO2 Emissions

A line chart tracks India’s population alongside CO2 emissions per capita over time, using a black stroke for the population trend and labeled axes. The visualization loads a CSV from a GitHub gist via `d3.csv`, parses years with `timeParse`, and renders an SVG through React components. Scales from `d3.scaleTime` and `d3.scaleLinear` position the line, while `d3.axisBottom` and `d3.axisLeft` add gridlines and tick labels. Marker lines, though defined, are not actively invoked in the displayed chart.

Bbhargavarathod
84% match
Loading thumbnail…

ICE 7 Line Chart

This line chart shows India’s CO2 emissions over time, with a single steelblue line tracing annual values on a time-scaled x-axis and a linear y-axis labeled in MtCO₂e. The code uses d3.csv to load data, d3.timeParse to convert year strings into dates, and d3.scaleTime, d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.line to render the SVG chart. The visualization filters out invalid data points before drawing, and the axes are labeled directly within the SVG group elements.

Yyvarshachowdary@gmail.com
84% match
Loading thumbnail…

Fork of India CO2 emissions

A line-area chart shows India's CO2 emissions per capita over time, with the area filled in maroon beneath a smooth curve. The chart uses D3 v5's `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the SVG path, while `axisBottom` and `axisLeft` render labeled axes with gridlines. Data is loaded via `csv` from a GitHub gist and parsed as date objects, with the y-axis labeled "CO2 emissions (per capita)" and the x-axis as "Year."

Bbhargavarathod
83% match
Loading thumbnail…

Fork of India CO2 emissions

A filled area chart displays India’s annual CO2 emissions per capita over time, with a maroon smoothed curve against a gray grid. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the path, and `axisBottom`/`axisLeft` for ticks. Data loads from a remote CSV via `d3.csv`, mapping year strings to dates and emission values for rendering in SVG.

RRahulSai05
82% match
Loading thumbnail…

India CO2 emissions

The visualization displays India's annual CO2 emissions per capita over time as an area chart, with the x-axis representing years and the y-axis metric tons of emissions. The chart uses a basis-smoothed curve to fill the area beneath the line. Built with D3 v5, the code leverages `select`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` alongside `curveBasis`. It renders to SVG and loads data from a raw CSV hosted on GitHub, with axes and title styled via CSS.

LLakshmiVandanaNunna
82% match
Loading thumbnail…

ICE 7 The Area Chart

This example visualizes CO2 emissions in India from 1860 to 2022 as a filled area chart, with a blue line tracing the emission trend atop a translucent yellow region. It uses d3.csv to load the dataset, d3.scaleLinear for both axes, d3.line and d3.area to generate the paths, and d3.axisBottom and d3.axisLeft with gridlines for the axes. The SVG rendering includes custom axis labels and tick formatting, with styling applied via CSS classes.

AAniv Chakravarty
81% match