United States of America, small - Highmaps

Highmaps demo

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/custom/us-small.js"></script>

<div id="container"></div>

CSS

#container {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.

/*
Set transaction isolation level read uncommitted;
Select concat( '[''',lower(json_value(json, '$.gnip.profileLocations[0].address.countryCode')),'-', lower(c.code) ,''',' , count(*) , '],')
from feed_tw.TWEET t
join feed_tw.DIGEST d on t.id = d.id
join pubv2.TWEET_TOPIC_RETWEET ttr on t.id = ttr.tweet_id
join conf.TOPIC tp on ttr.topic_id = tp.id
join conf.US_STATE_CODE c on c.state = json_value(json, '$.gnip.profileLocations[0].address.region')
where d.posted_date > date_add(now(), interval -44 hour)
and tp.topic = 'TSLA'
and json_value(json, '$.gnip.profileLocations[0].address.countryCode')  is not null
and json_value(json, '$.gnip.profileLocations[0].address.countryCode')  = 'US'
group by json_value(json, '$.gnip.profileLocations[0].address.countryCode')
, json_value(json, '$.gnip.profileLocations[0].address.region')
having count(*) > 1
order by count(*) desc;

*/
var data = [
['us-ca',181],
['us-ny',161],
['us-fl',91],
['us-nj',68],
['us-tx',61],
['us-oh',35],
['us-ma',31],
['us-il',30],
['us-co',20],
['us-ct',20],
['us-pa',19],
['us-nv',16],
['us-or',15],
['us-va',15],
['us-dc',14],
['us-mn',14],
['us-wa',14],
['us-hi',12],
['us-mi',10],
['us-ga',9],
['us-mt',8],
['us-la',8],
['us-tn',7],
['us-sd',6],
['us-me',6],
['us-in',6],
['us-wi',6],
['us-ri',5],
['us-wv',4],
['us-mo',4],
['us-nc',3],
['us-ut',3],
['us-ky',3],
['us-md',3],
['us-ar',2],
['us-de',2],
['us-ne',2],
['us-wy',2],
];

// Create the chart
Highcharts.mapChart('container', {
    chart: {
        map: 'countries/us/custom/us-small'
    },

    title: {
        text: 'Highmaps basic demo'
    },

    subtitle: {
        text: 'Source map: <a href="http://code.highcharts.com/mapdata/countries/us/custom/us-small.js">United States of America, small</a>'
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
           ...