makoto/index.html

## index.html
<html>
  <head>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <style type="text/css" media="screen">
      .svg rect {
        stroke: white;
        fill: steelblue;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">

       var width = 500
         ,height = 800
         ,data = [[1, 1, 7, 3, 1, 1, 1, 2, 4],
          [1, 2],
          [1, 7],
          [2, 2, 7, 2, 4, 6, 7, 3, 7, 8, 9, 2, 5, 2, 3, 3, 7],
          [3, 2],
          [3, 7, 7],
          [4, 7, 7],
          [6, 7, 7],
          [6, 7, 7, 3, 2],
          [7, 1, 2],
          [7, 1, 10, 6, 5, 4, 2],
          [7,
           2,
           10,
           9,
           2,
           6,
           8,
           8,
           3,
           2,
           5,
           7,
           1,
           1,
           7,
           1,
           7,
           1,
           3,
           4,
           9,
           10,
           7,
           6,
           5,
           4,
           2,
           1,
           7,
           7],
          [7, 3, 8, 9, 7],
          [7, 7, 7, 8, 9, 2, 7, 7],
          [7, 7, 8],
          [7, 7, 8],
          [7, 7, 8, 2],
          [7, 7, 9, 7],
          [7, 8, 2, 5, 6, 7, 9, 10, 1, 3, 4],
          [7, 8, 7],
          [7, 9, 7, 7, 7, 7],
          [7, 10, 8, 6, 7, 10, 4, 1, 8, 9, 7, 5, 2, 7, 3, 2, 9, 3],
          [8, 7, 7],
          [8, 7, 7, 7],
          [9, 4, 2],
          [9, 5, 2, 6, 4, 9],
          [9, 10, 4, 1, 8, 9, 7, 3, 6, 5, 10, 2, 7, 9]]

       var data = data.filter(function(d){return d[0] == 7})

       var svg = d3.select("body").append("svg")
           .attr("class", "svg")
           .attr("width", width)
           .attr("height", height)
           .append("g")
             .attr("transform", "translate(30,20)");

      var color = d3.scale.category10().domain([1,12])
      var x = d3.scale.linear()
          .domain([0, 12])
          .range([0, width - 10]);

      var y = d3.scale.linear()
        .domain([0, 30])
        .range([0, height - 10]);

      var line = d3.svg.line()
          .x(function(d){return x(d)})
          .y(function(d, i){return y(i)})
          .interpolate("linear")


      var xAxis = d3.svg.axis()
        .scale(x)
        .orient("top")
        .tickSize(1)

      var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .tickSize(1)

      svg.append("g")
        .attr("class", "x axis");

      d3.select(".x.axis")
        .call(xAxis)

      svg.append("g")
        .attr("class", "y axis");

      d3.select(".y.axis")
        .call(yAxis);


      var group = svg.selectAll(".group")
          .data(data);

      var groupEnter = group.enter().append('g')
        .attr('class', 'group')

      var groupUpdate = group.transition().duration(1000)

      var groupExit = d3.transition(group.exit())
        .remove()

      groupEnter.append("path")
        .attr("d", function(d){console.log('path',d);return line(d)})
        .style('fill', 'none')
        .style('stroke', function(d){ return color(d[0])})
    </script>
  </body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<style type="text/css" media="screen">
	.svg rect {
	stroke: white;
	fill: steelblue;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">

	var width = 500
	,height = 800
	,data = [[1, 1, 7, 3, 1, 1, 1, 2, 4],
	[1, 2],
	[1, 7],
	[2, 2, 7, 2, 4, 6, 7, 3, 7, 8, 9, 2, 5, 2, 3, 3, 7],
	[3, 2],
	[3, 7, 7],
	[4, 7, 7],
	[6, 7, 7],
	[6, 7, 7, 3, 2],
	[7, 1, 2],
	[7, 1, 10, 6, 5, 4, 2],
	[7,
	2,
	10,
	9,
	2,
	6,
	8,
	8,
	3,
	2,
	5,
	7,
	1,
	1,
	7,
	1,
	7,
	1,
	3,
	4,
	9,
	10,
	7,
	6,
	5,
	4,
	2,
	1,
	7,
	7],
	[7, 3, 8, 9, 7],
	[7, 7, 7, 8, 9, 2, 7, 7],
	[7, 7, 8],
	[7, 7, 8],
	[7, 7, 8, 2],
	[7, 7, 9, 7],
	[7, 8, 2, 5, 6, 7, 9, 10, 1, 3, 4],
	[7, 8, 7],
	[7, 9, 7, 7, 7, 7],
	[7, 10, 8, 6, 7, 10, 4, 1, 8, 9, 7, 5, 2, 7, 3, 2, 9, 3],
	[8, 7, 7],
	[8, 7, 7, 7],
	[9, 4, 2],
	[9, 5, 2, 6, 4, 9],
	[9, 10, 4, 1, 8, 9, 7, 3, 6, 5, 10, 2, 7, 9]]

	var data = data.filter(function(d){return d[0] == 7})

	var svg = d3.select("body").append("svg")
	.attr("class", "svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(30,20)");

	var color = d3.scale.category10().domain([1,12])
	var x = d3.scale.linear()
	.domain([0, 12])
	.range([0, width - 10]);

	var y = d3.scale.linear()
	.domain([0, 30])
	.range([0, height - 10]);

	var line = d3.svg.line()
	.x(function(d){return x(d)})
	.y(function(d, i){return y(i)})
	.interpolate("linear")


	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("top")
	.tickSize(1)

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.tickSize(1)

	svg.append("g")
	.attr("class", "x axis");

	d3.select(".x.axis")
	.call(xAxis)

	svg.append("g")
	.attr("class", "y axis");

	d3.select(".y.axis")
	.call(yAxis);


	var group = svg.selectAll(".group")
	.data(data);

	var groupEnter = group.enter().append('g')
	.attr('class', 'group')

	var groupUpdate = group.transition().duration(1000)

	var groupExit = d3.transition(group.exit())
	.remove()

	groupEnter.append("path")
	.attr("d", function(d){console.log('path',d);return line(d)})
	.style('fill', 'none')
	.style('stroke', function(d){ return color(d[0])})
	</script>
	</body>
	</html>