D3 Examples - Control Patch

xxxxxxxxxx
 
<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>
​
<script type="text/javascript">
var xScale = d3.scale.linear()
                .domain([0, 19])
                .range([0, 500])
                .clamp(true);
​
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>
    