Line Chart

100%

✓ Published1🌍 Public

Last edited Mar 29, 2022

Created on Mar 28, 2022

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Area Chart

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.

Ddivyageethanjali

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

84% match

Loading thumbnail…

Line Chart

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.

MManoj Kolluri

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

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

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

74% match

Loading thumbnail…

Line Chart

This line chart visualizes temperature changes over time using a dataset of Oceania COVID-19 reports. The chart employs smooth, natural curves to connect data points across a time-series axis. Built with React and D3 v5, it renders as an SVG, with the `line()` and `curveNatural()` functions from D3 generating the path. Axes are constructed using `scaleTime()` and `scaleLinear()`, with tick labels formatted via `timeFormat()`. The dataset is loaded asynchronously from a CSV file using D3’s `csv()` function.

SSonuSriN

74% match

Loading thumbnail…

CO2

This line chart shows CO2 emission values from 2000 to 2014, with each data point marked by a circle that reveals its exact value on hover via a tooltip. The visualization uses D3 v4 to render an SVG with time-scaled X axis and linear Y axis, applying a basis curve to smooth the line path. It loads data from a CSV file and demonstrates axis customization, interactive mouse events, and tooltip styling.

Llamiyaa

74% match