yurahuna/d3tutorial.html Secret

## d3tutorial.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>d3 test</title>
    <script type="text/javascript" src="d3/d3.js"></script>
    <style>
      .axis path,
      .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
      }
      .axis text {
        font-family: Arial;
        font-size: 11px;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var w = 500;
      var h = 300;
      var padding = 30;

      var svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

      // 動的でランダムなデータセット
      var dataset = [];
      var numDataPoints = 50;
      var xRange = Math.random() * 1000;
      var yRange = Math.random() * 1000;
      for (var i = 0; i < numDataPoints; i++) {
        var newNumber1 = Math.round(Math.random() * xRange);
        var newNumber2 = Math.round(Math.random() * yRange);
        dataset.push([newNumber1, newNumber2]);
      }

      // var scale = d3.scale.linear() <--- 古い
      // https://github.com/d3/d3-scale/blob/master/README.md#scaleLinear
      var xScale = d3.scaleLinear()
                      .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                      .range([padding, w - padding * 2]);

      var yScale = d3.scaleLinear()
                      .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                      .range([h - padding, padding]);

      var rScale = d3.scaleLinear()
                      .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                      .range([2, 5]);

      svg.selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
          return xScale(d[0]);
        })
        .attr("cy", function(d) {
          return yScale(d[1]);
        })
        .attr("r", function(d) {
          return rScale(d[1]);
        });

      // var xAxis = d3.svg.axis()
      //           .scale(xScale)
      //           .orient("bottom");
      // https://github.com/d3/d3-axis
      // Bottom: 数字を軸の下に表示する、という意味
      var xAxis = d3.axisBottom(xScale)
                    .ticks(5);  // 目盛り数の目安(勝手に調整してくれる)

      svg.append("g")
          .attr("class", "axis")
          // 軸自体の位置は↓で動かす
          .attr("transform", "translate(0," + (h - padding) + ")")
          .call(xAxis);

      var yAxis = d3.axisLeft(yScale)
                    .ticks(5);

      svg.append("g")
          .attr("class", "axis")
          .attr("transform", "translate(" + padding + ",0)")
          .call(yAxis);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>d3 test</title>
	<script type="text/javascript" src="d3/d3.js"></script>
	<style>
	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}
	.axis text {
	font-family: Arial;
	font-size: 11px;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">
	var w = 500;
	var h = 300;
	var padding = 30;

	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	// 動的でランダムなデータセット
	var dataset = [];
	var numDataPoints = 50;
	var xRange = Math.random() * 1000;
	var yRange = Math.random() * 1000;
	for (var i = 0; i < numDataPoints; i++) {
	var newNumber1 = Math.round(Math.random() * xRange);
	var newNumber2 = Math.round(Math.random() * yRange);
	dataset.push([newNumber1, newNumber2]);
	}

	// var scale = d3.scale.linear() <--- 古い
	// https://github.com/d3/d3-scale/blob/master/README.md#scaleLinear
	var xScale = d3.scaleLinear()
	.domain([0, d3.max(dataset, function(d) { return d[0]; })])
	.range([padding, w - padding * 2]);

	var yScale = d3.scaleLinear()
	.domain([0, d3.max(dataset, function(d) { return d[1]; })])
	.range([h - padding, padding]);

	var rScale = d3.scaleLinear()
	.domain([0, d3.max(dataset, function(d) { return d[1]; })])
	.range([2, 5]);

	svg.selectAll("circle")
	.data(dataset)
	.enter()
	.append("circle")
	.attr("cx", function(d) {
	return xScale(d[0]);
	})
	.attr("cy", function(d) {
	return yScale(d[1]);
	})
	.attr("r", function(d) {
	return rScale(d[1]);
	});

	// var xAxis = d3.svg.axis()
	// .scale(xScale)
	// .orient("bottom");
	// https://github.com/d3/d3-axis
	// Bottom: 数字を軸の下に表示する、という意味
	var xAxis = d3.axisBottom(xScale)
	.ticks(5); // 目盛り数の目安(勝手に調整してくれる)

	svg.append("g")
	.attr("class", "axis")
	// 軸自体の位置は↓で動かす
	.attr("transform", "translate(0," + (h - padding) + ")")
	.call(xAxis);

	var yAxis = d3.axisLeft(yScale)
	.ticks(5);

	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(" + padding + ",0)")
	.call(yAxis);
	</script>
	</body>
	</html>