Responsive TopoJSON Sizing with d3.js

States will adjust in size relative to the width of the container div, which allows SVG elements to be appropriately sized regardless of device size or screen resolution, making it a good way to integrate D3 and Bootstrap.

Click "Open in a new window", change the size of your browser window, and the states will scale with it. *Will not work in the standard bl.ocks.org view

Please let me know if there is a better/native way to do this!

forked from jczaplew's block: Responsive TopoJSON Sizing with d3.js

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/topojson.v0.min.js"></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>

var projection = d3.geo.albersUsa()
		.scale(1100);

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

var svg = d3.select("#container")
		.append("svg")
		.attr("width", "100%")
    		.append("g");
	
	d3.json("us-states.json", function(error, us) {
	  svg.selectAll(".states")
		.data(topojson.object(us, us.objects.states).geometries)
	 .enter().append("path")
		.attr("class", "states")
		.attr("d", path);
	});

function sizeChange() {
	    d3.select("g").attr("transform", "scale(" + $("#container").width()/900 + ")");
	    $("svg").height($("#container").width()*0.618);
	}

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

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v0.min.js to a secure url

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v0.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js