Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published1🌍 Public

Last edited Mar 21, 2022

Created on Mar 19, 2022

This visualization presents a marginal abatement cost curve, plotting the cost per ton of CO2e abated against the total abatement potential for various industrial processes, with bars colored by material type. The chart includes both positive and negative cost measures, with a reference line at zero cost, and displays the data using SVG rectangles scaled by D3's linear scales. The React application uses D3 v5 APIs like `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while hardcoded data from a specific industrial abatement study is rendered without any interactive features.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Positive Macc Curve

This visualization presents an abatement cost curve, displaying the cost per ton of CO2e against the abatement potential for various industrial materials and processes. The chart uses a React-based SVG rendering with D3 v5 scales and axes to position rectangular marks. The data is embedded directly in the code, with D3’s `scaleLinear` and `scaleBand` handling the x and y mappings, while `axisBottom` and `axisLeft` generate the scale ticks. A reference line at zero cost is included when the minimum value is negative.

Ssiddalinga-murthy

86% match

Loading thumbnail…

Fork of Fork of Positive Macc Curve

This chart displays a Marginal Abatement Cost Curve, comparing the cost (€/tCO2e) against the abatement potential (kgCO2e) for various industry-specific measures. The visualization uses D3.js v5 to create linear scales for both axes, rendering data as an SVG within a React framework. Each bar is color-coded by material, and hovering over a bar triggers a tooltip displaying the cost and potential values. The chart includes a reference line at the zero-cost threshold to distinguish between negative and positive abatement costs, with the data sourced from a predefined array in the code.

Ssiddalinga-murthy

83% match

Loading thumbnail…

Fork of Positive Macc Curve

This visualization presents a marginal abatement cost curve (MACC) for various industrial materials and processes, showing abatement potential (in kgCO2e) on the x-axis versus abatement cost (in €/tCO2e) on the y-axis. The chart uses an SVG rendering with React and D3 v5, employing `d3.scaleLinear` for both axes and `d3.axisBottom` and `d3.axisLeft` for tick marks. Rectangles represent each abatement measure, colored by material type, with a tooltip revealing the measure’s name and cost on hover. The data is hardcoded within the application, featuring interventions like switching to low-carbon electricity or biogas across industries such as steel, aluminum, and copper.

Ssiddalinga-murthy

83% match

Loading thumbnail…

Fork of Positive Macc Curve

This visualization presents a marginal abatement cost curve, showing the cost and potential of various greenhouse gas reduction strategies across industries like steel, aluminum, and copper. Rectangles represent each measure, with width indicating abatement potential and height reflecting cost, using `d3.scaleLinear` and React components. The chart includes a reference zero line and dual-axis labels, with data displayed via SVG rectangles. The code uses `d3.axisBottom`, `d3.axisLeft`, and React hooks like `useRef` and `useEffect` for rendering axes.

Ssiddalinga-murthy

82% match

Loading thumbnail…

Positive Macc Curve

This visualization displays a Marginal Abatement Cost Curve (MACC), plotting abatement potential against cost for various industrial decarbonization measures. Rectangles represent individual strategies, positioned to show cumulative potential with color-coded material categories. Built with React and D3 v5, it uses `scaleLinear`, `scaleBand`, and explicit axis components to render SVG elements. The chart includes hover tooltips and a reference zero line, with data drawn from an industry-specific dataset.

KKaushik Mishra

78% match

Loading thumbnail…

Untitled

A stacked bar chart shows annual CO2 emissions for properties, with segments for gas and electrical sources, alongside a step-after line tracking normalized costs on a second axis. Data from a tab-separated CSV file includes property names, emission values, and cost metrics. The visualization uses d3.svg.axis for dual left and right axes, d3.scale.ordinal for property positioning, and d3.svg.line with step-after interpolation for the cost overlay. Dots mark the exact cost values, and a legend identifies the two emission categories.

Ddiegobrivo

73% match

Loading thumbnail…

Untitled

This example combines stacked bar charts and a step-after line graph to compare gas and electrical emissions (kgCO2) with normalized costs across properties. It uses D3 v3 with SVG rendering, reading data from a TSV file. The chart employs ordinal and linear scales, dual y-axes, and d3.svg.axis for ticks, while d3.svg.line defines the cost line with interpolation. Legend rectangles and value labels clarify the two categories.

Ddiegobrivo

70% match

Loading thumbnail…

Fork of Line Chart

This fork of a line chart visualizes the decline in ozone-depleting substance emissions from 1960 to 2014. The data, loaded via `csv` from a GitHub gist, is rendered as a smooth curve using D3’s `line` generator with `curveBasis`. Scales are set with `scaleLinear` for both axes, while `axisLeft` and `axisBottom` add labeled ticks with gridlines. The React-based example uses SVG output, styling the maroon path with a thick stroke via CSS.

SSquad-UNT

70% match