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>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
  <script src="http://unilogue.github.io/js/map/datamaps.world.min.js"></script>
  <title>JS Bin</title>
</head>
  
  <style class="datamaps-style-block">.datamap path.datamaps-graticule { fill: none; stroke: #777; stroke-width: 0.5px; stroke-opacity: .5; pointer-events: all; } .datamap .labels {pointer-events: all;} .datamap path {stroke: #FFFFFF; stroke-width: 1px;} .datamaps-legend dt, .datamaps-legend dd { float: left; margin: 0 3px 0 0;} .datamaps-legend dd {width: 20px; margin-right: 6px; border-radius: 3px;} .datamaps-legend {padding-bottom: 20px; z-index: 1001; position: absolute; left: 4px; font-size: 12px; font-family: "Source Code Pro", sans-serif;} .datamaps-hoverover {display: none; font-family: "Source Code Pro", sans-serif; } .hoverinfo {padding: 4px; border-radius: 1px; background-color: #FFF; box-shadow: 1px 1px 5px #CCC; font-size: 12px; border: 1px solid #CCC; "Source Code Pro";} .hoverinfo hr {border:1px dotted #CCC; }</style>
  <style>.datamap path.datamaps-graticule {
  pointer-events: all;
}
​
.datamap path.datamaps-subunit {
  pointer-events: all;
}</style>
  
<body>
  <p>$ Vice Audience Geography</p>
<p id="world" style="fill-opacity:0.7; height: 600px; width: 500px; margin-top:-50px;"></p>
  <script>
    
   
    
    //basic map config with custom fills, mercator projection
           
               var series = [
        ["USA",36.2],["GBR",7.4],["CAN",6.2],["DEU",5.7],["FRA", 4.1],["ESP",4.1],["ITA",3.3],["MEX",3.0],["AUS",2.5],["NLD",2.4],
        ["IND",2.1],["BRA",2.0],["GRC",1.4],["AUT",1.2],["ROU",1.2],["SRB",1.0],["COL",0.8],["POL",0.8],["ZAF",0.7],["SWE",0.7],
        ["DNK",0.6],["VEN",0.6],["JPN",0.6],["KOR",0.6],["BEL",0.5],["RUS",0.5],["PRT",0.5]
                            ];
                       
         var dataset = {};
            // We need to colorize every country based on "percent"
            // colors should be uniq for every value.
            // For this purpose we create palette(using min/max series-value)
            var onlyValues = series.map(function(obj){ return obj[1]; });
            var minValue = Math.min.apply(null, onlyValues),
                    maxValue = Math.max.apply(null, onlyValues);
            // create color palette function
            // color can be whatever you wish
            var paletteScale = d3.scale.linear()
                    .domain([minValue,maxValue])
                    .range(["rgb(0,0,0)","rgb(219,219,219)"]);  // color
            // fill dataset in appropriate format
            series.forEach(function(item){ //
                // item example value ["USA", 36.2]
                var iso = item[0],
                        value = item[1];
                dataset[iso] = { percent: value, fillColor: paletteScale(value) };
            });
    
              var map = new Datamap({
                done: function(datamap) {
            datamap.svg.call(d3.behavior.zoom().on("zoom", redraw));
            function redraw() {
                datamap.svg.selectAll("g").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
            }
        },
                scope: 'world',
                element: document.getElementById('world'),
                projection: 'orthographic',
                projectionConfig: {
                  rotation: [90,-30]
                },
                 fills: {defaultFill: 'rgba(30,30,30,0.1)'},
                data: dataset,
                geographyConfig: {
                    borderColor: 'rgba(222,222,222,0.2)',
                    highlightBorderWidth: 1,
                    // don't change color on mouse hover
                    highlightFillColor: function(geo) {
                        return geo['fillColor'] || 'rgba(30,30,30,0.5)';
                    },
                    // only change border
                    highlightBorderColor: 'rgba(222,222,222,0.5)',
                    // show desired information in tooltip
                    popupTemplate: function(geo, data) {
                        // don't show tooltip if country don't present in dataset
                        if (!data) { return ; }
                        // tooltip content
                        return ['',
                            '<div class ="hoverinfo">% of visitors in ' + geo.properties.name,
                                ': ' + data.percent,
                                ''].join('');        
                                
                    }
                }
            });
            
    
         
            //draw a legend for this map
            map.legend();
            
              map.graticule();
    
   
    
  </script>
    <br>
    <br>
    <br>
<p>Created with <a href="https://github.com/unilogue/datamaps" target="_blank">datamaps</a> and <a href="http://www.alexa.com/siteinfo/vice.com" target="_blank">Alexa.</a></p>
</body>
</html>
 
​
Output

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

Dismiss x
public
Bin info
uniloguepro
0viewers