n1n9-jp/README.md

## README.md

      
    Raw
  

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

別ウインドウで開、挙動を確認ください。
Please check how it works to open new window with raw files.
解説記事
http://visualizing.jp/responsive-d3/

  
## index.html
<!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="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
/* -----------------------------------
	initialize
----------------------------------- */
var width = 960, height = 400, aspect = width / height;

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>

## thumbnail.png
_
	<!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="http://d3js.org/d3.v3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

	<script>
	/* -----------------------------------
	initialize
	----------------------------------- */
	var width = 960, height = 400, aspect = width / height;

	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>