soedomoto/README.md

## README.md

      
    Raw
  

              README.md
            
          
    D3 - Animation and Transition


## index.html
<html>
 <head>
  <title>D3 - Animation and Transition</title>
  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
   <style>
     line {
       stroke: rgb(238, 238, 238);
     }
     path {
       stroke: rgb(0, 0, 255);
    		stroke-width: 2px;
    		fill: none;
     }
   </style>
 </head>
 <body>
  <script type="text/javascript">
    var w = 944;
		var h = 400;
		var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                   11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

    var yScale = h / d3.max(dataset);
    var xdiff = w / dataset.length;
    var i = 0;
    var d = "m ";
    dataset.forEach(function(y) {
      d += (i*xdiff) + "," + (h-y*yScale) + " L ";
      i++;
    })

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

    for(x=0; x<dataset.length; x++) {
      svg.append("line")
        .attr("x1", x*xdiff)
      	.attr("x2", x*xdiff)
      	.attr("y1", 0)
      	.attr("y2", h)
    }

    var yInterval = 40;
    for(y=0; y<h/yInterval; y++) {
      svg.append("line")
        .attr("x1", 0)
      	.attr("x2", w)
      	.attr("y1", y*yInterval)
      	.attr("y2", y*yInterval)
    }

    svg.append("path")
      .attr("d", function(s) {
      	return d;
    	})
  </script>
 </body>
</html>
	<html>
	<head>
	<title>D3 - Animation and Transition</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<style>
	line {
	stroke: rgb(238, 238, 238);
	}
	path {
	stroke: rgb(0, 0, 255);
	stroke-width: 2px;
	fill: none;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">
	var w = 944;
	var h = 400;
	var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
	11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

	var yScale = h / d3.max(dataset);
	var xdiff = w / dataset.length;
	var i = 0;
	var d = "m ";
	dataset.forEach(function(y) {
	d += (ixdiff) + "," + (h-yyScale) + " L ";
	i++;
	})

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

	for(x=0; x<dataset.length; x++) {
	svg.append("line")
	.attr("x1", x*xdiff)
	.attr("x2", x*xdiff)
	.attr("y1", 0)
	.attr("y2", h)
	}

	var yInterval = 40;
	for(y=0; y<h/yInterval; y++) {
	svg.append("line")
	.attr("x1", 0)
	.attr("x2", w)
	.attr("y1", y*yInterval)
	.attr("y2", y*yInterval)
	}

	svg.append("path")
	.attr("d", function(s) {
	return d;
	})
	</script>
	</body>
	</html>