Multi-Series Chart — CO₂ and Renewables 2025

100%

Multi-Series Chart — CO₂ and Renewables 2025

✓ Published0🌍 Public

Last edited Oct 19, 2025

Created on Oct 19, 2025

This example shows a multi-series combo chart comparing CO₂ emissions (bars, in million tonnes) and renewable energy percentage (line) for countries in 2025. Country data is sorted by emissions and color-coded by region. Built with D3 v7, it renders an SVG canvas and uses `d3.scaleBand`, `d3.scaleLinear`, and axes with gridlines. Data is loaded from a CSV via `d3.csv` with `d3.autoType`, and an interactive tooltip responds to hover. The chart animates on load and displays a legend for regional categories.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

CO2 Bar Chart 2025

This bar chart displays CO₂ emissions by country for 2025, ranking nations from highest to lowest emissions. Each bar’s length encodes emission values in megatons, while color distinguishes geographic regions through a scaleOrdinal. The visualization uses d3.csv to load remote data, d3.scaleBand and d3.scaleLinear for positioning, and includes hover tooltips showing country, region, and precise values. Animated bar transitions grow from the baseline, and the SVG rendering includes axis labels and an interactive legend.

Vvunnamnandini13@gmail.com

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

80% match

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

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

77% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart shows annual CO2 emissions (in million tonnes) for multiple countries over time, with each country represented as a separate colored line. The data comes from the Data Canvas - Sense Your City dataset, displayed as an SVG using D3 v5. The visualization uses d3.nest to group data by country, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis for smooth paths. A color legend lists all countries alongside the chart.

Nnadia-el

77% match

Loading thumbnail…

Reusable Scatter Plot (CO₂ vs GDP, 2025)

This reusable scatter plot compares GDP per capita against CO₂ emissions for countries in 2025, with circle size encoding population and color distinguishing regions. Built with D3 v7, the chart renders as SVG and uses d3.scaleLinear, d3.scaleSqrt, and d3.scaleOrdinal to map data dimensions. Interactive tooltips appear on mouseover, showing country details such as renewable energy percentage, while data is loaded from a CSV file.

Vvunnamnandini13@gmail.com

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

75% match

Loading thumbnail…

Line Chart with Multiple Lines

This example displays CO2 emissions by country, plotting profit against sub-category over time, with each region represented by a distinct colored line. The visualization uses D3 v5 within a Vue framework, rendering to SVG. It employs `d3.line` with `curveBasis`, `d3.nest` to group data by region, and `d3.scaleOrdinal` with `schemeCategory10` for coloring. Axis labels and legends are added via `d3.axisLeft`, `d3.axisBottom`, and a custom `colorLegend` function, based on sample data from annualco2.csv.

Pprincit

75% match