Estimated US Energy Consumption in 2022

by djakacki

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">
        This Sankey diagram explores the connections between people who applied and the subjects they were interested in.
    </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

Highcharts.chart("container", {
  title: {
    text: "Bucknell Applicants and Majors (by Acceptance and Gender) 2012-13",
  },
  subtitle: {
    text: "Source: Bucknell University Admissions",
  },
  accessibility: {
    point: {
      valueDescriptionFormat:
        "{index}. {point.from} to {point.to}, " + "{point.weight}.",
    },
  },
  tooltip: {
    headerFormat: null,
    pointFormat:
      "{point.fromNode.name} \u2192 {point.toNode.name}: {point.weight:.2f} " +
      "quads",
    nodeFormat: "{point.name}: {point.sum:.2f} quads",
  },
  series: [
    {
      keys: ["from", "to", "weight"],

      nodes: [
        {
          id: "Electricity & Heat",
          color: "#ffa500",
          offset: -110,
        },
        {
          id: "Net Import",
          color: "000000",
        },
        {
          id: "Residential",
          color: "#74ffe7",
          column: 2,
          offset: 50,
        },
        {
          id: "Commercial",
          color: "#8cff74",
          column: 2,
          offset: 50,
        },
        {
          id: "Industrial",
          color: "#ff8da1",
          column: 2,
          offset: 50,
        },
        {
          id: "Transportation",
          color: "#f4c0ff",
          column: 2,
          offset: 50,
        },
        {
          id: "Rejected Energy",
          color: "#e6e6e6",
          column: 3,
          offset: -30,
        },
        {
          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",
          color: "#009c00",
        },
        {
          id: "Geothermal",
          color: "#009c00",
        },
        {
          id: "Natural...