Fork of Positive Macc Curve

100%

Fork of Positive Macc Curve

✓ Published1🌍 Public

Last edited Mar 21, 2022

Created on Mar 21, 2022

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.

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

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

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

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

86% match

Loading thumbnail…

Fork of Pathetic Bar Chart

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.

KKaushik Mishra

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

67% match

Loading thumbnail…

Fork of Stylized Line Chart

This visualization presents a stylized line chart comparing carbon dioxide emissions and per-capita emissions over time, using data from a CSV file hosted on GitHub. Built with React and D3 v5, it renders as an SVG with distinct axes and a smooth natural curve. The chart employs `scaleTime` and `scaleLinear` for axis scaling, with `line()` and `curveNatural` from D3 to draw the path, while custom React components for the bottom and left axes handle tick marks and labels. Styling is applied via CSS classes, using the Poppins font.

AArlind Pestisha

66% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the basic cost of Netflix in 15 different countries using a horizontal bar chart rendered as SVG. The application uses React to manage state and render the chart, while D3 v5 handles data loading via `d3.csv`, scaling with `d3.scaleBand` and `d3.scaleLinear`, and margin calculations. The data is fetched from a GitHub-hosted CSV file, and the bars are drawn as `<rect>` elements positioned and sized using the D3 scales.

AAbhinav-Mullapudi

65% match