Map zoom + responsive frame

Click States to test me !>Click States to test me !

Alternative of: Map zoom + static frame, with more details.

Exploration around automatic centering, zooming, and responsive framing. This gist have RESPONSIVE frames.

Here, only the width is provided, the minimal height is calculated from the svg hook's width and the projected shape ratio. This tied frame is the relevant approach when waste of the webpage's space is not acceptable.

Inputs are the topojson file, a target feature (shape), and the svg canevas width=300px. Height, if missing (as in this demo), is recalculated elegantly. There is always a 5% margin on each side of the shape.

Create a projection and d3.geo.path
Profile the current projection : bounds, relevant dimensions, and shape's width/height ratio
Compute scale and translation. Must fit within the width AND height. Without height, it caculate it from the canevas width and shape's ratio.
Recreate the projection

The innovative part compared to Mike Bostock's Centering a map given a GeoJSON object is the responsive frame.

It is also projection proof. Which is not the case of the more common frame adjustment using the lat / lon dimensions' ratio, which works only with the common but hightly deforming rectangular projections.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg { 
	background: #C6ECFF;
	border: 2px solid #AAA; }
	
.land { fill: #E0E0E0; }

.coast {
	fill: none;
	stroke: #0978AB; 
	stroke-width: 1.5px; }
.mesh{ /* borders*/
	fill: none;
	stroke: #646464;
	stroke-width: 1.5px;
	stroke-dasharray: 8,4; }
.focus {
  fill: #FEFEE9;
  stroke: #646464;
  stroke-width: 2px; }

</style>
<body>
<script src="./d3.v3.min.js"></script>
<script src="./topojson.v1.min.js"></script>
<script>
	
	
var width = 500, centered, selected=51;
var svg = d3.select("body").append("svg")
		.attr("width", width);
	
var projection = d3.geo.mercator()
      .scale(1)
      .translate([0, 0]);

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

d3.json("./us.json", function(error, us) {
  var states = topojson.feature(us, us.objects.states),
  	state = states.features.filter(function(d) { return d.id === selected; })[0];
	
	zoomon(state, width);

//landmass
	svg.selectAll("path")
		.data(states.features)
	.enter().append("path")
		.attr("class", function(d) { 
			if(d.id === selected ){ return "land focus"} 
			else { return "land";}
		})
		.attr("d", path)
		.on("click", function(d,i){ clicked(d,width)});

//inland borders lines
  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "mesh")
      .attr("d", path);
  //coast lines
  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a == b; }))
      .attr("class", "coast")
      .attr("d", path);
});

function zoomon(d, width){
	t = getTransform(d);
	projection
		.scale(t.scale)
		.translate(t.translate);
	svg.attr("height", t.height);
}

function clicked(d, width) {
	t = getTransform(d);
  if (!d || centered === d) { 	// reset center to init
	  projection
	  	.translate([width / 2, t.height / 2])
		.center(projection.invert(path.centroid(d)))
		.scale(400);
	  centered = null;
	  t.height=width;
  } else {  					// center on clicked shape
	  projection.translate(t.translate).scale(t.scale);
	  centered = d;
 }

// Frame transition
	svg.transition("Frame")
		.duration(1000)
		.attr("height", t.height);
	// Transition to the new projection.
	svg.selectAll("path").transition("Redraw")
		.duration(1000)
		.attr("d", path);
	// Focus
	svg.selectAll("path")
      .classed("focus", centered && function(d) { return d === centered; });
}