Skip to content

Instantly share code, notes, and snippets.

@lorenzopub

lorenzopub/.block

Created December 18, 2017 08:21
Show Gist options
  • Save lorenzopub/0c1c5417bd7ca069a134359e4bf09282 to your computer and use it in GitHub Desktop.
Save lorenzopub/0c1c5417bd7ca069a134359e4bf09282 to your computer and use it in GitHub Desktop.
Download ZIP
bar graph in v4 with a bar brush
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://unpkg.com/[email protected]/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>
Raw
sales.csv
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