JSFiddle - React, Tailwind, and code Playground

by oysteinmoseng

HTML

<script src="https://github.highcharts.com/777ccb263e/highcharts.js"></script>
<script src="https://github.highcharts.com/777ccb263e/maps/modules/map.js"></script>
<script src="https://github.highcharts.com/777ccb263e/highcharts-more.js"></script>
<script src="https://github.highcharts.com/777ccb263e/modules/solid-gauge.js"></script>
<script src="https://github.highcharts.com/777ccb263e/modules/pattern-fill.js"></script>
<script src="https://github.highcharts.com/777ccb263e/modules/sonification.js"></script>
<script src="https://github.highcharts.com/777ccb263e/modules/exporting.js"></script>
<script src="https://github.highcharts.com/777ccb263e/modules/export-data.js"></script>
<script src="https://github.highcharts.com/777ccb263e/themes/high-contrast-light.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/nordic-countries.js"></script>
<script src="https://github.highcharts.com/777ccb263e/modules/accessibility.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">

<section id="dashboard-section" aria-labelledby="section-heading">
    <h1 id="section-heading">Highcharts Population Dashboard</h1>

    <div id="intro-container">
        <p>This is an example dashboard highlighting some accessibility features of Highcharts. The dashboard visualizes population data for 7 Nordic countries, and involves multiple interactive charts. The chart data is collected from <a href="https://www.worldbank.org/">WorldBank.org</a>, using census data from 1984 to 2019.</p>

        <p>Clicking on countries in the map will display population details for that country in the adjacent charts.</p>
    </div>

    <div id="charts-container">
        <figure class="map-figure">
            <div id="map-container"></div>
            <p class="highcharts-description">
                Map and table showing the population of 7 Nordic countries....

CSS

#dashboard-section {
    font-family: 'Roboto', sans-serif;
    margin: 1.2em;
    margin-bottom: 30px;
}

#dashboard-section a, #dashboard-section a:visited  {
    color: #2256a3;
    text-decoration: underline;
}

#intro-container {
    max-width: 1000px;
}

#charts-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    margin: 25px 0;
    padding: 0;
}

.population-details {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: 0;
    padding: 0;
    padding-left: 15px;
    max-width: 350px;
    min-width: 300px;
    border-left: 1px solid #f5f5f5;
}

.population-details h2 {
    margin-top: 10px;
    font-size: 1.2em;
    font-weight: normal;
    color: #333333;
}

.population-details select {
    margin: 0 20px 0 10px;
    font-size: 0.9em;
    vertical-align: middle;
}

.details-figure, .mini-charts  {
    margin: 20px auto 5px;
    width: 100%;
}

.mini-charts {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.map-figure, .highcharts-data-table table {
    min-width: 300px; 
    max-width: 1200px;
    font-size: 0.9em;
    margin: 0;
    flex: 1;
    padding-right: 15px;
}

#map-container {
    height: 600px;
}

#history-container {
    height: 200px;
}

#increase-container, #density-container {
    height: 180px;
}

#cities-container {
    height: 200px;
    margin: 0 15px;
}

.labelled-dropdown {
    display: flex;
}

.labelled-dropdown select {
    flex: 1;
}

.highcharts-data-table table {
    font-family: 'Roboto', sans-serif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
}
.highcharts-data-table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    color: rgba(0, 0, 0, 0);
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.highcharts-data-table thead th {
    font-weight: bold;
}
.highcharts-data-table th {
    font-weight: normal;
   ...

JavaScript

var populationHistory = {
    // 1984, 1989, 1994, 1999, 2004, 2009, 2014, 2019
    se: [
        8336605, 8492964, 8780745, 8857874, 8993531, 9298515, 9696110, 10285453
    ],
    dk: [
        5111619, 5131594, 5206180, 5321799, 5404523, 5523095, 5643475, 5818553
    ],
    fi: [
        4881803, 4964371, 5088333, 5165474, 5228172, 5338871, 5461512, 5520314
    ],
    no: [
        4140099, 4226901, 4336613, 4461913, 4591910, 4828726, 5137232, 5347896
    ],
    is: [
        239511, 252852, 266021, 277381, 292074, 318499, 327386, 361313
    ],
    gl: [
        52700, 55300, 55500, 56100, 56911, 56323, 56295, 56225
    ],
    fo: [
        44891, 47166, 45856, 46436, 47600, 47808, 47960, 48678
    ]
};
var areaData = {
    se: 450295,
    no: 385207,
    dk: 42933,
    fi: 338440,
    is: 103000,
    fo: 1399,
    gl: 2166000
};
var topCities = {
    se: [
        ['Göteborg', 599011],
        ['Stockholm', 1515017],
        ['Malmö', 316588]
    ],
    no: [
        ['Bergen', 420000],
        ['Oslo', 1000467],
        ['Stavanger', 222697]
    ],
    fi: [
        ['Tampere', 341696],
        ['Helsinki', 1305893],
        ['Turku', 277677]
    ],
    dk: [
        ['Aarhus', 280534],
        ['Copenhagen', 1330993],
        ['Odense', 180302]
    ],
    is: [
        ['Kópavogur', 35966],
        ['Reykjavík', 124847],
        ['Hafnarfjörður', 29409]
    ],
    fo: [
        ['Klaksvík', 4681],
        ['Tórshavn', 12582],
        ['Hoyvík', 2951]
    ],
    gl: [
        ['Sisimiut', 5582],
        ['Nuuk', 18326],
        ['Ilulissat', 4670]
    ]
};

function getCurrentPopulation(country) {
    var len = populationHistory[country].length;
    return populationHistory[country][len - 1];
}

function getPopulationIncrease(country) {
    var initial = populationHistory[country][0];
    var current = getCurrentPopulation(country);
    return Math.round((current - initial) / initial * 1000) / 10;
}

function getCountryPopulationDensity(country) {
    return...