Estimated US Energy Consumption in 2022

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Sankey charts are used to visualize data flow and volume
        between nodes. The wider lines indicate larger volumes.
    </p>
</figure>

CSS

#csv {
    display: none;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

.highcharts-description {
    margin: 0.3rem 10px;
}

JavaScript

const labels = ["Objectives", "Sub-objectives", "Outcomes", "Sub-outcomes"]
Highcharts.chart("container", {
  exporting: { enabled: false },
  title: {
    text: null,
  },
  subtitle: {
    text: null,
  },
  accessibility: {
    point: {
      valueDescriptionFormat:
        "{index}. {point.from} to {point.to}, " + "{point.weight}.",
    },
  },
  plotOptions: {
    sankey: {
      point: {
        events: {
          mouseOver() {
            linksHover(this, "hover", false, this.isNode)
          },
          mouseOut() {
            linksHover(this, "")
          },
        },
      },
    },
  },
  tooltip: {
    headerFormat: null,
    pointFormat:
      "{point.fromNode.name} \u2192 {point.toNode.name}: {point.weight:.2f} " +
      "quads",
    nodeFormat: "{point.name}: {point.sum:.2f} quads",
  },
  series: [
    {
      keys: ["cat1", "cat2", "value"],

      nodes: [
        {
          id: "Electricity & Heat",
          color: "#ffa500",
        },
        {
          id: "Net Import",
          color: "000000",
        },
        {
          id: "Residential",
          color: "#74ffe7",
          column: 2,
        },
        {
          id: "Commercial",
          color: "#8cff74",
          column: 2,
        },
        {
          id: "Industrial",
          color: "#ff8da1",
          column: 2,
        },
        {
          id: "Transportation",
          color: "#f4c0ff",
          column: 2,
        },
        {
          id: "Rejected Energy",
          color: "#e6e6e6",
          column: 3,
        },
        {
          id: "Energy Services",
          color: "#F9E79F",
          column: 3,
        },
        {
          id: "Net Import",
          color: "000000",
        },
        {
          id: "Solar",
          color: "#009c00",
        },
        {
          id: "Nuclear",
          color: "#1a8dff",
        },
        {
          id: "Hydro",
          color: "#009c00",
        },
        {
          id: "Wind",
         ...