Skip to main content
SimilarExport ZIP
100%

D3 - Multi-Line Chart

✓ Published0🌍 Public
CChandana Srinivas
Last edited Mar 18, 2024
Created on Mar 14, 2024
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 - Small Multiples Line Chart

This example shows a series of small multiples line charts, each depicting CO2 emissions over time for a specific country. The D3.js code (version 7) loads data from a CSV file and uses `d3.scaleLinear` for axes, `d3.line` for the line paths, and `d3.legendColor` for a legend. It renders as SVG, with interactive hover tooltips revealing emission values per year.

CChandana Srinivas
88% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays annual carbon dioxide emissions per capita for the top 10 countries, using multi-color lines to compare trends over time. The visualization reads data from a CSV file and renders it as SVG, with each line representing a country, a color legend for identification, and labeled axes for year and emissions. The implementation uses D3 v5 APIs including `d3.csv`, `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.nest`. A custom `colorLegend` function generates the legend, and gridlines and axis labels are styled for clarity.

Ssafdarawan
84% match
Loading thumbnail…

Line Chart Using D3.js ice-7

This example shows a line chart of CO₂ emissions over time, with data spanning from 1960 to 2020. The visualization displays a rising trend in emissions, plotted as a single steel-blue line against axes for year and CO₂ levels. The code loads CSV data using `d3.csv`, then constructs an SVG with `d3.scaleLinear` for both axes and draws the line path via `d3.line`. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while text elements add axis labels and a title.

Bbadrinath888@gmail.com
83% 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
83% match
Loading thumbnail…

D3 - Time Series HeatMap

This example visualizes methane emissions across countries and years using a D3.js heatmap. Each cell’s color encodes emission values via `d3.scaleSequential` with the Viridis interpolator, while `d3.scaleBand` positions countries on the x-axis and years on the y-axis. The code loads CSV data from a GitHub gist, renders axes with `d3.axisBottom` and `d3.axisLeft`, and includes an interactive tooltip that displays exact CH4 values on mouseover. A horizontal color legend, built with the d3-legend library, accompanies the SVG chart.

CChandana Srinivas
83% 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
82% match
Loading thumbnail…

v3

This example visualizes global CO₂ emissions over time using a smooth line chart, with the x-axis representing years and the y-axis representing emissions in million tonnes. The chart filters the loaded CSV data for the "World" country and plots it as a red line. Built with D3.js v7, the code uses `d3.csv` for data loading, `d3.scaleLinear` for axes, `d3.line` with the `d3.curveCatmullRom` curve for the smoothed path, and `d3.axisBottom` and `d3.axisLeft` for labeled axes. The SVG rendering is configured within a fixed chart area, and the data originates from the `preprocessed_owid_co2_data.csv` file.

Ssrisailapu.rc@gmail.com
82% match
Loading thumbnail…

project d3

This visualization presents global CO2 emissions and population data through a series of linked charts. It shows a line chart of emission trends over the last twenty years, a scatter plot by country, a histogram of emission values, and bar charts highlighting the top and least populated countries. The code uses d3.csv to load the dataset, then employs d3.group, d3.sum, and d3.scaleBand, alongside d3.line, d3.axisBottom, and d3.axisLeft to render SVG charts.

Jjyothirmaijyothi2017@gmail.com
82% match