Built with blockbuilder.org
Forked from https://blockbuilder.org/callmedeeray/674cb79e6240b83b081a7f25e6dc94ed
Last active
May 9, 2019 02:27
-
-
Save tomshanley/b497d8e19c49f41b7b9c328eaf6f9e3e to your computer and use it in GitHub Desktop.
hover over group of bars
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
| license: mit |
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v5.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 nestedData = d3.nest() | |
| .key(function(d) { return d.group; }) | |
| .entries(data); | |
| let groupedData = d3.group(data, d => d.name) | |
| 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(nestedData) | |
| .enter() | |
| .append('g') | |
| .attr("transform", function(d,i){ | |
| console.log(d.key) | |
| return "translate(0, " + y(d.key) + ")" | |
| }) | |
| let segments = groupBars.selectAll(".bar") | |
| .data(function(d) { return d.values }) | |
| .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