Fil/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    A demonstration of D3 3.3’s new zoom transitions. For best viewing experience, please play “Doin’ It Right (feat. Panda Bear)” off the latest Daft Punk album while watching this animation.
forked from mbostock's block: Map Zooming d3v4 [UNLISTED]

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 500;

var sf = [-122.417, 37.775],
    ny = [-74.0064, 40.7142];

var scale,
    translate,
    visibleArea, // minimum area threshold for points inside viewport
    invisibleArea; // minimum area threshold for points outside viewport

var simplify = d3.geoTransform({
  point: function(x, y, z) {
    if (z < visibleArea) return;
    x = x * scale + translate[0];
    y = y * scale + translate[1];
    if (x >= -10 && x <= width + 10 && y >= -10 && y <= height + 10 || z >= invisibleArea) this.stream.point(x, y);
  }
});

var zoom = d3.zoom()
    .on("zoom", zoomed);

// This projection is baked into the TopoJSON file,
// but is used here to compute the desired zoom translate.
var projection = d3.geoMercator()
    .translate([0, 0])
    .scale(4000);

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");

var path = d3.geoPath()
    .projection(simplify)
    .context(context);

d3.json("us-states.json", function(error, json) {
  if (error) throw error;

  canvas
      .datum(topojson.mesh(topojson.presimplify(json)))
      .call(zoom.transform, zoomTo(sf, 4));
  loop();
  d3.interval(loop, 1820);
});


  function loop() {
    canvas.transition()
      .duration(900)
        .call(zoom.transform, zoomTo(ny, 6))
      .transition()
      .duration(900)
        .call(zoom.transform, zoomTo(sf, 4))
  }

function zoomTo(location, scale) {
  var point = projection(location);
  return d3.zoomIdentity
    .translate(width / 2 - point[0] * scale, height / 2 - point[1] * scale)
    .scale(scale);
}

function zoomed(d) {
  var z = d3.event.transform;
  translate = [z.x, z.y];
  scale = z.k;
  visibleArea = 1 / scale / scale;
  invisibleArea = 200 * visibleArea;
  context.clearRect(0, 0, width, height);
  context.beginPath();
  path(d);
  context.stroke();
}

</script>

## us-states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-states.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.
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<script src="//d3js.org/d3.v4.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script>

	var width = 960,
	height = 500;

	var sf = [-122.417, 37.775],
	ny = [-74.0064, 40.7142];

	var scale,
	translate,
	visibleArea, // minimum area threshold for points inside viewport
	invisibleArea; // minimum area threshold for points outside viewport

	var simplify = d3.geoTransform({
	point: function(x, y, z) {
	if (z < visibleArea) return;
	x = x * scale + translate[0];
	y = y * scale + translate[1];
	if (x >= -10 && x <= width + 10 && y >= -10 && y <= height + 10 \|\| z >= invisibleArea) this.stream.point(x, y);
	}
	});

	var zoom = d3.zoom()
	.on("zoom", zoomed);

	// This projection is baked into the TopoJSON file,
	// but is used here to compute the desired zoom translate.
	var projection = d3.geoMercator()
	.translate([0, 0])
	.scale(4000);

	var canvas = d3.select("body").append("canvas")
	.attr("width", width)
	.attr("height", height);

	var context = canvas.node().getContext("2d");

	var path = d3.geoPath()
	.projection(simplify)
	.context(context);

	d3.json("us-states.json", function(error, json) {
	if (error) throw error;

	canvas
	.datum(topojson.mesh(topojson.presimplify(json)))
	.call(zoom.transform, zoomTo(sf, 4));
	loop();
	d3.interval(loop, 1820);
	});


	function loop() {
	canvas.transition()
	.duration(900)
	.call(zoom.transform, zoomTo(ny, 6))
	.transition()
	.duration(900)
	.call(zoom.transform, zoomTo(sf, 4))
	}

	function zoomTo(location, scale) {
	var point = projection(location);
	return d3.zoomIdentity
	.translate(width / 2 - point[0] * scale, height / 2 - point[1] * scale)
	.scale(scale);
	}

	function zoomed(d) {
	var z = d3.event.transform;
	translate = [z.x, z.y];
	scale = z.k;
	visibleArea = 1 / scale / scale;
	invisibleArea = 200 * visibleArea;
	context.clearRect(0, 0, width, height);
	context.beginPath();
	path(d);
	context.stroke();
	}

	</script>