China / US - Distribution of total Co2 emissions in the population

100%

China / US - Distribution of total Co2 emissions in the population

✓ Published0🌍 Public

Last edited Nov 30, 2023

Created on Nov 30, 2023

This visualization compares the distribution of total CO2 emissions relative to population percentages for China and the US, using a hybrid scatter plot and bar chart layout within an SVG canvas. Two gray regions represent China's population (left) and CO2 emissions (right), with overlapping triangular paths and gridlines to convey proportional relationships. The chart is built with React and rendered via raw SVG elements, including `<path>`, `<line>`, and `<rect>` tags, with CSS positioning for axis labels. The minimal HTML page uses no external libraries, relying on inline SVG markup and absolute positioning for the rotated axis text.

AI-generated description

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

Similar vizzes

Loading thumbnail…

scatter plot

This scatter plot shows the relationship between GDP and CO₂ emissions for countries in 2020, with circle size encoding population and color highlighting China, the United States, and India. Hovering over a point reveals a tooltip with country details. Built with D3 v7, the visualization uses d3.tsv for data loading, d3.scaleLinear for axes, d3.scaleSqrt for sizing, and d3.axisBottom/axisLeft for rendering SVG axes with animation on tooltip transitions.

Bbadrinath888@gmail.com

73% match

Loading thumbnail…

Country CO2 emission

A horizontal bar chart displays CO2 emissions for 21 countries, ranking from China at the top to Kazakhstan at the bottom, with bar lengths proportional to each nation’s 2018 emissions. The visualization uses d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft to map data from the UCSUSA dataset onto SVG rectangles. Bars are styled with steelblue fills, and the chart includes labeled axes, with the y-axis listing country names and the x-axis showing emissions values in billions of metric tons.

Ccarbuncle-3djs

70% match

Loading thumbnail…

CO2 vs Population Scatter Plot

This interactive scatter plot displays the relationship between population and CO2 emissions for various countries over time, with a year slider controlling which time slice is visible. Each country is represented as a circle, sized by CO2 per capita and colored by country, with a tooltip showing precise values on hover. The visualization uses D3 v7 with `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleSqrt` for axes and sizing, and `d3.axisBottom`/`d3.axisLeft` for chart axes. SVG rendering places circles, axes, and a country legend, while the slider input triggers a complete redraw of the chart elements for each selected year.

Ssrisailapu.rc@gmail.com

70% match

Loading thumbnail…

Bar Chart

A horizontal bar chart displays CO2 emissions in kilotonnes for 39 countries in 2009, ranking the United States highest at over 5.4 million kt. The visualization uses D3.js v3 with an ordinal y-scale, a linear x-scale, and transitions that animate the bars and value labels from zero to their final lengths. Countries are labeled on the left, with a separator line, and hover effects increase bar opacity.

LLuisSevillano

70% match

Loading thumbnail…

CS360 A2 Dot Plot

This dot plot compares the percentage of men and women in the United States and China across different age groups. Blue dots represent US data points, while red dots represent Chinese data points, plotted on shared axes with tick labels. The visualization uses the Processing library via p5.js, loading data from a CSV hosted on GitHub. It calculates axis ranges dynamically from the dataset and projects each data point onto the canvas using the `map()` function, with custom-drawn axes and labels.

EEric Yao

69% match

Loading thumbnail…

Country CO2 emission

A horizontal bar chart shows the top 21 countries by CO2 emissions in 2018, using data from UCSUSA. Each bar’s length encodes emissions in gigatons, with countries ranked from China (10.06 Gt) down to Kazakhstan. The visualization uses D3 v6’s `scaleBand` for the y-axis, `scaleLinear` and `max` for the x-axis, and `axisBottom` with a custom tick formatter. Cities are rendered as SVG rectangles, with axis labels and a title added via appended text elements. The CSV data is loaded using `csv`.

Ccarbuncle-3djs

69% match

Loading thumbnail…

CO2 Emissions Over Time

This stacked area chart visualizes CO2 emissions over time in gigatons per year, using data from a CSV file. It shows emission levels for four categories: Hubei, relative, social, and public, with the total represented as stacked areas. The visualization is built with D3 v4 and rendered as an SVG, using APIs such as `d3.stack()`, `d3.area()`, `d3.axisBottom()`, and `d3.axisLeft()` to construct the chart. The `d3-area-label` library positions text labels within each area, while a color scale from `d3-scale-chromatic` distinguishes the categories. The chart updates responsively to the window size.

LLex

69% match

Loading thumbnail…

Scatter plot

A scatter plot displays CO2 emissions for top-ranking countries, mapping each country's total 2018 emissions in gigatons along a horizontal linear scale against a vertical point scale of country names. The visualization encodes data points as steelblue circles, with axes, gridlines, and labels styled via CSS. Built with D3 v6, it uses `csv` to load data, `scaleLinear` and `scalePoint` for positioning, and `axisBottom`/`axisLeft` for rendering axes, while `format` converts emission values to readable units. Data originates from UCSUSA's 2018 country emissions dataset.

Ccarbuncle-3djs

68% match