Skip to main content
SimilarExport ZIP
100%

emission and scope

✓ Published1🌍 Public
CChristianABeier
Last edited Oct 18, 2022
Created on Oct 18, 2022

A donut chart displays GHG emission quantities per scope category, using a proportional area for each segment to compare emission amounts across scopes 1, 2, 3, and out-of-scope categories. The visualization loads data from `data_GHG_sopes.json` via `d3.json` and renders the chart with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color mapping. A legend, generated with `d3.selectAll` and appended `rect` and `text` elements, shows each scope’s label and formatted emission value using `d3.format`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A pie chart shows the distribution of greenhouse gas emissions across different scope categories, with each slice’s area proportional to its emission value. A legend on the right lists each category with a color swatch and the corresponding numeric value. The chart is rendered with D3.js v3, using `d3.pie()` for the layout, `d3.arc()` for the slice geometry, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. Data is loaded from a local `data_GHG_sopes.json` file.

CChristianABeier
81% match
Loading thumbnail…

Untitled

This example shows the distribution of carbon emissions per employee across companies, grouped by emission scope (1, 2, 3). For each scope, a box-and-whisker plot summarizes quartiles, median, and outliers, while individual companies appear as colored circles, jittered vertically to reduce overlap. The visualization uses D3 v4’s `d3.csv`, `d3.nest`, `d3.quantile`, and `d3.scaleBand` to structure and layout the data, with a sequential color scale from `d3.interpolateRdYlGn` mapping emissions intensity. Circles include mouseover tooltips, complementing the SVG-rendered boxes and axes.

Bbertieip
71% match
Loading thumbnail…

Making a piechart?

This example demonstrates a bar chart comparing carbon dioxide emissions (tCO2) across three scopes, using a horizontal layout with labeled axes. The visualization renders SVG elements within a React framework, leveraging D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and ticks. Data is loaded from a CSV file and parsed to numeric values, with the chart built by appending grouped rectangles and text labels inside an SVG container. The code also defines margins dynamically and applies a steel blue fill to the bars.

Bbertieip
70% match
Loading thumbnail…

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

PPatrick Wojda
68% 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
68% match
Loading thumbnail…

Fork of CO2 Emissions Over Time

This fork of a stacked area chart visualizes global CO2 emissions from 1790 onward, breaking down fossil fuel sources into solids, liquids, gas, cement production, and gas flaring. The chart uses D3 v4 with SVG rendering, employing `d3.stack` and `d3.area` for the stacked layout and `d3-area-label` for positioning white labels within each area. The `d3-scale-chromatic` library supplies the color scheme, and data is loaded from a CSV containing yearly emissions in gigatons. Interactive hover effects darken each area, while axes display time and emission values.

Ssuketua
68% match
Loading thumbnail…

Fork of CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions over time, broken down by source: gas, liquids, solids, cement production, and gas flaring. The chart uses a time-series x-axis and a y-axis labeled in gigatons per year, with each category filled with a distinct color from `d3.schemeDark2`. Built with D3 v4, the visualization leverages `d3.stack` for stacking, `d3.area` for rendering the areas, and the `d3-area-label` library to position white labels within each segment. The data comes from a CSV file of global CO2 emissions.

Yyuting89830@gmail.com
68% match
Loading thumbnail…

donut chart w. d3-annotations

A donut chart displays six categorical values as proportional slices, with annotations positioned to the left and right of the chart. A center label appears above the visualization, though the annotation rendering is commented out, leaving only red translucent circles marking annotation anchor points. The chart uses the d3-annotation library alongside d3.v4, building the pie and arcs with `d3.pie()` and `d3.arc()`. A `d3.forceSimulation` with collision and X-axis forces arranges the right-side annotation positions, while the data is hardcoded as an array of value-label-color objects.

PPatrick Wojda
67% match