S&P 500 Companies

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/non-cartesian-zoom.js"></script>
<script src="https://code.highcharts.com/modules/mouse-wheel-zoom.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/coloraxis.js"></script>
<script src="https://code.highcharts.com/themes/adaptive.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        This demo shows a large data set visualized with a tree map. Stock
        symbols are grouped by sector, further grouped by top-level categories.
        The size of each node represents the market capitalization of the stock,
        while the color represents the change in stock price over the last
        month. Click on a group or a single header to zoom in.
    </p>
</figure>

CSS

* {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}

#container {
    min-width: 320px;
    height: 90vh;
    min-height: 600px;
}

.highcharts-figure {
    min-width: 320px;
    margin: 0;
}

.highcharts-description {
    padding: 0 10px;
}

tspan {
    fill: inherit;
}

@media screen and (max-width: 600px) {
    #container {
        height: 400px;
    }
}

JavaScript

const renderChart = data => {
    Highcharts.chart('container', {
        chart: {
            backgroundColor: '#252931',
            zooming: {
                type: 'xy'
            }
        },
        series: [{
            name: 'All',
            type: 'treemap',
            layoutAlgorithm: 'squarified',
            allowDrillToNode: true,
            animationLimit: 1000,
            borderColor: '#252931',
            color: '#252931',
            opacity: 0.01,
            nodeSizeBy: 'leaf',
            dataLabels: {
                enabled: false,
                allowOverlap: true,
                style: {
                    fontSize: '0.9em',
                    textOutline: 'none'
                }
            },
            levels: [{
                level: 1,
                dataLabels: {
                    enabled: true,
                    headers: true,
                    align: 'left',
                    style: {
                        fontWeight: 'bold',
                        fontSize: '0.7em',
                        lineClamp: 1,
                        textTransform: 'uppercase'
                    },
                    padding: 3
                },
                borderWidth: 3,
                levelIsConstant: false
            }, {
                level: 2,
                dataLabels: {
                    enabled: true,
                    headers: true,
                    align: 'center',
                    shape: 'callout',
                    backgroundColor: 'gray',
                    borderWidth: 1,
                    borderColor: '#252931',
                    padding: 0,
                    style: {
                        color: 'white',
                        fontWeight: 'normal',
                        fontSize: '0.6em',
                        lineClamp: 1,
                        textOutline: 'none',
                        textTransform:...