Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<meta charset="utf-8">
<body>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://d3js.org/topojson.v1.min.js"></script>
  <!-- I recommend you host this file on your own, since this will change without warning -->
  <script src="http://datamaps.github.io/scripts/datamaps.world.min.js?v=1"></script>
  <h2>Datamaps Playground</h2>
  <p><a href="http://datamaps.github.io/">DataMaps Project Homepage</a></p>
  <div id="container1" style="position: relative; width: 80%; max-height: 450px;"></div>
 
     
     <script>
       //basic map config with custom fills, mercator projection
  map = new Datamap({
        scope: 'world',
        element: document.getElementById('container1'),
        projection: 'mercator',
        height: 500,
        fills: {
          defaultFill: '#f0af0a',
          lt50: 'rgba(0,244,244,0.9)',
          gt50: 'red'
        },
        
        data: {
          USA: {fillKey: 'lt50', numberOfThings: 120132 },
          RUS: {fillKey: 'lt50' },
          CAN: {fillKey: 'lt50' },
          BRA: {fillKey: 'gt50' },
          ARG: {fillKey: 'gt50'},
          COL: {fillKey: 'gt50' },
          AUS: {fillKey: 'gt50' },
          ZAF: {fillKey: 'gt50' },
          MAD: {fillKey: 'gt50' }       
        },
        
        done: function(map) {
  
          map.svg.selectAll('.datamaps-subunit').on('click', function(geo) {
            var localData = map.options.data[geo.id]
            if ( localData && localData.numberOfThings ) {
              alert(localData.numberOfThings)
            }
          })
        }
      })
      
​
​
     </script>
</body>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers