Line Chart

100%

✓ Published1🌍 Public

Last edited Jul 7, 2022

Created on Jul 7, 2022

This line chart visualizes carbon emissions from 1740, plotting year against total emissions as a smooth, rounded curve. The graph uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate the SVG path, while `csv` loads external data. The chart includes labeled axes, a title, and gridlines, with a maroon stroke for the line and sans-serif text styling.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

84% match

Loading thumbnail…

D3 - Multi-Line Chart

This multi-line chart displays carbon dioxide emissions per country from 1970 to 1979, using four distinct colored lines with circular data points. The visualization loads CSV data from a GitHub gist and renders an SVG with a light gray background panel, axis labels, and a title. It uses d3.csv for data loading, d3.line to construct the paths, and d3.axisBottom and d3.axisLeft for the axes. Interactive tooltips appear on mouseover, showing the emission value for the hovered point, with circles enlarging to indicate selection. The chart also incorporates colorbrewer colors and the d3-legend library.

CChandana Srinivas

82% match

Loading thumbnail…

Untitled

A line chart shows the annual value of CO2 emissions from 1995 to 2014, with each year represented by a white circle with a teal outline. The circles change their stroke to black on hover, and a tooltip displays the exact value for each point. The visualization uses D3 v4 to read the CSV data, build a time-scale X axis and a linear Y axis, and draw a smoothed curve using `d3.line()` with `curveBasis`. The SVG output includes axes, circles, and the path, while the tooltip is appended as an HTML div in the page.

Llamiyaa

81% match

Loading thumbnail…

Line7

This line chart visualizes carbon emissions in Rio from 2010 to 2015, drawing on a CSV dataset. Using D3 v5, it encodes time on the x-axis with `d3.scaleTime` and emission values on the y-axis with `d3.scaleLinear`. The SVG rendering includes axes, grid lines, labels, and a purple line path generated via `d3.line`. Data is loaded asynchronously with `d3.csv` from a GitHub gist.

AABCDB15

81% match

Loading thumbnail…

7

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.

Ssowmyanagula@my.unt.edu

81% match

Loading thumbnail…

Fork of Stylized Line Chart

This visualization presents a stylized line chart comparing carbon dioxide emissions and per-capita emissions over time, using data from a CSV file hosted on GitHub. Built with React and D3 v5, it renders as an SVG with distinct axes and a smooth natural curve. The chart employs `scaleTime` and `scaleLinear` for axis scaling, with `line()` and `curveNatural` from D3 to draw the path, while custom React components for the bottom and left axes handle tick marks and labels. Styling is applied via CSS classes, using the Poppins font.

AArlind Pestisha

80% match

Loading thumbnail…

Lab 1: Line Chart

A line chart visualizes annual CO2 emissions from 1990 to 2014 for selected countries using UN Data, with interactive country selection via dropdown and tooltips. Built with React and D3 v4, it uses d3.nest for data grouping, d3.scaleLinear and d3.axisBottom/Left for scales, and d3.line for path generation. Animated transitions update lines when the selection changes, with colors from d3.scaleOrdinal(d3.schemeCategory10).

DDenise Mauldin

79% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays per-capita CO2 emissions from 1987 to 2017 for ten countries, with each colored line representing a nation and a legend on the right. The data is loaded from `annualco2.csv` and rendered as SVG paths using D3 v5’s `line` generator with `curveBasis` smoothing. Axes are drawn with `axisBottom` and `axisLeft`, while `scaleTime` and `scaleLinear` map years and emission values. A custom `colorLegend` component and `scaleOrdinal` with `schemeCategory10` assign distinct colors to each country.

Ssafdarawan

79% match