klaaspieter · July 18, 2012 23:39
diff --git a/index.html b/index.html
 <!DOCTYPE HTML>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Interactive Line Graph using d3.js</title>
  <style type="text/css">
    .axis path, .axis line {
      fill: none;
      stroke: gray;
    }

    .line {
      fill: none;
      stroke: gray;
      stroke-width: 5px;
    }
  </style>
 </head>
 <body>
  <script src="http://mbostock.github.com/d3/d3.js?2.5.0" type="text/javascript"></script>
  <script type="text/javascript">

    // Set our basic variables
    var width = 960;
    var height = 500;
    var padding = 50;

    // Generate some fixed data
    var data = [
      { x: 0, y: 0 },
      { x: 1, y: 2 },
      { x: 3, y: 5 },
      { x: 9, y: 3 },
      { x: 13, y: 1 }
    ];

    // Create the x scale
    var minX = 0;
    var maxX = 13;
    var x = d3.scale.linear().domain([minX, maxX]).range([padding, width - padding]);

    // Create the y scale
    var minY = 0;
    var maxY = 5;
    var y = d3.scale.linear().domain([minY, maxY]).range([height - padding, padding]);

    // Create our svg area
    var svg = d3.select('body')
      .append('svg')
      .datum(data)
      .attr('width', width)
      .attr('height', height);

    // Create the line representing our data
    var line = d3.svg.line()
      .x(function(d) { return x(d.x) })
      .y(function(d) { return y(d.y) });

    // Append our line to the document
    svg.append('path')
      .attr('class', 'line')
      .attr('d', line)

  </script>
 </body>
 </html>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Interactive Line Graph using d3.js</title>
	<style type="text/css">
	.axis path, .axis line {
	fill: none;
	stroke: gray;
	}

	.line {
	fill: none;
	stroke: gray;
	stroke-width: 5px;
	}
	</style>
	</head>
	<body>
	<script src="http://mbostock.github.com/d3/d3.js?2.5.0" type="text/javascript"></script>
	<script type="text/javascript">

	// Set our basic variables
	var width = 960;
	var height = 500;
	var padding = 50;

	// Generate some fixed data
	var data = [
	{ x: 0, y: 0 },
	{ x: 1, y: 2 },
	{ x: 3, y: 5 },
	{ x: 9, y: 3 },
	{ x: 13, y: 1 }
	];

	// Create the x scale
	var minX = 0;
	var maxX = 13;
	var x = d3.scale.linear().domain([minX, maxX]).range([padding, width - padding]);

	// Create the y scale
	var minY = 0;
	var maxY = 5;
	var y = d3.scale.linear().domain([minY, maxY]).range([height - padding, padding]);

	// Create our svg area
	var svg = d3.select('body')
	.append('svg')
	.datum(data)
	.attr('width', width)
	.attr('height', height);

	// Create the line representing our data
	var line = d3.svg.line()
	.x(function(d) { return x(d.x) })
	.y(function(d) { return y(d.y) });

	// Append our line to the document
	svg.append('path')
	.attr('class', 'line')
	.attr('d', line)

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