Coal phaseout

<!DOCTYPE html>
<head>
  <style>
body {
font-family: "Futura Md Bt";
  background-color: rgb(20,20,20);
}
svg {
//overflow: visible;
background-color: black;
}
.year-label {
fill: rgb(220,220,220);
font-size: 2rem;
font-weight: bold;
}

.title {

fill: rgb(220,220,220);
font-size: 1rem;
}
.topo {
stroke: rgb(40,40,40);
}
text {
font-family: "Futura Md Bt";
}

.legend {
fill: rgba(247, 247, 247, 0.9);
}

rect {
opacity: 1;
}
.x-axis text, .y-axis text, .label, .legend text {
fill: #4d5663;
}

.x-axis text {
font-size: 0.6rem;
font-weight: unset;
}

.label {
font-weight: bold;
}

.title {
font-weight: bold;
font-size: 1.5rem;
}

.y-axis line {
stroke-width: 1.5;
opacity: 0.1;
}
.bargroup rect {
stroke-width: 0.5;
stroke: white;
}
</style>
  <meta charset="utf-8">

</head>

<body>
  <div id="observablehq-5586c691"></div>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/@dldx/coal-phaseout-over-time.js?v=3";
const inspect = Inspector.into("#observablehq-5586c691");
(new Runtime).module(define, name => (name === "bau") && inspect());
</script>
  <div id="observablehq-f8376611"></div>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/@dldx/coal-phaseout-over-time.js?v=3";
const inspect = Inspector.into("#observablehq-f8376611");
(new Runtime).module(define, name => (name === "b2ds") && inspect());
</script>
</body>