D3 + Albers + zoom behavior

README.md

Alberta Aboriginal Treaty Lands.

ab-treaties.json

{
"type": "FeatureCollection",
                                                                                
"features": [
{ "type": "Feature", "properties": { "TREATY_NAM": "Treaty 8 (1899)", "TREATY_COD": "00004", "SHAPE_AREA": 57.215693501899999, "SHAPE_LEN": 42.5324862907, "OBJECTID": 1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -110.00612501935484, 58.740092683870969 ], [ -110.005775425806448, 55.985204780645162 ], [ -110.169850896774193, 55.824746270967744 ], [ -110.391497903225812, 55.440028187096772 ], [ -110.869540838709682, 55.345438529032258 ], [ -111.051179625806455, 55.267881729032254 ], [ -111.408829954838708, 54.918430677419352 ], [ -111.472569754838702, 54.808142470967745 ], [ -111.917196974193544, 54.910727516129029 ], [ -112.10090252258064, 54.870491116129031 ], [ -112.143235354838708, 54.932399251612907 ], [ -112.232902922580649, 54.936692980645162 ], [ -112.299153916129029, 54.996586335483869 ], [ -112.505751464516123, 54.933640554838711 ], [ -112.529134554838706, 55.082073341935484 ], [ -112.736214625806454, 55.016346490322583 ], [ -112.730956825806459, 54.973583716129035 ], [ -112.913882206451618, 54.96756104516129 ], [ -113.182942554838704, 54.882145012903223 ], [ -113.297379038709678, 54.727372451612901 ], [ -113.448086225806449, 54.766110935483873 ], [ -113.466335780645167, 54.806948451612904 ], [ -113.402804051612904, 54.934986180645161 ], [ -113.493759522580646, 55.065162219354839 ], [ -113.590652780645158, 55.108070019354841 ], [ -113.569118077419361, 55.155144051612901 ], [ -113.651534006451612, 55.241575341935487 ], [ -114.05499563870967, 55.162657058064518 ], [ -114.323724219354844, 54.675124109677419 ], [ -114.314714961290321, 54.535069329032261 ], [ -114.472020877419354, 54.4222026 ], [ -114.517172864516127, 54.435112922580643 ], [ -114.524528445161295, 54.373118593548384 ], [ -114.600573632258062, 54.326971535483871 ], [ -114.9582118, 54.314549038709679 ], [ -114.93646406451613, 54.296831064516127 ], [ -115.026609051612908, 54.235107341935482 ], [ -115.243712270967748, 54.155560619354837 ], [ -115.735068477419361, 54.148245425806451 ], [ -115.834467909677414, 54.183968567741935 ], [ -116.00698779354839, 54.17690112903226 ], [ -116.251476670967747, 54.252894735483871 ], [ -116.462116883870962, 54.210066703225806 ], [ -116.72088876774194, 54.118257806451609 ], [ -116.86317355483871, 53.989735767741934 ], [ -117.064858425806449, 53.942784051612904 ], [ -117.192100219354842, 53.812388 ], [ -117.155162509677425, 53.769635922580648 ], [ -117.156608445161297, 53.652716251612901 ], [ -117.479893141935477, 53.459853741935483 ], [ -117.841850890322576, 53.331648206451611 ], [ -117.867134729032259, 53.230892303225808 ], [ -117.976331019354845, 53.194964425806454 ], [ -117.9872278, 53.139467245161292 ], [ -118.0915924, 53.051495509677423 ], [ -118.030147909677424, 52.941472658064512 ], [ -118.068507374193544, 52.849531683870964 ], [ -117.963229167741929, 52.741525870967742 ], [ -117.882284883870966, 52.713412025806448 ], [ -117.866350793548392, 52.622901187096772 ], [ -117.744658206451618, 52.580716161290326 ], [ -117.4730148, 52.307626251612902 ], [ -117.030298864516126, 52.007694741935481 ], [ -116.304624529032253, 51.66785851612903 ], [ -116.078834045161287, 51.514262703225803 ], [ -116.287898683870964, 51.440825870967743 ], [ -116.36173643225807, 51.471257070967745 ], [ -116.391505851612905, 51.546253341935483 ], [ -116.59617678709678, 51.662663522580644 ], [ -116.585293212903224, 51.713400851612903 ], [ -116.680893632258062, 51.812798535483871 ], [ -116.756114496774188, 51.799197851612902 ], [ -116.820604819354841, 51.737146870967742 ], [ -116.810036612903232, 51.704560251612904 ], [ -116.920781877419358, 51.709359864516131 ], [ -116.976773832258061, 51.760058141935481 ], [ -116.980360638709683, 51.834911303225809 ], [ -117.034962922580647, 51.855749935483871 ], [ -117.012145148387091, 51.890209283870966 ], [ -117.305750477419352, 52.073963696774193 ], [ -117.317115858064511, 52.187386064516133 ], [ -117.351510832258072, 52.135869716129029 ], [ -117.508416658064519, 52.15794136129032 ], [ -117.56036756129032, 52.126996561290326 ], [ -117.662818251612904, 52.198447716129031 ], [ -117.815930987096777, 52.223749541935483 ], [ -117.844354264516127, 52.27279251612903 ], [ -117.704739187096777, 52.356367322580645 ], [ -117.762500167741933, 52.413405806451614 ], [ -117.892960264516134, 52.427791916129031 ], [ -117.991934019354844, 52.500049206451614 ], [ -118.060044619354841, 52.455743612903227 ], [ -118.045426406451611, 52.402254341935482 ], [ -118.215888748387101, 52.371667025806453 ], [ -118.252459103225803, 52.443856206451613 ], [ -118.198350258064522, 52.485118245161289 ], [ -118.263187838709683, 52.504578541935487 ], [ -118.271993264516126, 52.564545161290326 ], [ -118.356640470967747, 52.615241193548385 ], [ -118.288358245161291, 52.678963445161287 ], [ -118.418889070967737, 52.773778303225804 ], [ -118.384140135483875, 52.847162774193549 ], [ -118.498395561290323, 52.906119083870969 ], [ -118.615492741935483, 52.881268135483872 ], [ -118.610601941935485, 52.935639832258062 ], [ -118.672862948387092, 52.978384716129035 ], [ -118.640158038709671, 52.998701206451614 ], [ -118.657076496774195, 53.034511735483875 ], [ -118.778164103225805, 53.046366070967743 ], [ -118.72894130322581, 53.11264728387097 ], [ -118.793418793548383, 53.162069470967744 ], [ -118.983176987096769, 53.242120425806448 ], [ -119.025825212903229, 53.223281445161291 ], [ -118.993312819354841, 53.205268535483867 ], [ -119.027356116129027, 53.123837316129034 ], [ -119.147895722580643, 53.191109625806455 ], [ -119.26110580645161, 53.176550270967745 ], [ -119.390953819354834, 53.359373445161289 ], [ -119.680945670967745, 53.370171083870972 ], [ -119.767044664516135, 53.429392212903224 ], [ -119.784937574193549, 53.491508445161287 ], [ -119.901178993548385, 53.516610174193545 ], [ -119.861880819354838, 53.553154916129031 ], [ -119.921757096774201, 53.61453666451613 ], [ -119.716443638709677, 53.612318412903228 ], [ -119.792713135483865, 53.70324782580645 ], [ -119.912208361290325, 53.711566245161293 ], [ -119.888731316129025, 53.776398361290319 ], [ -120.00131847741936, 53.798655541935481 ], [ -120.00133970322581, 60.000463477419359 ], [ -110.006364896774187, 59.999597987096777 ], [ -110.00612501935484, 58.740092683870969 ] ] ] } }
,
{ "type": "Feature", "properties": { "TREATY_NAM": "Treaty 10 (1906)", "TREATY_COD": "00005", "SHAPE_AREA": 1.04395713956, "SHAPE_LEN": 4.95738424884, "OBJECTID": 2 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -110.005784070967735, 55.184085038709675 ], [ -110.005746716129039, 54.520609006451615 ], [ -111.472569754838702, 54.808142470967745 ], [ -111.408829954838708, 54.918430677419352 ], [ -111.051179625806455, 55.267881729032254 ], [ -110.869540838709682, 55.345438529032258 ], [ -110.52627189677419, 55.396441316129035 ], [ -110.365488083870972, 55.459805258064513 ], [ -110.206367212903231, 55.771729787096774 ], [ -110.005775425806448, 55.985204780645162 ], [ -110.005784070967735, 55.184085038709675 ] ] ] } }
,
{ "type": "Feature", "properties": { "TREATY_NAM": "Treaty 6 (1876)", "TREATY_COD": "00002", "SHAPE_AREA": 20.801539428400002, "SHAPE_LEN": 24.1936529659, "OBJECTID": 3 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -113.698699645161284, 55.252096851612905 ], [ -113.569118077419361, 55.155144051612901 ], [ -113.590652780645158, 55.108070019354841 ], [ -113.493759522580646, 55.065162219354839 ], [ -113.402804051612904, 54.934986180645161 ], [ -113.466335780645167, 54.806948451612904 ], [ -113.448086225806449, 54.766110935483873 ], [ -113.297379038709678, 54.727372451612901 ], [ -113.182942554838704, 54.882145012903223 ], [ -112.913882206451618, 54.96756104516129 ], [ -112.730956825806459, 54.973583716129035 ], [ -112.736214625806454, 55.016346490322583 ], [ -112.529134554838706, 55.082073341935484 ], [ -112.49072970322581, 54.929998348387095 ], [ -112.299153916129029, 54.996586335483869 ], [ -112.232902922580649, 54.936692980645162 ], [ -112.143235354838708, 54.932399251612907 ], [ -112.10090252258064, 54.870491116129031 ], [ -111.852264716129028, 54.902938619354842 ], [ -110.005746716129039, 54.520609006451615 ], [ -110.005161838709682, 50.896745277419356 ], [ -112.638636374193553, 52.307485161290323 ], [ -113.184441870967746, 52.320576548387095 ], [ -113.261885554838713, 52.308331741935483 ], [ -113.272524561290325, 52.254566051612905 ], [ -113.471305167741932, 52.235284832258067 ], [ -113.666054038709675, 52.288396012903227 ], [ -113.697477748387101, 52.345132464516126 ], [ -113.754508406451606, 52.357514587096773 ], [ -113.803791870967743, 52.28105819354839 ], [ -113.8771538, 52.263160729032258 ], [ -113.98311896774193, 52.070888993548387 ], [ -114.170892703225803, 52.079031141935481 ], [ -114.319069703225807, 52.00356596129032 ], [ -114.369007116129026, 52.029827212903228 ], [ -114.44476190322581, 51.94730368387097 ], [ -114.601166754838715, 51.884249832258064 ], [ -114.660454632258066, 51.770890954838713 ], [ -114.789379232258071, 51.760769664516133 ], [ -114.888842238709671, 51.687758729032261 ], [ -114.962061851612901, 51.690207709677416 ], [ -115.046450154838709, 51.630715077419353 ], [ -115.390785309677426, 51.652242877419354 ], [ -115.546947509677423, 51.730248987096772 ], [ -115.692806812903228, 51.712656987096771 ], [ -115.915889896774189, 51.649337064516132 ], [ -115.94226398709678, 51.587164354838713 ], [ -116.078834045161287, 51.514262703225803 ], [ -116.304624529032253, 51.66785851612903 ], [ -116.940274825806455, 51.954967470967745 ], [ -117.22112032903226, 52.130517819354836 ], [ -117.4730148, 52.307626251612902 ], [ -117.744658206451618, 52.580716161290326 ], [ -117.866350793548392, 52.622901187096772 ], [ -117.882284883870966, 52.713412025806448 ], [ -117.963229167741929, 52.741525870967742 ], [ -118.068507374193544, 52.849531683870964 ], [ -118.030147909677424, 52.941472658064512 ], [ -118.0915924, 53.051495509677423 ], [ -117.9872278, 53.139467245161292 ], [ -117.976331019354845, 53.194964425806454 ], [ -117.867134729032259, 53.230892303225808 ], [ -117.841850890322576, 53.331648206451611 ], [ -117.479893141935477, 53.459853741935483 ], [ -117.156608445161297, 53.652716251612901 ], [ -117.155162509677425, 53.769635922580648 ], [ -117.192100219354842, 53.812388 ], [ -117.064858425806449, 53.942784051612904 ], [ -116.86317355483871, 53.989735767741934 ], [ -116.72088876774194, 54.118257806451609 ], [ -116.27026516774194, 54.25011767096774 ], [ -116.0883682, 54.226983374193551 ], [ -116.00698779354839, 54.17690112903226 ], [ -115.436859025806456, 54.146002774193548 ], [ -115.199606006451617, 54.161185051612904 ], [ -114.930197916129032, 54.320869509677422 ], [ -114.615538264516132, 54.319995632258063 ], [ -114.524528445161295, 54.373118593548384 ], [ -114.517172864516127, 54.435112922580643 ], [ -114.472020877419354, 54.4222026 ], [ -114.314714961290321, 54.535069329032261 ], [ -114.323724219354844, 54.675124109677419 ], [ -114.05499563870967, 55.162657058064518 ], [ -113.698699645161284, 55.252096851612905 ] ] ] } }
,
{ "type": "Feature", "properties": { "TREATY_NAM": "Treaty 7 (1877)", "TREATY_COD": "00003", "SHAPE_AREA": 13.179072855399999, "SHAPE_LEN": 19.055287543199999, "OBJECTID": 4 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -113.7561644, 52.356406438709676 ], [ -113.697477748387101, 52.345132464516126 ], [ -113.666054038709675, 52.288396012903227 ], [ -113.471305167741932, 52.235284832258067 ], [ -113.272524561290325, 52.254566051612905 ], [ -113.261885554838713, 52.308331741935483 ], [ -113.184441870967746, 52.320576548387095 ], [ -112.638636374193553, 52.307485161290323 ], [ -110.005161838709682, 50.896745277419356 ], [ -110.005152180645155, 50.833648890322578 ], [ -110.0784642967742, 50.789912793548389 ], [ -110.051272032258069, 50.740747729032257 ], [ -110.133298258064514, 50.724915277419356 ], [ -110.189756496774194, 50.636751470967745 ], [ -110.402396948387093, 50.579319122580642 ], [ -110.401910154838703, 50.424904245161287 ], [ -110.585583522580649, 50.447768954838708 ], [ -110.611200522580646, 50.287831967741937 ], [ -110.656449638709674, 50.254357690322578 ], [ -110.583414974193545, 50.211460477419358 ], [ -110.577953122580652, 50.138819367741938 ], [ -110.6907276, 50.125443154838706 ], [ -110.718851548387093, 49.993648619354836 ], [ -110.910821864516123, 49.791821787096772 ], [ -111.054446174193544, 49.492335858064514 ], [ -111.084995083870965, 49.198018961290323 ], [ -111.012267883870962, 48.997855006451616 ], [ -114.068194438709682, 48.998861103225806 ], [ -114.062473522580646, 49.046242722580644 ], [ -114.15153705806452, 49.09738255483871 ], [ -114.162074567741939, 49.15546220645161 ], [ -114.395651812903225, 49.208677393548385 ], [ -114.380220238709683, 49.249368483870967 ], [ -114.447089787096772, 49.264170354838711 ], [ -114.487419787096769, 49.347101006451609 ], [ -114.58735045806452, 49.391810670967743 ], [ -114.572429987096768, 49.557331141935485 ], [ -114.695364741935478, 49.547728483870969 ], [ -114.753399638709681, 49.609580825806454 ], [ -114.667652412903223, 49.637563896774196 ], [ -114.6770062, 49.696304845161293 ], [ -114.632516012903224, 49.733019870967745 ], [ -114.639838058064512, 49.826715470967741 ], [ -114.691955851612903, 49.896136832258065 ], [ -114.651482948387098, 49.975913606451613 ], [ -114.662975509677423, 50.065656393548387 ], [ -114.73535161290323, 50.120972470967743 ], [ -114.754574877419358, 50.296427380645163 ], [ -114.801252812903229, 50.329884425806455 ], [ -114.769571141935486, 50.35911731612903 ], [ -114.866265541935491, 50.396542916129036 ], [ -115.017059703225812, 50.583214451612903 ], [ -115.157564290322583, 50.573311541935482 ], [ -115.210735477419348, 50.528712825806451 ], [ -115.312444658064521, 50.628658251612904 ], [ -115.275649419354835, 50.648565516129032 ], [ -115.314564251612907, 50.724614432258065 ], [ -115.415307122580643, 50.711712361290324 ], [ -115.575674361290325, 50.839530380645158 ], [ -115.6422526, 50.840093690322583 ], [ -115.649806412903231, 50.873918935483871 ], [ -115.562361, 50.894218812903226 ], [ -115.650283419354835, 50.998344890322578 ], [ -115.768840496774189, 51.039338490322578 ], [ -115.754233232258059, 51.074360651612906 ], [ -115.923938341935482, 51.082964993548387 ], [ -116.009814658064514, 51.125992870967742 ], [ -116.036353761290329, 51.169723896774194 ], [ -116.007032277419356, 51.220920490322584 ], [ -116.268585922580641, 51.311871354838708 ], [ -116.31161567096774, 51.383748393548387 ], [ -116.287898683870964, 51.440825870967743 ], [ -115.94226398709678, 51.587164354838713 ], [ -115.915889896774189, 51.649337064516132 ], [ -115.692806812903228, 51.712656987096771 ], [ -115.546947509677423, 51.730248987096772 ], [ -115.390785309677426, 51.652242877419354 ], [ -115.046450154838709, 51.630715077419353 ], [ -114.962061851612901, 51.690207709677416 ], [ -114.829362761290326, 51.711905180645161 ], [ -114.789379232258071, 51.760769664516133 ], [ -114.660454632258066, 51.770890954838713 ], [ -114.601166754838715, 51.884249832258064 ], [ -114.44476190322581, 51.94730368387097 ], [ -114.369007116129026, 52.029827212903228 ], [ -114.319069703225807, 52.00356596129032 ], [ -114.170892703225803, 52.079031141935481 ], [ -113.98311896774193, 52.070888993548387 ], [ -113.8771538, 52.263160729032258 ], [ -113.803791870967743, 52.28105819354839 ], [ -113.7561644, 52.356406438709676 ] ] ] } }
,
{ "type": "Feature", "properties": { "TREATY_NAM": "Treaty 4 (1874)", "TREATY_COD": "00001", "SHAPE_AREA": 1.35782405267, "SHAPE_LEN": 5.67034733229, "OBJECTID": 5 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -110.005152225806455, 50.833648877419357 ], [ -110.005077729032251, 48.999609470967741 ], [ -111.012267883870962, 48.997855006451616 ], [ -111.084995083870965, 49.198018961290323 ], [ -111.054446174193544, 49.492335858064514 ], [ -110.910821864516123, 49.791821787096772 ], [ -110.718851548387093, 49.993648619354836 ], [ -110.6907276, 50.125443154838706 ], [ -110.577953122580652, 50.138819367741938 ], [ -110.583414974193545, 50.211460477419358 ], [ -110.656449638709674, 50.254357690322578 ], [ -110.611200522580646, 50.287831967741937 ], [ -110.585583522580649, 50.447768954838708 ], [ -110.401910154838703, 50.424904245161287 ], [ -110.402396948387093, 50.579319122580642 ], [ -110.189756496774194, 50.636751470967745 ], [ -110.133298258064514, 50.724915277419356 ], [ -110.051272032258069, 50.740747729032257 ], [ -110.0784642967742, 50.789912793548389 ], [ -110.005152225806455, 50.833648877419357 ] ] ] } }

]
}

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="http://d3js.org/d3.v2.js?2.10.3"></script>
        <style>

        path {
          fill: #aaa;
          stroke: #fff;
          stroke-width: 1.5px;
          -webkit-transition: fill .15s ease-in-out;
        }

        path:hover {
          fill: #888;
        }

        </style>
    </head>
<body>
<script>

var width = 960
var height = 500

// create chart containers
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

// projection
// see https://github.com/mbostock/d3/wiki/Geo-Projections
var projection = d3.geo.albers()
    .origin([-115, 54.5])
    .parallels([48,61])
    .scale(2500)
    .translate([width/2, height/2])

var path = d3.geo.path()
    .projection(projection);

// https://github.com/mbostock/d3/wiki/Zoom-Behavior
// see http://bl.ocks.org/2374239
var zoom = d3.behavior.zoom()
    .translate(projection.translate())
    .scale(projection.scale())
    // .scaleExtent([width, 8 * width])
    .on("zoom", zoommove);

var states = svg.append("g")
    .attr("id", "states")
    .call(zoom)

// treaty polygons
d3.json("ab-treaties.json", function(json) {
  states.selectAll("path")
      .data(json.features)
    .enter().append("path")
      .attr("d", path)
})

function zoommove() {
  console.log('zoommove called')
  projection.translate(d3.event.translate).scale(d3.event.scale);
  states.selectAll("path").attr("d", path);
}

</script>
</body>
</html>