a Barchart of brushes

Brushes can be used to draw a barchart. This gives an eady way to input or adjust values with the mouse !!!

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.selection {
  fill: steelblue;
  fill-opacity: 1;

}
svg {
    display: block;
    margin : auto;
}

.xaxis {
  stroke: black;
  stroke-width: 1px;
}

.data {
  fill: blue;
}
</style>
<body>

var data = [{index: 0, value: 3},
            {index: 1, value: 5},
            {index: 2, value: 12}, 
            {index: 3, value: 8},
            {index: 4, value: 20},
            {index: 5, value: 7}];

var width = 800,
    height = 300,
    delim = 4;

var scale = d3.scaleLinear()
    .domain([0, 21])
    .rangeRound([0, width]);

var y = d3.scaleLinear()
    .domain([0, data.length])
    .rangeRound([0, height]);

var svg = d3.select('#horiz')
  .append("svg")
    .attr("width", width)
    .attr("height", height)
  .append('g');

svg
  .append('rect')
    .attr('x', 0)
    .attr('y', 0)
    .style('stroke', 'black')
    .style('fill', 'lightyellow')
    .attr('width', width)
    .attr('height', height);

// Moveable barChart

var brush = d3.brushX()
  .extent(function (d, i) {
       return [[0,y(i)+delim/2 ], 
              [width, y(i)+ height/data.length -delim/2]]})
  .on("brush", brushmove);
  
  
var svgbrush = svg
  .selectAll('.brush')
    .data(data)
  .enter()
    .append('g')
      .attr('class', 'brush')
    .append('g')
      .call(brush)
      .call(brush.move, function (d){return [0, d.value].map(scale);});

svgbrush
  .append('text')
    .attr('x', function (d){return scale(d.value)-25;})
    .attr('y', function (d, i){return y(i) + y(0.5);})
    .attr('dy', '.35em')
    .attr('dx', -15)
    .style('fill', 'white')
    .text(function (d) {return d3.format('.2')(d.value);})

function brushmove() { 
    if (!d3.event.sourceEvent) return; // Only transition after input.
    if (!d3.event.selection) return; // Ignore empty selections.
    if (d3.event.sourceEvent.type === "brush") return;

var d0 = d3.event.selection.map(scale.invert);
    var d1 =[0, d0[1]];

var d = d3.select(this).select('.selection');;

d.datum().value= d0[1]; // Change the value of the original data

d3.select(this).call(d3.event.target.move, d1.map(scale));

svgbrush
      .selectAll('text')
        .attr('x', function (d){return scale(d.value)-25;})
        .text(function (d) {return d3.format('.2')(d.value);});

}

</script>

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