waleedshkt/.block

## .block
license: gpl-3.0
height: 250
border: no

## README.md

      
    Raw
  

              README.md
            
          
    Renders a single US state, using d3-zoom to fit the container, and to allow zooming and panning.
The desired behavior is to constrain panning to the bounds of the state. The TopoJSON is projected to 600x600, and at that container size, the zoom & pan works great. However, at smaller container sizes, where the map has been scaled, the panning is jumpy/broken. I've tried setting different values for translateExtent, but I don't realy understand how it's supposed to work.
One notable thing is that I'm using a null projection for d3.geoPath, because I used ogr2ogr to generate a shapefile in projected coordinates for each state. That's why I used a zoom transform to fit the map to its container.
References on bl.ocks.org:

State Icons
Projected TopoJSON
Project to Bounding Box
Zoom to Bounding Box II
Pan & Zoom III
Zoom Transitions


## app.js
var App = (function () {
    "use strict";

    var App = {
        stateCode: window.location.search.substr(1) || 'ma'
    };

    d3.json("us-" + App.stateCode + ".json", ready);

    function ready(error, topo) {
        if (error) throw error;

        App.state = topojson.feature(topo, topo.objects.state);
        App.counties = topojson.feature(topo, topo.objects.counties).features;

        App.div = d3.select('#app');
        App.size = [
            parseInt(App.div.style('width')), parseInt(App.div.style('height'))
        ];

        App.path = d3.geoPath()
            .projection(null);

        App.transform = zoomBounds(App.path.bounds(App.state), App.size);

        App.zoom = d3.zoom()
            .translateExtent([[0, 0], App.size])
            .scaleExtent([App.transform.k, App.transform.k * 2])
            .on("zoom", zoomed);

        App.svg = App.div.append("svg")
            .call(App.zoom);

        App.svg.append("rect")
            .classed("background", true)
            .on("click", reset);

        App.g = App.svg.append("g")
            .attr("transform", App.transform);

        App.g.selectAll("path")
            .data(App.counties)
            .enter().append("path")
            .classed("county", true)
            .attr("d", App.path)
            .on("click", clicked);

        reset();
    }

    function zoomBounds(bounds, size) {
        // Calculate dimensions of bounds
        // and scale to fit inside container
        var width = bounds[1][0] - bounds[0][0],
            height = bounds[1][1] - bounds[0][1],
            scale = 1 / Math.max(width / size[0], height / size[1]);

        // Calculate center of bounds
        // and difference from center of container
        var x = (bounds[0][0] + bounds[1][0]) / 2,
            y = (bounds[0][1] + bounds[1][1]) / 2,
            translate = [size[0] / 2 - scale * x, size[1] / 2 - scale * y];

        return d3.zoomIdentity
            .translate(translate[0], translate[1])
            .scale(scale);
    }

    function zoomed() {
        App.g.attr("transform", d3.event.transform);
    }

    function reset() {
        App.svg.call(App.zoom.transform, App.transform);
    }

    function clicked() {
        App.svg.select(".active")
            .classed("active", false);

        d3.select(this)
            .classed("active", true);
    }

    return App;
})();

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>State Zooming</title>

    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div id="app"></div>

    <script src="//d3js.org/d3.v4.min.js"></script>
    <script src="//d3js.org/topojson.v1.min.js"></script>
    <script src="app.js"></script>
</body>

## style.css
#app {
    margin: 0 auto;
    height: 200px;
    width: 300px;
}

/*
@media screen and (min-width: 640px) {
    #app {
        height: 600px;
        width: 600px;
    }
}
*/

svg {
    border: 1px solid #ccc;
    display: block;
    height: 100%;
    width: 100%;
}

.background {
    height: 100%;
    width: 100%;
    fill: none;
    pointer-events: all;
}

.county {
    fill: #ccc;
    stroke: #fff;
    stroke-linejoin: round;
}

.county.active {
    fill: orange;
}

