Climate solutions

colorMap = ({
  "Negative": {
    fill: "lightblue",
    color: "black"
  },
  "0-20 USD": {
    fill: "gold",
    color: "black"
  },
  "20-50 USD": {
    fill: "orange",
    color: "black"
  },
  "50-100 USD": {
    fill: "red",
    color: "white"
  },
  "100-200 USD": {
    fill: "firebrick",
    color: "white"
  },
  "Not allocated": {
    fill: "lightgrey",
    color: "black"
  }  
})

colorMap = Object {Negative: Object, 0-20 USD: Object, 20-50 USD: Object, 50-100 USD: Object, 100-200 USD: Object, Not allocated: Object}

allData = FileAttachment("/data/ipcc-decarbonisation-costs-processed.csv")
  .csv({ typed: true });
maxPotential = Math.max(...allData.map(d => d.potential_abatement_mtco2eq))
filteredData = allData.filter(d => d.cost_bucket == selectedCostBucket)

Plot = import("https://esm.run/@observablehq/plot")

bubbleTitle = d =>
  d.item + " could remove up to the equivalent of " + d3.format(".0f")(d.potential_abatement_mtco2eq) + " Mt of CO2 each year in the \"" + selectedCostBucket + "\" cost bucket.\n\nThat's " + d3.format(".0%")(d.potential_frac) + " of its potential benefit across all cost buckets."

Plot.plot({
  marks: [
    Plot.dotX(
      filteredData,
      Plot.dodgeX("middle", {
        y: "potential_abatement_mtco2eq",
        // fx: "cost_bucket",
        r: "potential_abatement_mtco2eq",
        title: bubbleTitle,
        ariaLabel: bubbleTitle,
        channels: {category: "category", item: "item"},
        stroke: "cost_bucket",
        fill: "cost_bucket",
        fillOpacity: 0.2,
        padding: 0.5,
        tip: true
      })),
    Plot.text(
      filteredData,
      Plot.dodgeX("middle", {
        filter: d => d.potential_abatement_mtco2eq > 500,
        y: "potential_abatement_mtco2eq",
        r: "potential_abatement_mtco2eq",
        text: d => d.item,
        lineWidth: 8,
        fontSize: 12,
        // fontSize: "potential_abatement_mtco2eq",
        channels: {category: "category", item: "item"},
        fill: "black",
        stroke: "#ffffffcc",
        padding: 0.5,
        pointerEvents: "none"
      })),
    /* icons not dodging in sync with bubbles */
    // Plot.image(filteredData,
    //   Plot.dodgeX("middle", {
    //     src: d =>
    //       (d.icon != "NA") ?
    //         ("/solution-beeswarm/assets/" + d.icon + "-black.svg") :
    //         ("/solution-beeswarm/assets/question-black.svg"),
    //     y: "potential_abatement_mtco2eq",
    //     // width: "potential_abatement_mtco2eq",
    //     width: 20,
    //     preserveAspectRatio: true
    //     // filter: ???
    //   }))
  ],
  y: {
    axis: null,
    type: "log",
  },
  r: {
    domain: [0, maxPotential],
    range: [2, 95],
    legend: true
  },
  color: {
    domain: ["Negative", "0-20 USD", "20-50 USD", "50-100 USD", "100-200 USD",
      "Not allocated"],
    range: ["lightblue", "gold", "orange", "red", "firebrick", "lightgrey"]
  },
  height: 550,
  marginLeft: 20,
  marginRight: 20,
  // marginBottom: 60,
  marginTop: 35,
  insetTop: 40,
  style: {
    fontSize: 14,
    fontFamily: "Roboto Condensed"
  }
})

bubbleTitle = ƒ(d)

viewof selectedCostBucket = Inputs.radio(
  new Map([
    ["Saves money", "Negative"],
    ["Low", "0-20 USD"],
    ["Medium", "20-50 USD"],
    ["High", "50-100 USD"],
    ["Very high", "100-200 USD"],
    ["Not allocated", "Not allocated"]
  ]), {
    label: html`<strong>Cost</strong>`,
    value: "Negative",
    format: x => html`<span style="border-bottom-color: ${colorMap[x[1]].fill}; box-shadow: 0px 0px 1px ${colorMap[x[1]].fill}; padding: 5px;">${x[0]}</span>`
})

description = {
  const note = `<br><p style="font-size: 70%">Some solutions may appear in several cost buckets because they have a range of costs depending on the circumstance. The estimate potential for greenhouse gas reduction is subject to uncertainty not shown here.</p>`

  switch (selectedCostBucket) {
    case "Negative":
      return(md`Solutions that **save money** might still cost something upfront, but they save enough in their use—or in their replacement of alternatives—to be cost-negative. ${note}`);
      break;
    case "0-20 USD":
      return(md`**Low-cost solutions** are rated as costing less than US$20 per tonne of CO2 (or equivalent). ${note}`)
    case "20-50 USD":
      return(md`**Medium-cost solutions** are rated as costing between US$20 and US$50 per tonne of CO2 (or equivalent). ${note}`)
    case "50-100 USD":
      return(md`**High-cost solutions** are rated as costing between US$50 and US$100 per tonne of CO2 (or equivalent). ${note}`)
    case "100-200 USD":
      return(md`**Very high-cost solutions** are rated as costing between US$100 and US$200 per tonne of CO2 (or equivalent). ${note}`)
    default:
      return(md`Some solutions were **not assigned a cost** because of the difficulty in evaluating them. ${note}`);
  }
}

Solutions that save money might still cost something upfront, but they save enough in their use—or in their replacement of alternatives—to be cost-negative.

Some solutions may appear in several cost buckets because they have a range of costs depending on the circumstance. The estimate potential for greenhouse gas reduction is subject to uncertainty not shown here.

GET THIS MAP