Skip to content

Instantly share code, notes, and snippets.

@tomshanley

tomshanley/.block

Created May 9, 2019 02:31
Show Gist options
  • Save tomshanley/d2f140aba5bfe7283bfeb4ca2bfced85 to your computer and use it in GitHub Desktop.
Save tomshanley/d2f140aba5bfe7283bfeb4ca2bfced85 to your computer and use it in GitHub Desktop.
Download ZIP
hover over group of bars
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-array.v2.min.js"></script>
<style>
svg {
outline: 1px solid red;
display: inline-block;
}
.bar {
pointer-events: none;
stroke: black;
stroke-width: 1;
}
.hover-bar {
opacity: 0;
fill: white;
}
</style>
</head>
<body>
<script>
let width = 0.45 * window.innerWidth
let height = 0.9 *window.innerHeight
let padding = 25
var svg = d3.select('body').append('svg')
.attr('width', width + padding + padding)
.attr('height', height + padding + padding)
let g = svg.append("g")
.attr("transform", "translate(" + padding + ", " + padding + ")")
var textbox = d3.select('body').append('span')
.attr('id', 'textbox')
.style('width', 0.3*window.innerWidth + 'px')
.style('height', 0.9*window.innerHeight + 'px')
.style('margin-left', 0.05*window.innerWidth + 'px')
.style('display', 'inline-block')
.style('vertical-align', 'middle')
.style('font-size', '24pt')
.style('padding-left', 0.01*window.innerWidth + 'px');
let data = [
{'group': 'A', 'datum': 0},
{'group': 'A', 'datum': 1},
{'group': 'A', 'datum': 2},
{'group': 'A', 'datum': 3},
{'group': 'A', 'datum': 4},
{'group': 'B', 'datum': 0},
{'group': 'B', 'datum': 1},
{'group': 'B', 'datum': 2},
{'group': 'B', 'datum': 3},
{'group': 'B', 'datum': 4},
{'group': 'C', 'datum': 0},
{'group': 'C', 'datum': 1},
{'group': 'C', 'datum': 2},
{'group': 'C', 'datum': 3},
{'group': 'C', 'datum': 4}
];
let groupedData = Array.from(d3.group(data, d => d.group), ([key, value]) => ({key, value}))
let colors = [ "darkviolet", 'lightseagreen', 'coral'],
color = d3.scaleOrdinal().range(colors);
let x = d3.scaleLinear()
.domain([0, 5])
.range([0, width]);
let y = d3.scaleBand()
.domain(['A', 'B', 'C'])
.range([10, height])
.padding(0.1);
let groupBars = g.append('g')
.selectAll('.group')
.data(groupedData)
.enter()
.append('g')
.attr("transform", function(d,i){
return "translate(0, " + y(d.key) + ")"
})
let segments = groupBars.selectAll(".bar")
.data(function(d) { return d.value })
.enter()
.append("rect")
.attr("class", "bar")
.attr('x', function(d) { return x(d.datum) })
.attr('width', function(d) { return x(d.datum) - x(d.datum-1) })
.attr('height', y.bandwidth())
.attr('fill', function(d) { return color(d.group) })
groupBars.append("rect")
.attr("class", "hover-bar")
.attr("width", width)
.attr("height", y.bandwidth())
.on('mousemove', function(d) {
document.getElementById('textbox').innerHTML += d.key
})
.on('mouseout', function(d) {
document.getElementById('textbox').innerHTML = null
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment