Control Patch

The idea is to have an SVG rectangle constructed based on a pair of D3 scales. CLick and drag your mouse (etc.) over it it reports values derived from the scales.

<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;
	}

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;
	drawData();
});

drawData();

function drawData(){
	var chart = d3.select('#bar-chart').selectAll('rect')
		.data(barData);

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

chart.enter()
		.append('rect')
			.attr('x', function(d,i){
				return xScale(i);	
			})
			.attr('y', function(d){
				return yScale(Math.min(0, d));
			})
			.attr('width', function(){
				return xScale(1);
			})
			.attr('height', 0)
			.attr('class', 'bar')
			.attr('fill',function(d){
				if(d<0){
					return '#0a0';
				}
				return '#a00';
			});

chart.transition()
		.duration(50)
		.attr('height', function(d){
			return Math.abs(yScale(d)-yScale(0));
		})
		.attr('y', function(d){
			return yScale(Math.min(0, d));
		})
		.attr('fill',function(d){
			if(d<0){
				return '#0f0';
			}
			return '#f00';
		});

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');

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;
			});

}

</script>
</html>

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

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