Skip to main content
SimilarExport ZIP
100%

CO2-buttons

✓ Published0🌍 Public
Llamiyaa
Last edited Oct 7, 2019
Created on Oct 7, 2019
Forked from Hello VizHub

This interactive line chart tracks CO2 emissions per capita from 2000 to 2008 for Germany, France, and the United States. A dropdown menu lets users switch between countries, triggering a smooth transition that updates both the line and its accompanying dots. The visualization loads data from a CSV file using d3.csv and renders an SVG with D3 v4, relying on d3.line for the path, scaleLinear for axes, and .transition().duration(1000) to animate the changes.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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
78% 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
78% 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
76% match
Loading thumbnail…

D3 Data Dashboard

This dashboard visualizes global CO2 emissions across countries, continents, and years, allowing users to compare total emissions or per-capita values via an interactive world map, a pie chart of continental shares, and a bar chart of annual trends for a selected country. Built with D3 v4, it uses `d3.geoMercator` and `d3.geoPath` for map rendering from TopoJSON world atlas data, plus animated SVG transitions for the map, pie arcs, and bars. A year slider and radio buttons drive updates, with tooltips revealing detailed values from the CSV dataset.

VVishnu Sudireddy
75% 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
75% match
Loading thumbnail…

Fork of Lab 1: Line Chart

This line chart shows how carbon dioxide emissions have changed from 1990 to 2014 for three selected countries: the United States, Canada, and Spain. Each country is represented by a colored line, with an ordinal color scale distinguishing them, and the data is sourced from the UN Data service. The visualization is built using D3.js with an SVG rendering, incorporating interactive elements like a dropdown menu for selecting countries and a hover tooltip that displays detailed values. The chart dynamically updates its axes and scales based on the selected data, and the lines are animated when the selection changes.

0007ebey
74% 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
74% 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
74% match