## us-ca.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-ca.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## us-fl.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-fl.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## us-ma.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-ma.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## us-oh.json
{"type":"Topology","objects":{"counties":{"type":"GeometryCollection","bbox":[1341282.045519272,-460357.7688581933,2549669.725105969,847951.7579694224],"geometries":[{"type":"Polygon","properties":{"state":"OH","county":"Ashtabula County"},"id":39007,"arcs":[[0,1,2,3]]},{"type":"Polygon","properties":{"state":"OH","county":"Lake County"},"id":39085,"arcs":[[4,5,6,-3]]},{"type":"MultiPolygon","properties":{"state":"OH","county":"Lucas County"},"id":39095,"arcs":[[[7,8,9,10,11]]]},{"type":"MultiPolygon","properties":{"state":"OH","county":"Ottawa County"},"id":39123,"arcs":[[[12,13,14,15,16,-8]],[[17]]]},{"type":"Polygon","properties":{"state":"OH","county":"Fulton County"},"id":39051,"arcs":[[18,19,20,-11]]},{"type":"Polygon","properties":{"state":"OH","county":"Geauga County"},"id":39055,"arcs":[[21,22,23,-5,-2]]},{"type":"Polygon","properties":{"state":"OH","county":"Williams County"},"id":39171,"arcs":[[24,25,26,-20]]},{"type":"Polygon","properties":{"state":"OH","county":"Cuyahoga County"},"id":39035,"arcs":[[-24,27,28,29,30,31,-6]]},{"type":"MultiPolygon","properties":{"state":"OH","county":"Erie County"},"id":39043,"arcs":[[[32,33,34,35]],[[36]]]},{"type":"Polygon","properties":{"state":"OH","county":"Wood County"},"id":39173,"arcs":[[-17,37,38,39,40,-9]]},{"type":"Polygon","properties":{"state":"OH","county":"Lorain County"},"id":39093,"arcs":[[-31,41,42,43,-33,44]]},{"type":"Polygon","properties":{"state":"OH","county":"Trumbull County"},"id":39155,"arcs":[[45,46,47,-22,-1]]},{"type":"MultiPolygon","properties":{"state":"OH","county":"Sandusky County"},"id":39143,"arcs":[[[-14,48]],[[49,-35,50,51,-38,-16]]]},{"type":"Polygon","properties":{"state":"OH","county":"Henry County"},"id":39069,"arcs":[[-10,-41,52,53,-25,-19]]},{"type":"Polygon","properties":{"state":"OH","county":"Defiance County"},"id":39039,"arcs":[[54,55,56,-26,-54]]},{"type":"Polygon","properties":{"state":"OH","county":"Summit County"},"id":39153,"arcs":[[57,58,59,60,-29]]},{"type":"Polygon","properties":{"state":"OH","county":"Portage County"},"id":39133,"arcs":[[-48,61,62,-58,-28,-23]]},{"type":"Polygon","properties":{"state":"OH","county":"Huron County"},"id":39077,"arcs":[[-44,63,64,65,66,-51,-34]]},{"type":"Polygon","properties":{"state":"OH","county":"Medina County"},"id":39103,"arcs":[[-61,67,68,-42,-30]]},{"type":"Polygon","properties":{"state":"OH","county":"Seneca County"},"id":39147,"arcs":[[-67,69,70,71,-39,-52]]},{"type":"Polygon","properties":{"state":"OH","county":"Paulding County"},"id":39125,"arcs":[[72,73,74,-56]]},{"type":"Polygon","properties":{"state":"OH","county":"Hancock County"},"id":39063,"arcs":[[-72,75,76,77,78,-40]]},{"type":"Polygon","properties":{"state":"OH","county":"Putnam County"},"id":39137,"arcs":[[-79,79,80,-73,-55,-53]]},{"type":"Polygon","properties":{"state":"OH","county":"Mahoning County"},"id":39099,"arcs":[[81,82,83,-62,-47]]},{"type":"Polygon","properties":{"state":"OH","county":"Ashland County"},"id":39005,"arcs":[[-69,84,85,86,87,-64,-43]]},{"type":"Polygon","properties":{"state":"OH","county":"Crawford County"},"id":39033,"arcs":[[88,89,90,91,-70,-66]]},{"type":"Polygon","properties":{"state":"OH","county":"Richland County"},"id":39139,"arcs":[[-88,92,93,-89,-65]]},{"type":"Polygon","properties":{"state":"OH","county":"Wyandot County"},"id":39175,"arcs":[[-92,94,95,-76,-71]]},{"type":"Polygon","properties":{"state":"OH","county":"Wayne County"},"id":39169,"arcs":[[-60,96,97,-85,-68]]},{"type":"Polygon","properties":{"state":"OH","county":"Van Wert County"},"id":39161,"arcs":[[-81,98,99,100,101,-74]]},{"type":"Polygon","properties":{"state":"OH","county":"Stark County"},"id":39151,"arcs":[[-84,102,103,104,105,-97,-59,-63]]},{"type":"Polygon","properties":{"state":"OH","county":"Columbiana County"},"id":39029,"arcs":[[106,107,108,-103,-83]]},{"type":"Polygon","properties":{"state":"OH","county":"Allen County"},"id":39003,"arcs":[[-78,109,110,-99,-80]]},{"type":"Polygon","properties":{"state":"OH","county":"Hardin County"},"id":39065,"arcs":[[-96,111,112,113,114,-110,-77]]},{"type":"Polygon","properties":{"state":"OH","county":"Carroll County"},"id":39019,"arcs":[[-109,115,116,117,-104]]},{"type":"Polygon","properties":{"state":"OH","county":"Mercer County"},"id":39107,"arcs":[[118,119,120,121,-101]]},{"type":"Polygon","properties":{"state":"OH","county":"Morrow County"},"id":39117,"arcs":[[-94,122,123,124,-90]]},{"type":"Polygon","properties":{"state":"OH","county":"Marion County"},"id":39101,"arcs":[[-125,125,126,-112,-95,-91]]},{"type":"Polygon","properties":{"state":"OH","county":"Auglaize County"},"id":39011,"arcs":[[-115,127,128,-119,-100,-111]]},{"type":"Polygon","properties":{"state":"OH","county":"Holmes County"},"id":39075,"arcs":[[-106,129,130,131,-86,-98]]},{"type":"Polygon","properties":{"state":"OH","county":"Tuscarawas County"},"id":39157,"arcs":[[-118,132,133,134,-130,-105]]},{"type":"Polygon","properties":{"state":"OH","county":"Jefferson County"},"id":39081,"arcs":[[135,136,137,-116,-108]]},{"type":"Polygon","properties":{"state":"OH","county":"Knox County"},"id":39083,"arcs":[[138,139,140,-123,-93,-87,-132]]},{"type":"Polygon","properties":{"state":"OH","county":"Logan County"},"id":39091,"arcs":[[-114,141,142,143,-128]]},{"type":"Polygon","properties":{"state":"OH","county":"Union County"},"id":39159,"arcs":[[144,145,146,-142,-113,-127,147]]},{"type":"Polygon","properties":{"state":"OH","county":"Shelby County"},"id":39149,"arcs":[[-144,148,149,150,-120,-129]]},{"type":"Polygon","properties":{"state":"OH","county":"Coshocton County"},"id":39031,"arcs":[[-135,151,152,153,-139,-131]]},{"type":"Polygon","properties":{"state":"OH","county":"Delaware County"},"id":39041,"arcs":[[-141,154,155,-148,-126,-124]]},{"type":"Polygon","properties":{"state":"OH","county":"Harrison County"},"id":39067,"arcs":[[-138,156,157,-133,-117]]},{"type":"Polygon","properties":{"state":"OH","county":"Darke County"},"id":39037,"arcs":[[-151,158,159,160,161,-121]]},{"type":"Polygon","properties":{"state":"OH","county":"Licking County"},"id":39089,"arcs":[[-154,162,163,164,165,-155,-140]]},{"type":"Polygon","properties":{"state":"OH","county":"Champaign County"},"id":39021,"arcs":[[-147,166,167,168,-149,-143]]},{"type":"Polygon","properties":{"state":"OH","county":"Guernsey County"},"id":39059,"arcs":[[169,170,-152,-134,-158,171]]},{"type":"Polygon","properties":{"state":"OH","county":"Miami County"},"id":39109,"arcs":[[-169,172,173,-159,-150]]},{"type":"Polygon","properties":{"state":"OH","county":"Belmont County"},"id":39013,"arcs":[[-137,174,175,176,-172,-157]]},{"type":"Polygon","properties":{"state":"OH","county":"Muskingum County"},"id":39119,"arcs":[[-171,177,178,179,-163,-153]]},{"type":"Polygon","properties":{"state":"OH","county":"Franklin County"},"id":39049,"arcs":[[-166,180,181,182,-145,-156]]},{"type":"Polygon","properties":{"state":"OH","county":"Madison County"},"id":39097,"arcs":[[183,184,185,186,-167,-146,-183]]},{"type":"Polygon","properties":{"state":"OH","county":"Clark County"},"id":39023,"arcs":[[-187,187,188,-173,-168]]},{"type":"Polygon","properties":{"state":"OH","county":"Noble County"},"id":39121,"arcs":[[-177,189,190,191,-178,-170]]},{"type":"Polygon","properties":{"state":"OH","county":"Fairfield County"},"id":39045,"arcs":[[-165,192,193,194,-181]]},{"type":"Polygon","properties":{"state":"OH","county":"Perry County"},"id":39127,"arcs":[[195,196,197,-193,-164,-180]]},{"type":"Polygon","properties":{"state":"OH","county":"Montgomery County"},"id":39113,"arcs":[[-189,198,199,200,201,-160,-174]]},{"type":"Polygon","properties":{"state":"OH","county":"Preble County"},"id":39135,"arcs":[[-202,202,203,-161]]},{"type":"Polygon","properties":{"state":"OH","county":"Monroe County"},"id":39111,"arcs":[[204,205,-190,-176]]},{"type":"Polygon","properties":{"state":"OH","county":"Greene County"},"id":39057,"arcs":[[-186,206,207,208,-199,-188]]},{"type":"Polygon","properties":{"state":"OH","county":"Pickaway County"},"id":39129,"arcs":[[-195,209,210,211,-184,-182]]},{"type":"Polygon","properties":{"state":"OH","county":"Morgan County"},"id":39115,"arcs":[[-192,212,213,-196,-179]]},{"type":"Polygon","properties":{"state":"OH","county":"Fayette County"},"id":39047,"arcs":[[-212,214,215,216,-207,-185]]},{"type":"Polygon","properties":{"state":"OH","county":"Hocking County"},"id":39073,"arcs":[[217,218,219,-210,-194,-198]]},{"type":"Polygon","properties":{"state":"OH","county":"Washington County"},"id":39167,"arcs":[[-206,220,221,-213,-191]]},{"type":"Polygon","properties":{"state":"OH","county":"Butler County"},"id":39017,"arcs":[[222,223,224,-203,-201]]},{"type":"Polygon","properties":{"state":"OH","county":"Warren County"},"id":39165,"arcs":[[-209,225,226,227,-223,-200]]},{"type":"Polygon","properties":{"state":"OH","county":"Clinton County"},"id":39027,"arcs":[[228,229,-226,-208,-217,230]]},{"type":"Polygon","properties":{"state":"OH","county":"Athens County"},"id":39009,"arcs":[[-222,231,232,233,-218,-197,-214]]},{"type":"Polygon","properties":{"state":"OH","county":"Ross County"},"id":39141,"arcs":[[-220,234,235,236,237,-215,-211]]},{"type":"Polygon","properties":{"state":"OH","county":"Vinton County"},"id":39163,"arcs":[[-234,238,239,240,-235,-219]]},{"type":"Polygon","properties":{"state":"OH","county":"Highland County"},"id":39071,"arcs":[[-238,241,242,243,-231,-216]]},{"type":"Polygon","properties":{"state":"OH","county":"Hamilton County"},"id":39061,"arcs":[[-228,244,245,-224]]},{"type":"Polygon","properties":{"state":"OH","county":"Clermont County"},"id":39025,"arcs":[[246,-245,-227,-230,247]]},{"type":"Polygon","properties":{"state":"OH","county":"Brown County"},"id":39015,"arcs":[[248,249,-248,-229,-244]]},{"type":"Polygon","properties":{"state":"OH","county":"Jackson County"},"id":39079,"arcs":[[250,251,252,253,-236,-241]]},{"type":"Polygon","properties":{"state":"OH","county":"Meigs County"},"id":39105,"arcs":[[254,-239,-233,255]]},{"type":"Polygon","properties":{"state":"OH","county":"Pike County"},"id":39131,"arcs":[[256,257,-242,-237,-254]]},{"type":"Polygon","properties":{"state":"OH","county":"Adams County"},"id":39001,"arcs":[[258,259,-249,-243,-258]]},{"type":"Polygon","properties":{"state":"OH","county":"Gallia County"},"id":39053,"arcs":[[260,261,-251,-240,-255]]},{"type":"Polygon","properties":{"state":"OH","county":"Scioto County"},"id":39145,"arcs":[[-253,262,263,-259,-257]]},{"type":"Polygon","properties":{"state":"OH","county":"Lawrence County"},"id":39087,"arcs":[[264,-263,-252,-262]]}]},"state":{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","arcs":[[[81,106,135,174,204,220,231,255,260,264,263,259,249,246,245,224,203,161,121,101,74,56,26,20,11,12,48,14,49,35,44,31,6,3,45]],[[17]],[[36]]],"id":39,"properties":{"state":"OH"}}]}},"arcs":[[[9939,8669],[-330,-8],[-766,-6]],[[8843,8655],[-12,594]],[[8831,9249],[-5,385]],[[8826,9634],[230,47],[169,72],[57,46],[37,-8],[140,39],[163,66],[40,5],[245,98],[11,-508],[21,-822]],[[8831,9249],[-223,-6],[5,-203],[-437,-7],[1,-198],[-216,-3]],[[7961,8832],[-219,-2],[-4,171]],[[7738,9001],[109,123],[114,91],[234,158],[34,-13],[110,36],[212,122],[275,116]],[[3945,8971],[-145,2],[-421,-9]],[[3379,8964],[-340,0],[-28,-18],[-78,-110],[-151,-63],[-68,-63],[-10,-85],[-80,-75],[-72,-12],[-3,-30],[-169,-100],[-69,0]],[[2311,8408],[4,203]],[[2315,8611],[8,362],[11,0],[-2,286]],[[2332,9259],[928,23],[-21,-85],[42,-18],[73,44],[-13,-55],[185,-14],[38,50],[74,-78],[42,-8],[119,-91],[146,-56]],[[3945,8971],[137,-28],[79,-44],[66,-91],[132,-101],[100,-37],[-73,11],[-126,-27],[-116,-8],[109,-11],[37,18],[99,0],[117,16],[84,30],[54,58],[-7,80],[60,30],[65,-97],[-31,-57],[100,15],[52,25],[73,-12],[14,-38],[-34,-73],[-16,26],[-70,-25],[-92,11],[-40,-46],[-36,30],[-101,-34],[-167,2],[-39,-56],[-46,-25],[-36,17],[-65,-22]],[[4228,8508],[-40,0]],[[4188,8508],[-13,0]],[[4175,8508],[-274,5],[-352,0],[0,119],[-172,2]],[[3377,8634],[2,330]],[[4787,9082],[-93,-97],[-19,49],[20,28],[50,-6],[42,26]],[[2315,8611],[-474,3],[-566,9]],[[1275,8623],[1,80],[-87,1],[5,286],[-39,2],[4,247]],[[1159,9239],[1173,20]],[[8843,8655],[8,-429]],[[8851,8226],[-659,-11],[-222,0]],[[7970,8215],[-5,210],[39,3],[-3,58],[-36,2],[-4,344]],[[1275,8623],[-3,-161]],[[1272,8462],[-1049,19]],[[223,8481],[17,752],[919,6]],[[7970,8215],[-2,0]],[[7968,8215],[-463,2],[22,-35],[6,-80],[44,-87],[-273,-5]],[[7304,8010],[-439,-9]],[[6865,8001],[1,210],[-214,1],[3,428]],[[6655,8640],[64,-37],[146,-22],[127,31],[85,6],[86,-24],[115,76],[149,85],[62,47],[157,151],[92,48]],[[5795,8420],[14,-399]],[[5809,8021],[-243,0],[-495,8],[-397,11]],[[4674,8040],[-14,391],[-121,0]],[[4539,8431],[105,33],[55,32],[4,52],[43,6],[39,-41],[90,-44],[122,54],[170,-112],[39,-12],[-147,148],[-47,30],[14,26],[44,-64],[140,-139],[132,-57],[77,-46],[94,-1],[107,45],[140,82],[35,-3]],[[4999,8934],[42,0],[-10,-66],[-112,41],[58,49],[22,-24]],[[3377,8634],[-19,-686]],[[3358,7948],[-6,-243]],[[3352,7705],[-186,-1],[-509,14],[-353,3]],[[2304,7721],[3,511],[4,176]],[[6865,8001],[-215,0],[-3,-210],[-223,-2],[-3,-176],[-218,1],[-3,-205]],[[6200,7409],[-377,5]],[[5823,7414],[-14,607]],[[5795,8420],[119,4],[93,17],[175,103],[133,51],[241,74],[99,-29]],[[9939,8669],[26,-1020]],[[9965,7649],[-1095,-17]],[[8870,7632],[-19,594]],[[4228,8508],[-40,0]],[[4175,8508],[25,-23],[52,14],[42,-34],[0,-36],[74,66],[48,-70],[72,-23],[51,29]],[[4674,8040],[3,-97]],[[4677,7943],[-648,7],[-209,-8],[-241,7],[-221,-1]],[[2304,7721],[-791,8]],[[1513,7729],[13,473],[3,256],[-257,4]],[[1513,7729],[-258,3]],[[1255,7732],[3,121],[-263,9],[1,121],[-233,2],[-553,13]],[[210,7998],[13,483]],[[7968,8215],[8,-641],[2,-360]],[[7978,7214],[-52,-1],[-6,-228],[-521,16]],[[7399,7001],[-2,207],[-93,-1]],[[7304,7207],[0,803]],[[8870,7632],[7,-406],[-199,-4]],[[8678,7222],[-700,-8]],[[5823,7414],[-227,-1],[8,-202]],[[5604,7211],[-667,8]],[[4937,7219],[-239,4]],[[4698,7223],[-21,720]],[[7304,7207],[-155,-3],[-552,2],[-300,4]],[[6297,7210],[-100,0],[3,199]],[[4698,7223],[-66,-8],[-581,2]],[[4051,7217],[-703,1]],[[3348,7218],[4,487]],[[1255,7732],[-12,-486],[-131,1]],[[1112,7247],[-922,18]],[[190,7265],[20,733]],[[3348,7218],[-85,1],[-1,-121],[-44,0],[-2,-120],[-86,1],[-6,-242]],[[3124,6737],[-338,8],[-496,7]],[[2290,6752],[4,280]],[[2294,7032],[10,689]],[[2294,7032],[-263,3],[0,-42],[-262,4],[-2,-122],[-529,4]],[[1238,6879],[2,124],[-131,4],[3,240]],[[9965,7649],[15,-650]],[[9980,6999],[-692,-10],[-1,80],[-170,-2],[-1,-80],[-433,-6]],[[8683,6981],[-5,241]],[[6297,7210],[11,-293],[-4,-230],[4,-378]],[[6308,6309],[-216,-3],[2,-277]],[[6094,6029],[-269,-37]],[[5825,5992],[-6,478],[-90,3],[-1,165],[-22,59],[-67,19],[3,40],[-4,455],[-34,0]],[[4937,7219],[1,-187],[-9,-605]],[[4929,6427],[-300,5],[-1,-21]],[[4628,6411],[-224,-4],[-356,1]],[[4048,6408],[3,809]],[[5825,5992],[-87,-12],[-572,-2]],[[5166,5978],[-2,243],[-45,0],[-1,81],[43,-1],[-2,121],[-230,5]],[[4048,6408],[-444,0],[-1,-41],[-263,2]],[[3340,6369],[-47,3],[0,41],[-127,-1],[3,324],[-45,1]],[[7399,7001],[4,-462],[-2,-224]],[[7401,6315],[-525,-8],[-568,2]],[[1238,6879],[-2,-119],[-131,2],[-7,-365]],[[1098,6397],[-136,3]],[[962,6400],[3,120],[-487,9],[-307,9]],[[171,6538],[19,727]],[[8683,6981],[7,-484]],[[8690,6497],[-255,0],[-1,-19],[-88,2],[-6,-203],[-175,0]],[[8165,6277],[-291,2],[-27,37],[-32,-35],[-410,-59]],[[7405,6222],[-4,93]],[[9980,6999],[19,-727],[-142,-73],[-45,29],[-65,-22],[-86,-97]],[[9661,6109],[-183,-1],[-1,38],[-263,2]],[[9214,6148],[0,120],[-131,0],[-3,233],[-390,-4]],[[2290,6752],[-9,-487]],[[2281,6265],[-522,3],[0,42],[-263,2],[1,80],[-399,5]],[[3340,6369],[-4,-203],[9,-274],[-8,-29]],[[3337,5863],[-234,0]],[[3103,5863],[0,14],[-261,25],[-565,48],[0,19]],[[2277,5969],[4,296]],[[9214,6148],[-1,-123],[-132,1],[-4,-246],[-36,0],[0,-122]],[[9041,5658],[-366,7],[-46,6],[-345,1]],[[8284,5672],[6,366],[-131,3],[6,236]],[[962,6400],[-12,-610],[-9,-298],[49,-13]],[[990,5479],[-1,-1]],[[989,5478],[-381,2],[-470,13]],[[138,5493],[33,1045]],[[5166,5978],[-44,0],[0,-78],[22,0],[-31,-493],[-227,13]],[[4886,5420],[-426,26],[12,157],[-224,13],[3,41]],[[4251,5657],[10,141],[134,17],[4,430],[225,3],[4,163]],[[4251,5657],[-353,18],[-172,14]],[[3726,5689],[3,176],[-392,-2]],[[2277,5969],[-66,-8],[-196,3],[-5,-146],[-18,1]],[[1992,5819],[-775,8],[-6,-285],[-219,3],[-2,-66]],[[7405,6222],[-30,-19],[-12,-512],[-91,1]],[[7272,5692],[-868,17],[-227,9]],[[6177,5718],[11,325],[-94,-14]],[[8284,5672],[-7,-362],[-137,0],[-4,-251]],[[8136,5059],[-658,13]],[[7478,5072],[11,409],[-222,5],[5,206]],[[9661,6109],[90,-123],[37,-104],[42,-53],[3,-51],[-34,-75],[-1,-96],[-36,-37],[54,-43],[-6,-87],[25,-56],[-33,-88],[2,-55],[-96,-96],[-19,-99],[-82,-122]],[[9607,4924],[-146,4],[-1,-13],[-269,7]],[[9191,4922],[13,613],[12,121],[-175,2]],[[6177,5718],[-24,-605]],[[6153,5113],[-348,2],[-302,16],[3,52],[-635,35]],[[4871,5218],[15,202]],[[3103,5863],[-82,-764]],[[3021,5099],[-540,50],[1,42],[-529,45]],[[1953,5236],[13,123],[15,-14],[1,216],[7,1],[3,257]],[[3900,4850],[-1,-98],[-83,0]],[[3816,4752],[-689,17]],[[3127,4769],[25,317],[-131,13]],[[3726,5689],[-5,-281],[1,-274],[175,-2],[3,-282]],[[1953,5236],[-24,-249]],[[1929,4987],[-452,40],[1,12],[-495,2]],[[983,5041],[6,437]],[[7478,5072],[-104,2],[-6,-199],[-105,3]],[[7263,4878],[-369,11],[-489,10],[-231,13]],[[6174,4912],[9,200],[-30,1]],[[4871,5218],[-26,-420]],[[4845,4798],[-945,52]],[[9191,4922],[-531,15],[0,9],[-263,1],[0,-7]],[[8397,4940],[-263,2],[2,117]],[[983,5041],[-4,-773]],[[979,4268],[-137,0]],[[842,4268],[-292,1],[-467,12]],[[83,4281],[8,203],[44,888],[3,121]],[[6174,4912],[-25,-603],[-76,2],[-5,-105]],[[6068,4206],[-429,24],[1,16],[-103,6]],[[5537,4252],[-25,-14],[-717,41]],[[4795,4279],[20,102],[30,417]],[[3127,4769],[-32,-282]],[[3095,4487],[-1204,100]],[[1891,4587],[38,400]],[[8388,4330],[-264,4],[-89,-10],[-2,-81],[-175,4],[-2,-81],[-266,6],[-2,-163],[-265,7]],[[7323,4016],[5,246],[-87,2],[22,614]],[[8397,4940],[-9,-610]],[[1891,4587],[-43,-446]],[[1848,4141],[-246,21],[-20,76],[21,28],[-624,2]],[[9607,4924],[-11,-165],[-68,-61],[26,-93],[-28,-114],[6,-90],[-37,-29],[-11,-51],[19,-86],[-116,12],[-8,-31],[47,-83],[-15,-35],[-63,-38]],[[9348,4060],[-453,18],[-255,16],[-256,4]],[[8384,4098],[4,232]],[[7323,4016],[-5,-242]],[[7318,3774],[-578,22],[-305,15]],[[6435,3811],[7,126],[-225,12],[17,246],[-166,11]],[[4795,4279],[-66,5],[-5,-82],[43,-3],[-21,-244],[-43,3],[-7,-81]],[[4696,3877],[-478,30],[-361,14],[-136,10]],[[3721,3931],[-16,292],[61,41],[-56,107],[7,50],[-16,168],[99,-3],[16,166]],[[3721,3931],[-23,-326]],[[3698,3605],[-484,31],[-449,38]],[[2765,3674],[17,157]],[[2782,3831],[135,-14],[88,327],[99,343],[-9,0]],[[2782,3831],[1,8],[-214,17],[-4,22],[-206,28],[6,68],[-265,21],[5,42],[-265,23]],[[1840,4060],[8,81]],[[8384,4098],[-178,2],[-6,-451],[90,0],[-2,-282]],[[8288,3367],[0,-39],[-170,3],[0,20],[-90,1],[-1,39],[-44,0],[0,41],[-91,1],[1,40],[-49,1],[1,-175],[-268,8]],[[7577,3307],[3,214],[-133,3],[5,243],[-134,7]],[[5537,4252],[-21,-259],[176,-12],[-19,-246],[89,-5],[-19,-244]],[[5743,3486],[-270,16],[-14,-162],[-283,17],[-6,-125],[-257,15],[-3,-41]],[[4910,3206],[-260,22],[21,244],[-5,38],[30,367]],[[6435,3811],[-7,-121],[130,-7],[-33,-486],[-19,1]],[[6506,3198],[-260,15]],[[6246,3213],[-244,15],[4,79],[-275,17],[12,162]],[[1840,4060],[-4,-40],[-88,7],[-55,-589],[-8,-135]],[[1685,3303],[-400,39],[-185,4]],[[1100,3346],[-266,10]],[[834,3356],[8,912]],[[834,3356],[-1,-62],[-111,0],[-673,14]],[[49,3308],[20,647],[14,326]],[[9348,4060],[-1,-134],[-90,-80],[1,-53],[83,-106],[-12,-35],[-58,-24],[-29,-187],[-26,-26],[-97,-4],[-257,-219]],[[8862,3192],[2,89],[-490,13],[-43,-7],[1,79],[-44,1]],[[2765,3674],[-46,-463]],[[2719,3211],[-715,63]],[[2004,3274],[-319,29]],[[4910,3206],[-22,-239]],[[4888,2967],[-602,35],[38,25],[-15,47],[-649,33]],[[3660,3107],[38,498]],[[7577,3307],[-234,7],[-61,-26],[-16,-139],[40,-1],[-7,-140],[-122,5],[-53,27],[-93,2],[-5,-124],[-44,3]],[[6982,2921],[-493,24],[17,253]],[[3660,3107],[-252,-385]],[[3408,2722],[-510,9]],[[2898,2731],[40,461],[-219,19]],[[6246,3213],[-18,-251],[-264,17],[-21,-247]],[[5943,2732],[-526,32],[-8,-73],[-273,18],[-3,-40],[-264,19]],[[4869,2688],[19,279]],[[8862,3192],[-130,-132],[-79,-132],[-125,-42],[-76,-127],[-54,7],[-146,-59],[-109,-72],[-74,-8],[-47,65],[-17,67],[-77,56],[-63,-21],[-82,-91],[-117,-73],[-21,-96],[-1,-99],[-22,-22],[-85,26],[-95,3],[-66,-14],[-33,-32],[7,-98],[-83,-28]],[[7267,2270],[7,150],[-226,6],[3,83],[-44,1],[2,41],[-44,2],[17,368]],[[1100,3346],[-2,-125],[77,17],[-24,-247],[7,-18],[-50,-455]],[[1108,2518],[-98,17],[-551,52],[-25,-19],[-416,10]],[[18,2578],[31,730]],[[2004,3274],[-86,-874]],[[1918,2400],[-591,54]],[[1327,2454],[-7,48],[-212,16]],[[2249,2374],[-291,23]],[[1958,2397],[-40,3]],[[2898,2731],[-459,-317],[-41,-88],[-81,-20],[5,62],[-73,6]],[[7267,2270],[-24,-66],[-48,-33]],[[7195,2171],[-734,31],[-468,28]],[[5993,2230],[19,248],[-89,6],[20,248]],[[4869,2688],[-35,-446]],[[4834,2242],[-9,-109],[-46,0]],[[4779,2133],[-679,44],[-505,37],[-147,7]],[[3448,2221],[25,102],[-10,52],[-43,-34],[-63,78],[30,32],[-13,116],[28,71],[6,84]],[[5993,2230],[-89,4],[-37,-495]],[[5867,1739],[-264,20]],[[5603,1759],[24,286],[-271,19],[9,101],[-270,25],[3,35],[-264,17]],[[3448,2221],[-80,-396]],[[3368,1825],[-532,-95],[-145,6]],[[2691,1736],[-468,8],[8,107],[18,523]],[[1327,2454],[-145,-128],[17,-43],[63,13],[19,-42],[-50,-66],[-60,-425]],[[1171,1763],[-97,57],[-107,14],[-53,35],[-5,102],[-38,66],[-49,11],[-60,-56],[-74,-21],[-54,21],[-50,-46],[-83,-25],[-62,11],[-41,42],[-87,32],[-70,99],[-59,30],[-54,-24],[-49,-62],[-79,-27],[18,556]],[[1785,1055],[-90,9],[-153,61],[-114,22],[-54,56],[-11,199],[-123,176],[-37,144],[-32,41]],[[1958,2397],[-40,-330],[-64,-475],[-69,-537]],[[2691,1736],[-71,-779],[-21,-287]],[[2599,670],[-129,36],[-43,54],[-19,83],[-95,32],[-37,38],[-43,94],[-148,40],[-55,38],[-98,2],[-147,-32]],[[5603,1759],[-47,-530],[-281,25],[-3,-26]],[[5272,1228],[-175,13]],[[5097,1241],[-261,17],[18,252],[-127,8]],[[4727,1518],[52,615]],[[6395,1558],[7,113],[-537,28],[2,40]],[[7195,2171],[33,-90],[-2,-141],[-74,-56],[-84,9],[25,-90],[85,-75],[-3,-91],[-24,-92],[50,-52],[-10,-36],[-64,5],[-51,47],[-54,-4],[-35,-109],[-35,-45],[-72,-37],[-87,60],[70,107],[-89,159],[-103,11],[-15,59],[-35,33],[-82,-11],[-33,-84],[-86,-49],[-25,-41]],[[4727,1518],[-475,26],[-478,13],[-6,88],[-53,49],[-78,19]],[[3637,1713],[-92,75],[-10,27],[-167,10]],[[3637,1713],[2,-407],[-5,-700]],[[3634,606],[-55,-62],[-70,43],[-24,75],[-91,56],[-190,32],[-97,64],[-77,29],[-108,-41],[-79,-5],[-74,-41],[-18,-82],[-64,-38],[-88,34]],[[6395,1558],[-39,-98],[-69,-93],[16,-65],[-12,-90],[-46,-45],[-113,-63],[-17,-74],[57,-52],[31,-135],[-18,-58],[43,-151],[-8,-73],[-38,-33],[-82,-4],[-71,17],[-74,-41]],[[5955,500],[-177,6],[16,254],[-278,17],[12,161],[-46,8],[7,81],[-234,19],[17,182]],[[5097,1241],[-31,-281],[-77,6],[-27,-202],[-135,7],[-6,-99],[60,-132],[-179,-73]],[[4702,467],[-72,66],[-20,62],[-17,132],[-39,69],[19,112],[-39,71],[-128,-36],[-87,-46],[-83,12],[-52,-23],[-62,-84],[-127,-64],[-34,-84],[-64,-49],[-105,-10],[-81,32],[-77,-21]],[[5955,500],[-37,-243],[-43,-128],[-47,-29],[-99,-17],[-63,13],[-309,-95],[-73,3],[-61,47],[-41,140],[-95,60],[-106,139],[-77,44],[-151,6],[-51,27]]],"transform":{"scale":[0.05542305573682374,-0.06000600060005999],"translate":[22.912432843749684,600]}}

## us-ri.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-ri.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## us-wa.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-wa.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	var App = (function () {
	"use strict";

	var App = {
	stateCode: window.location.search.substr(1) \|\| 'ma'
	};

	d3.json("us-" + App.stateCode + ".json", ready);

	function ready(error, topo) {
	if (error) throw error;

	App.state = topojson.feature(topo, topo.objects.state);
	App.counties = topojson.feature(topo, topo.objects.counties).features;

	App.div = d3.select('#app');
	App.size = [
	parseInt(App.div.style('width')), parseInt(App.div.style('height'))
	];

	App.path = d3.geoPath()
	.projection(null);

	App.transform = zoomBounds(App.path.bounds(App.state), App.size);

	App.zoom = d3.zoom()
	.translateExtent([[0, 0], App.size])
	.scaleExtent([App.transform.k, App.transform.k * 2])
	.on("zoom", zoomed);

	App.svg = App.div.append("svg")
	.call(App.zoom);

	App.svg.append("rect")
	.classed("background", true)
	.on("click", reset);

	App.g = App.svg.append("g")
	.attr("transform", App.transform);

	App.g.selectAll("path")
	.data(App.counties)
	.enter().append("path")
	.classed("county", true)
	.attr("d", App.path)
	.on("click", clicked);

	reset();
	}

	function zoomBounds(bounds, size) {
	// Calculate dimensions of bounds
	// and scale to fit inside container
	var width = bounds[1][0] - bounds[0][0],
	height = bounds[1][1] - bounds[0][1],
	scale = 1 / Math.max(width / size[0], height / size[1]);

	// Calculate center of bounds
	// and difference from center of container
	var x = (bounds[0][0] + bounds[1][0]) / 2,
	y = (bounds[0][1] + bounds[1][1]) / 2,
	translate = [size[0] / 2 - scale * x, size[1] / 2 - scale * y];

	return d3.zoomIdentity
	.translate(translate[0], translate[1])
	.scale(scale);
	}

	function zoomed() {
	App.g.attr("transform", d3.event.transform);
	}

	function reset() {
	App.svg.call(App.zoom.transform, App.transform);
	}

	function clicked() {
	App.svg.select(".active")
	.classed("active", false);

	d3.select(this)
	.classed("active", true);
	}

	return App;
	})();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>State Zooming</title>

	<link href="style.css" rel="stylesheet">
	</head>
	<body>
	<div id="app"></div>

	<script src="//d3js.org/d3.v4.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script src="app.js"></script>
	</body>
	#app {
	margin: 0 auto;
	height: 200px;
	width: 300px;
	}

	/*
	@media screen and (min-width: 640px) {
	#app {
	height: 600px;
	width: 600px;
	}
	}
	*/

	svg {
	border: 1px solid #ccc;
	display: block;
	height: 100%;
	width: 100%;
	}

	.background {
	height: 100%;
	width: 100%;
	fill: none;
	pointer-events: all;
	}

	.county {
	fill: #ccc;
	stroke: #fff;
	stroke-linejoin: round;
	}

	.county.active {
	fill: orange;
	}