D3 Examples - US States map using Datamap API

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Number of Cadets</title>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
    <script src="datamaps.usa.min.js"></script>
</head>
<body>
<div id="container1" style="position: relative; width: 800px; height: 600px;"></div>
​
<script>
    var USmap = new Datamap({
        element: document.getElementById("container1"),
        scope: 'usa', //currently supports 'usa' and 'world', however with custom map data you can specify your own
        projection: 'equirectangular', //style of projection to be used. try "mercator"
        height: 520, //if not null, datamaps will grab the height of 'element'
        fills: {
            defaultFill: '#EDDC4E'
        },
        geographyConfig: {
        borderColor: '#b1b1b1',
            highlightBorderColor: '#bada55',
            popupTemplate: function (geography, data) {
                return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong></br>'+
'Number of Cadets: ' +  data.numCadets + ' '
    },
    highlightBorderWidth: 2
  },
​
  fills: {
  'bin0': '#e2ecfa',
  'bin1': '#9dbeef',
  'bin2': '#87afec',
  'bin3': '#71a1e8',
  'bin4': '#2167d0',
  'bin5': '#143d7c',
  'bin6': '#061327',
  defaultFill: '#EDDC4E'
},
data:{
  "AZ": {
      "fillKey": "bin4",
      "numCadets": 26
  },
  "CO": {
      "fillKey": "bin6",
      "numCadets": 417
  },
  "DE": {
      "fillKey": "bin1",
      "numCadets": 1
  },
  "FL": {
      "fillKey": "bin5",
      "numCadets": 69
  },
  "GA": {
      "fillKey": "bin3",
      "numCadets": 14
  },
  "HI": {
      "fillKey": "bin2",
      "numCadets": 7
  },
  "ID": {
      "fillKey": "bin0",
      "numCadets": 0
  },
  "IL": {
      "fillKey": "bin3",
      "numCadets": 19
  },
  "IN": {
      "fillKey": "bin4",
      "numCadets": 21
  },
  "IA": {
      "fillKey": "bin2",
      "numCadets": 8
  },
  "KS": {
      "fillKey": "bin3",
      "numCadets": 11
  },
  "KY": {
      "fillKey": "bin2",
      "numCadets": 8
  },
  "LA": {
      "fillKey": "bin2",
      "numCadets": 9
  },
  "MD": {
      "fillKey": "bin1",
      "numCadets": 3
  },
  "ME": {
      "fillKey": "bin0",
      "numCadets": 0
  },
  "MA": {
      "fillKey": "bin3",
      "numCadets": 16
  },
  "MN": {
      "fillKey": "bin2",
      "numCadets": 9
  },
  "MI": {
      "fillKey": "bin4",
      "numCadets": 21
  },
  "MS": {
      "fillKey": "bin3",
      "numCadets": 10
  },
  "MO": {
      "fillKey": "bin3",
      "numCadets": 16
  },
  "MT": {
      "fillKey": "bin1",
      "numCadets": 4
  },
  "NC": {
      "fillKey": "bin4",
      "numCadets": 27
  },
  "NE": {
      "fillKey": "bin1",
      "numCadets": 6
  },
  "NV": {
      "fillKey": "bin1",
      "numCadets": 4
  },
  "NH": {
      "fillKey": "bin1",
      "numCadets": 1
  },
  "NJ": {
      "fillKey": "bin3",
      "numCadets": 13
  },
  "NY": {
      "fillKey": "bin3",
      "numCadets": 15
  },
  "ND": {
      "fillKey": "bin1",
      "numCadets": 3
  },
  "NM": {
      "fillKey": "bin1",
      "numCadets": 4
  },
  "OH": {
      "fillKey": "bin4",
      "numCadets": 31
  },
  "OK": {
      "fillKey": "bin3",
      "numCadets": 16
  },
  "OR": {
      "fillKey": "bin2",
      "numCadets": 7
  },
  "PA": {
      "fillKey": "bin4",
      "numCadets": 22
  },
  "RI": {
      "fillKey": "bin0",
      "numCadets": 0
  },
  "SC": {
      "fillKey": "bin4",
      "numCadets": 28
  },
  "SD": {
      "fillKey": "bin1",
      "numCadets": 3
  },
  "TN": {
      "fillKey": "bin3",
      "numCadets": 11
  },
  "TX": {
      "fillKey": "bin5",
      "numCadets": 69
  },
  "UT": {
      "fillKey": "bin3",
      "numCadets": 16
  },
  "WI": {
      "fillKey": "bin1",
      "numCadets": 5
  },
  "VA": {
      "fillKey": "bin4",
      "numCadets": 32
  },
  "VT": {
      "fillKey": "bin1",
      "numCadets": 2
  },
  "WA": {
      "fillKey": "bin2",
      "numCadets": 8
  },
  "WV": {
      "fillKey": "bin2",
      "numCadets": 7
  },
  "WY": {
      "fillKey": "bin1",
      "numCadets": 6
  },
  "CA": {
      "fillKey": "bin5",
      "numCadets": 55
  },
  "CT": {
      "fillKey": "bin2",
      "numCadets": 9
  },
  "AK": {
      "fillKey": "bin1",
      "numCadets": 2
  },
  "AR": {
      "fillKey": "bin1",
      "numCadets": 6
  },
  "AL": {
      "fillKey": "bin4",
      "numCadets": 23
  }
}
});
//    USmap.labels({'customLabelText': USdata});
</script>
</div>
</body>
</html>
    