Brushes can be used to draw a barchart. This gives an eady way to input or adjust values with the mouse !!!
Last active
October 4, 2017 13:39
-
-
Save AlainRo/eed1397be00c740efdc9ae861ee99f33 to your computer and use it in GitHub Desktop.
a Barchart of brushes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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