Stevie Wonder Grammys

by maritavindedal

HTML

<script src="https://github.highcharts.com/1a33b472af/highcharts.js"></script>
<script src="https://github.highcharts.com/1a33b472af/modules/data.js"></script>
<script src="https://github.highcharts.com/1a33b472af/modules/exporting.js"></script>
<script src="https://github.highcharts.com/1a33b472af/modules/export-data.js"></script>
<script src="https://github.highcharts.com/1a33b472af/modules/accessibility.js"></script>

<h2>Verbosity settings</h2>
<input type="checkbox" id="checkbox-info">
<label for="checkbox-info">Announce tooltip details for screen readers</label>
<input type="checkbox" id="checkbox-nullpoint" checked>
<label for="checkbox-nullpoint">Hide points with zero value</label>
<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">The chart offers a comprehensive overview of Stevie Wonder's Grammy 
        Awards wins and nominations from 1967 to 2010.</p>
</figure>

<p id="rich-description" aria-hidden="true" class="visually-hidden">
    The chart spans his remarkable journey in the music industry, showcasing 
    both his early recognition and sustained excellence over decades. 
    Notable peaks in wins and nominations indicate periods of particularly 
    high achievement, such as the 16th and 17th Grammy Awards where Stevie 
    Wonder secured multiple awards, including Album of the Year for 
    "Innervisions."
    
    Throughout the chart, Stevie Wonder's versatility 
    shines through as he receives recognition across various categories, 
    from Best Rhythm & Blues Recording to Album of the Year, demonstrating 
    his profound impact on multiple facets of music production. However, 
    towards the later years covered, there appears to be a decline in 
    nominations and wins, suggesting potential shifts in the music industry 
    landscape or changes in Stevie Wonder's career focus. Despite this, 
    the dataset underscores Stevie Wonder's enduring legacy as a musical 
    icon and...

CSS

.highcharts-figure {
    max-width: 800px;
    margin: 1em auto;
}

#grammy-data {
    display: none;
}

.tooltip-heading {
    font-weight: 800;
    text-align: center;
}

.win-nom {
    font-weight: 600;
    text-align: center;
    padding: 5px;
}

.highcharts-tooltip span ul {
    padding-left: 10px;
}

.highcharts-tooltip span li {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

#highcharts-data-table-0 {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
}

#highcharts-data-table-0 thead {
    background-color: #f2f2f2;
}

#highcharts-data-table-0 th,
#highcharts-data-table-0 td {
    text-align: left;
    padding: 8px;
    border: 1px solid #ddd;
}

#highcharts-data-table-0 th {
    color: #222;
    font-weight: 600;
    font-size: 0.85rem;
}

JavaScript

const descriptionDivs = [];
const tooltipDivs = [];
let parsedData = [],
    checkboxChecked = false,
    nullpointCheckboxChecked = true;


Highcharts.addEvent(Highcharts.Chart, 'aftergetTableAST', function (e) {
    e.tree.children[2].children.forEach(function (row) {
        row.children.forEach(function (cell, i) {
            if (i === 0) {
                const split = cell.textContent.split('-');
                row.children[i].textContent = split[0].trim();
            }
        });
    });
});


Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
            load: function () {
                const points = this.series.map(s => s.points).flat();
                points.forEach(point => {
                    const id = `tooltip-${point.series.name}-${point.index}`;
                    const descriptionDivId = id + '-description';
                    const tooltipDivId = id + '-tooltip';
                    if (checkboxChecked) {
                        point.graphic.element.setAttribute('aria-describedby', id);
                    }

                    if (nullpointCheckboxChecked && point.y === 0) {
                        point.graphic.element.setAttribute('aria-hidden', 'true');
                    }

                    const column = parsedData.find(columns =>
                        columns[0].startsWith(point.x)
                    );

                    if (column) {
                        const grammy = column[3],
                            songwin = column[4],
                            songnom = column[5],
                            awardwin = column[6],
                            awardnom = column[7];

                        let tooltipText;
                        if (point.series.name === 'wins') {
                            tooltipText = createTooltipText(grammy, Highcharts.dateFormat('%Y', point.x), 'wins', point.y, songwin, awardwin);
                        }
                        if...