krish85 · August 13, 2015 13:31
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Line Chart</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <style type="text/css">

 body {
  font: 10px sans-serif;
 }

 .rule line {
  stroke: #eee;
  shape-rendering: crispEdges;
 }

 .rule line.axis {
  stroke: #000;
 }

 path {
  fill: none;
  stroke-width: 1.5px;
 }

 circle {
  fill: #fff;
  stroke: #000;
 }

    </style>
  </head>
  <body>
    <script type="text/javascript">

 var data = d3.range(10).map(function(i) {
  return {x: i / 9, y: (Math.sin(i * 2) + 1) / 2};
 });

 var w = 960,
    h = 500,
    p = 40,
    x = d3.scale.linear().domain([0, 1]).range([p, w - p]),
    y = d3.scale.linear().domain([0, 1]).range([h - p, p]);

 var line = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

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

 var rules = vis.selectAll("rule")
    .data(x.ticks(10))
  .enter().append("g")
    .attr("class", "rule");

 rules.append("line")
    .attr("x1", x)
    .attr("x2", x)
    .attr("y1", p)
    .attr("y2", h - p - 1);

 rules.append("line")
    .attr("class", function(d) { return d ? null : "axis"; })
    .attr("y1", y)
    .attr("y2", y)
    .attr("x1", p)
    .attr("x2", w - p + 1);

 rules.append("text")
    .attr("x", x)
    .attr("y", h - p + 3)
    .attr("dy", ".71em")
    .attr("text-anchor", "middle")
    .text(x.tickFormat(10));

 rules.append("text")
    .attr("y", y)
    .attr("x", p - 3)
    .attr("dy", ".35em")
    .attr("text-anchor", "end")
    .text(y.tickFormat(10));

 vis.selectAll("path")
    .data([0., 0.4, 0.5, 0.7, 0.8, 1])
  .enter().append("path")
    .attr("d", function(d) { return line.tension(d)(data); })
    .style("stroke", d3.interpolateRgb("blue", "red"));

 vis.selectAll("circle")
    .data(data)
  .enter().append("circle")
    .attr("cx", function(d) { return x(d.x); })
    .attr("cy", function(d) { return y(d.y); })
    .attr("r", 4.5);

    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Line Chart</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<style type="text/css">

	body {
	font: 10px sans-serif;
	}

	.rule line {
	stroke: #eee;
	shape-rendering: crispEdges;
	}

	.rule line.axis {
	stroke: #000;
	}

	path {
	fill: none;
	stroke-width: 1.5px;
	}

	circle {
	fill: #fff;
	stroke: #000;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript">

	var data = d3.range(10).map(function(i) {
	return {x: i / 9, y: (Math.sin(i * 2) + 1) / 2};
	});

	var w = 960,
	h = 500,
	p = 40,
	x = d3.scale.linear().domain([0, 1]).range([p, w - p]),
	y = d3.scale.linear().domain([0, 1]).range([h - p, p]);

	var line = d3.svg.line()
	.interpolate("cardinal")
	.x(function(d) { return x(d.x); })
	.y(function(d) { return y(d.y); });

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

	var rules = vis.selectAll("rule")
	.data(x.ticks(10))
	.enter().append("g")
	.attr("class", "rule");

	rules.append("line")
	.attr("x1", x)
	.attr("x2", x)
	.attr("y1", p)
	.attr("y2", h - p - 1);

	rules.append("line")
	.attr("class", function(d) { return d ? null : "axis"; })
	.attr("y1", y)
	.attr("y2", y)
	.attr("x1", p)
	.attr("x2", w - p + 1);

	rules.append("text")
	.attr("x", x)
	.attr("y", h - p + 3)
	.attr("dy", ".71em")
	.attr("text-anchor", "middle")
	.text(x.tickFormat(10));

	rules.append("text")
	.attr("y", y)
	.attr("x", p - 3)
	.attr("dy", ".35em")
	.attr("text-anchor", "end")
	.text(y.tickFormat(10));

	vis.selectAll("path")
	.data([0., 0.4, 0.5, 0.7, 0.8, 1])
	.enter().append("path")
	.attr("d", function(d) { return line.tension(d)(data); })
	.style("stroke", d3.interpolateRgb("blue", "red"));

	vis.selectAll("circle")
	.data(data)
	.enter().append("circle")
	.attr("cx", function(d) { return x(d.x); })
	.attr("cy", function(d) { return y(d.y); })
	.attr("r", 4.5);

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