Skip to content

Instantly share code, notes, and snippets.

@AlainRo
Last active October 4, 2017 13:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AlainRo/eed1397be00c740efdc9ae861ee99f33 to your computer and use it in GitHub Desktop.
Save AlainRo/eed1397be00c740efdc9ae861ee99f33 to your computer and use it in GitHub Desktop.
a Barchart of brushes

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>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id='horiz'> </div>
<script>
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment