forked from d3noob's block: Simple bar graph in v4
... to demonstrate how to add a brush for each bar for partial selection
Last active
December 17, 2017 22:32
-
-
Save timelyportfolio/f0a331db238cbd9249c0558b81cbe05b to your computer and use it in GitHub Desktop.
bar graph in v4 with a bar brush
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> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <script src="https://unpkg.com/d3@4.12.0/build/d3.min.js"></script> | |
| </head> | |
| <body style="background-color:white;"> | |
| <style>.brush .selection {fill: red; fill-opacity: 1;}</style> | |
| <script> | |
| // bar chart code entirely from d3noob | |
| // https://bl.ocks.org/d3noob/bdf28027e0ce70bd132edc64f1dd7ea4 | |
| // set the dimensions and margins of the graph | |
| var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| // set the ranges | |
| var x = d3.scaleBand() | |
| .range([0, width]) | |
| .padding(0.1); | |
| var y = d3.scaleLinear() | |
| .range([height, 0]); | |
| // append the svg object to the body of the page | |
| // append a group element to svg | |
| // moves the group element to the top left margin | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", | |
| "translate(" + margin.left + "," + margin.top + ")"); | |
| // make up data instead of get from csv | |
| data = [ | |
| {salesperson: "A", sales: Math.random() * 100}, | |
| {salesperson: "B", sales: Math.random() * 100}, | |
| {salesperson: "C", sales: Math.random() * 100} | |
| ]; | |
| // Scale the range of the data in the domains | |
| x.domain(data.map(function(d) { return d.salesperson; })); | |
| y.domain([0, d3.max(data, function(d) { return d.sales; })]); | |
| // append the rectangles for the bar chart | |
| // but use g to contain each bar | |
| var barg = svg.selectAll(".bar") | |
| .data(data) | |
| .enter().append("g") | |
| .attr("class", "bar") | |
| .attr( | |
| "transform", | |
| function(d) { | |
| return "translate(" + x(d.salesperson) + "," + 0 + ")" | |
| } | |
| ) | |
| barg.append("rect") | |
| .attr("width", x.bandwidth()) | |
| .attr("height", function(d) { return height - y(d.sales); }) | |
| .attr("y", function(d) {return y(d.sales)}) | |
| .style("fill", "#888"); | |
| // now for fun add a brush on each bar | |
| var brush = d3.brushY() | |
| barg.append("g") | |
| .attr("class", "brush") | |
| .each(function(d) { | |
| d3.select(this) | |
| .call(brush.extent([[0,y(d.sales)], [x.bandwidth(), height]])) | |
| }) | |
| // add the x Axis | |
| svg.append("g") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x)); | |
| // add the y Axis | |
| svg.append("g") | |
| .call(d3.axisLeft(y)); | |
| </script> | |
| </body> | |
| </html> |
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
| salesperson | sales | |
|---|---|---|
| Bob | 33 | |
| Robin | 12 | |
| Anne | 41 | |
| Mark | 16 | |
| Joe | 59 | |
| Eve | 38 | |
| Karen | 21 | |
| Kirsty | 25 | |
| Chris | 30 | |
| Lisa | 47 | |
| Tom | 5 | |
| Stacy | 20 | |
| Charles | 13 | |
| Mary | 29 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment