responsive layout with D3.js

responsive layout with D3.js / D3.jsでレスポンシブ・レイアウトを実現する

別ウインドウで開、挙動を確認ください。 Please check how it works to open new window with raw files.

解説記事 http://visualizing.jp/responsive-d3/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
	margin: 0;
	background-color: #EEE;
}

#chartArea {
	background-color: #FFF;
	border: 1px solid #AAA;
	width: 100%;
}
</style>
<body>
<div id="chartArea"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

var margin = {top: 0, right: 0, bottom: 0, left: 0},
    cWidth = width - margin.left - margin.right,
    cHeight = height - margin.top - margin.bottom;

var container = d3.select("#chartArea").append("svg")
    .attr("width", width)
    .attr("height", width * aspect)
    .attr("viewBox", "0 0 "+ width +" " + height +"")
    .attr("preserveAspectRatio", "xMidYMid")
    .attr("id", "chart")
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var interval = 2000;

var circles = container.selectAll(".en").data( [0,1,2,3,4] );
	circles.enter()
		.append("circle")
		.attr("class", "en");

/* -----------------------------------
	main look
----------------------------------- */
var mainLoop = function() {

circles.transition()
		.ease("linear")
		.duration(1000).delay( function(d,i){return i*50}).ease("circle")
		.attr("r", function(d) { return Math.floor( Math.random()*200+20) })
		.attr("cx", function(d) { return Math.floor( Math.random()*width) })
		.attr("cy", function(d) { return Math.floor( Math.random()*height) })
		.attr("opacity", 1.0)
		.attr("stroke", "#000")
		.attr("stroke-width", "10px")
		.style("fill", "none");

return function() {
        d3.timer( mainLoop(), interval );
        return true;
    }
};

/* -----------------------------------
	responsive with window size
----------------------------------- */
var chart = $("#chart"),
    container = chart.parent();

$(window).on("resize", function() {

var targetWidth = container.width();
    var targetHeight = Math.round(targetWidth / aspect);
    chart.attr("width", targetWidth);
    chart.attr("height", targetHeight);
    chart.attr("viewBox", "0 0 "+ targetWidth + " " + targetHeight)

}).trigger("resize");

d3.timer( mainLoop(), interval );

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

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

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

https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js