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
  • …
 
<html lang='en'>
<head>
    
<meta charset='utf-8'>
<title>GISTS</title>
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>  
  
<style>
   path {  stroke:#fff  ;
           stroke-width: .9px;
           fill: #BDD684; 
   }
   path:hover{
           fill: #5e6b42;
   }
   svg {
           background: #FFF
   }
</style>
</head>
<body>
<script type="text/javascript">
    //set the width and height
  
var  width = 750, 
     height =700,
     centered; //2500   
//Define the map projection, scale etc
var projection = d3.geo.albers()
        
    .scale([2800] ) //2800
    .translate([width / 1.66, height / 1.2])
    .rotate([121,-11]);
​
  
  
  
  
  
//define path generator
var path = d3.geo.path()
    .projection(projection);
​
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
  
d3.json(src="https://gist.githubusercontent.com/majomo/1beba4e212d12f3d6e29/raw/1bd280591bc4959449505395c90f7ffdd2e2ddbd/bcGeo.json", function(json)
    {  
  
  //Bind data and create one path per GeoJSON feature
    svg.selectAll("path")
       .data(json.features)
       .enter()
       .append("path")
       .attr("d", path)
       .on('mouseover', function(d){
      console.log(d.properties.CDNAME)
    });
​
      
​
  
                                   
});
  
 </script>
</body>
</html>
Output

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

Dismiss x
public
Bin info
majomopro
0viewers