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>
    <meta charset="utf-8">
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <style>
    path {
        fill: #ccc;
        stroke: black;
    }
    </style>
</head>
​
<body>
    <h1>topojson simplified Switzerland</h1>
    <script>
        var url = "https://gist.githubusercontent.com/CitiVince/8fdef0755e9eb1b0a857d32516d8ddde/raw/69628617628b48730d7adc6630cda0ac9dfeb5d5/ch-cantons.json";
    var width = window.innerWidth -200,
        height = window.innerHeight -200;
​
    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);
​
      
function scale (scaleFactor,cx,cy,width,height) {
    return d3.geo.transform({
        point: function(x, y) {
            this.stream.point((x-cx) * scaleFactor + width/2, (y-cy)  * scaleFactor +height/2);
        }
    });
}
​
​
    var path = d3.geo.path()
        .projection(scale(1,0,0,width,height));
​
    d3.json(url, function(error, topology) {
        if (error) throw error;
      
      var bounds = path.bounds((topojson.feature(topology, topology.objects.cantons)));
      var offset = {x: (bounds[0][0] + bounds[1][0])/2, y: (bounds[0][1]+bounds[1][1])/2 }
      
      path.projection(scale(0.002,offset.x,offset.y,width,height))
​
        svg.selectAll("path")
         .data(topojson.feature(topology, topology.objects.cantons).features)
         .enter()
         .append("path")
         .attr("d", path);
    });
    </script>
</body>
​
</html>
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers