U.S. states by population in 2023

by djakacki

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/tilemap.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">
        Hexagonal tilemap, sometimes referred to as a honeycomb or hexbin chart,
        showing population data in the US. In this case the map is used to show
        each US state with the same size - which removes some of the bias
        associated with traditional maps.
    </p>
</figure>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 360px;
    max-width: 700px;
    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', {
    chart: {
        type: 'tilemap',
        inverted: true,
        height: '80%'
    },

    accessibility: {
        description: 'A tile map represents the states of the USA by ' +
            'population in 2023. The hexagonal tiles are positioned to ' +
            'geographically echo the map of the USA. A color-coded legend ' +
            'states the population levels as below 1 million (beige), 1 to 5 ' +
            'million (orange), 5 to 20 million (pink) and above 20 million ' +
            '(hot pink). The chart is interactive, and the individual state ' +
            'data points are displayed upon hovering. Three states have a ' +
            'population of above 20 million: California (38.9 million), ' +
            'Texas (30.5 million) and Florida (22.6 million). The northern ' +
            'US region from Massachusetts in the Northwest to Illinois in ' +
            'the Midwest contains the highest concentration of states with a ' +
            'population of 5 to 20 million people. The southern US region ' +
            'from South Carolina in the Southeast to New Mexico in the ' +
            'Southwest contains the highest concentration of states with a ' +
            'population of 1 to 5 million people. 6 states have a population ' +
            'of less than 1 million people; these include Alaska, Delaware, ' +
            'Wyoming, North Dakota, South Dakota and Vermont. The state with ' +
            'the lowest population is Wyoming in the Northwest with 584,153 ' +
            'people.',
        screenReaderSection: {
            beforeChartFormat:
                '<h5>{chartTitle}</h5>' +
                '<div>{chartSubtitle}</div>' +
                '<div>{chartLongdesc}</div>' +
                '<div>{viewTableButton}</div>'
        },
        point: {
            valueDescriptionFormat: '{index}. {xDescription}, {point.value}.'
        }
    },

    title: {
        text: 'U.S. states by...