elidupuis/README.md

## README.md

      
        

                Raw

        
        
          
            
          
          
            
              README.md
            
          
        
      
      
    Alberta Aboriginal Treaty Lands.

  

  

## ab-treaties.json

      
        
            
              
              
            

                Raw

        
        
          
            
          
          
            
              ab-treaties.json
            
          
        
      
    
    

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

  

## 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>
	<!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>