Control patch line

trying a line to emphasise that the user can edit the values in a kind of pseudo-continuos way

<html>
<head>
	<title>Control patch</title>
</head>
<style type="text/css">
	body{
		font-family: sans-serif;	
	}
	.ui-patch{
		fill-opacity:0;
		stroke-width:1px;
		stroke:none;
		cursor: url(editcursor.png);
	}
	.bar{
		stroke:#fff;
		stroke-width:2px;
	}

#line{
		fill:none;
		stroke:#666;
	}

#pale-line{
		fill:none;
		stroke:#ccc;	
	}

text{
		stroke:#333;
		font-family: sans-serif;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.container{
		position: relative;
		width:500px;
	}
	.prompt{
		background-image: url(editicon.png);
		width: 64px;
		height: 44px;
		position: absolute;
		right:0;
		z-index: -100;
	}

</style>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="patch.js"></script>
<body>
	
<div class="container">
	<div class="prompt"></div>
	<svg id='ui' width='600' height='600'></svg>
</div>
</body>

var yScale = d3.scale.linear()
				.domain([-100, 100])
				.range([0, 500])
				.clamp(true);

var barData = [80,75,70,60,40,10,-10,-40,-60,-70,-75,-80,-82,-80,-75,-60,-40,-10,10,40];

d3.select('#ui').append('g').attr('id','bar-chart');

makePatch(xScale, yScale, '#ui', function(index, percent){
	barData[Math.floor(index)] = percent;
	transition();
});

var line, paleLine, chart, labels;

drawData();

function transition(){
	chartline1.transition()
		.duration(50)
		.attr("d", line);

chartline2.transition()
		.duration(50)
		.attr("d", paleLine);

labels = d3.select('#bar-chart').selectAll('text')
		.data(barData);

labels.transition()
		.duration(50)
			.text(function(d){
				return(Math.round(-d));
			})
			.attr('y', function(d,i){
				var adj = (d<0) ? 0:10;
				return yScale(d) + adj;
			});
}

function drawData(){

line = d3.svg.line()
		.x(function(d,i) { return xScale(i + 0.5); })
		.y(function(d) { return yScale(d); });

paleLine = d3.svg.line()
		.x(function(d,i) { return xScale(i + 0.5); })
		.y(function(d) { return yScale(d); })
		.interpolate('basis');

chartline2 = d3.select('#bar-chart').append('path').attr("id", "pale-line")
		.datum(barData);

chartline1 = d3.select('#bar-chart').append('path').attr("id", "line")
		.datum(barData);

labels = d3.select('#bar-chart').selectAll('text')
		.data(barData);

labels.enter()
		.append('text')
			.text(function(d){
				return(-d)
			})
			.attr('x', function(d,i){
				return xScale(i) + xScale(0.5);
			})
			.attr('y', function(d,i){
				var adj = (d<0) ? 0:10;
				return yScale(d) + adj;
			})
			.attr('text-anchor','middle');
	transition();
}

</script>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js