Draw a curve

HTML

<section 
	class="curveChart"	    
    style="width:800px; height: 250px; background-color: lightgray; padding: 20px">
        Curve draws here
</section>

JavaScript

function curveChart(data) {


	for (i in data) {
		data[i].y = 5.5*data[i].y/100;	// normalize
		data[i].id = i;
	}

	var margin	= {top: 10, right: 190, bottom: 275, left: 35},
	    width	= 915 - margin.left - margin.right,
	    height	= 500 - margin.top - margin.bottom;

	var x = d3.scale.linear() //.time.scale()
	    .domain([1, 9])		// 9 stages
	    .range([0, width]);

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

	var xAxis = d3.svg.axis()
	    .scale(x)
	    .orient("bottom");

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

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

	var svg = d3.select(".curveChart").append("svg")
	    .datum(data)
	    .attr("width", width + margin.left + margin.right)
	    .attr("height", height + margin.top + margin.bottom)
	  .append("g")
	    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.append("path")
	    .attr("class", "line")
	    .attr("d", line);

	var n = 1;
				svg.selectAll("circle")
				    .data(data.filter(function(d) { return d.point; }))    
				    .enter()
				    .append("circle")
				    .attr("class", "dot")
				    .attr("cx", line.x())
				    .attr("cy", line.y())
				    .attr("r", 2)
					.attr("bubbleid", function(d){return d.id; })
				    .transition(1000)
				    .duration(800)
				    .attr("r", 10);
					
	svg.selectAll("circle").on("click", function(){
		
		d3.selectAll(".active").classed("active", false);
		d3.select(this).classed("active", true);

		var id = $(this).attr('bubbleid');
		console.log("clicked on "+$(this).attr('bubbleid'));
		
		$(".bubble").removeClass("show");
		$("#bubble"+id).addClass("show");
		
		d3.select(this)
 	    .transition()
	    .duration(400)
			.attr('r', 25)
		    .transition()
		    .duration(400)
				.attr('r', 10)
				;
	});
}


var data = [
  // stage 1-9, intensity %, draw disk
  {x:1, y:  0,...