Create a gist now

Instantly share code, notes, and snippets.

@jonsadka /README.md
Last active Dec 17, 2015

Embed
Lever Love (Hire2)

This grouped bar chart is constructed from a CSV file storing the number of LGTM's of different pull requests at Lever's repo of Hire2 by user.

forked from mbostock's block: Grouped Bar Chart

Engineer Give Receive Total
ericyhwang 5 10 15
ishbu 6 2 8
zmillman 2 3 5
jonsadka 16 5 21
eshenfield 7 10 17
distracteddev 7 5 12
hflw 2 5 7
jylauril 5 3 8
rkstedman 13 8 21
drags 1 4 5
gloriachen 2 2 4
TheRealest 2 1 3
bruchu 0 1 1
l8on 0 1 1
jackerman 0 1 1
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
margin: auto;
position: relative;
width: 960px;
}
text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
</style>
<body>
<label><input type="radio" name="mode" value="Give" checked> Give</label>
<label><input type="radio" name="mode" value="Receive"> Receive</label>
<label><input type="radio" name="mode" value="Total"> Total</label>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom - 10;
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["#9EBD06","00A1DC","#DD4B39"]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
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 + ")");
var globalData = [];
var countType = undefined;
d3.csv("data.csv", function(error, data) {
if (error) throw error;
var sortType = 'Give'
countType = d3.keys(data[0]).filter(function(key) { return key !== "Engineer"; });
data.forEach(function(d) {
d.counts = countType.map(function(name) { return {name: name, value: +d[name]}; });
})
globalData = data.slice();
data = data.sort(function(a, b){
return +b[sortType] - +a[sortType];
})
x0.domain(data.map(function(d) { return d.Engineer; }));
x1.domain(countType).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.counts, function(d) { return d.value; }); })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Count");
var engineer = svg.selectAll(".engineer")
.data(data)
.enter().append("g")
.attr("class", "g engineer")
.attr("transform", function(d) { return "translate(" + x0(d.Engineer) + ",0)"; });
engineer.selectAll("rect")
.data(function(d) { return d.counts; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("height", 0)
.attr("x", function(d) { return x1(d.name); })
.attr("y", function(d) { return y(0); })
.style("fill", function(d) { return color(d.name); })
.style("opacity", function(d) {
if (d.name === sortType) return 1;
return 0.15;
})
.transition().duration(1000)
.attr("height", function(d) { return height - y(d.value); })
.attr("y", function(d) { return y(d.value); })
var legend = svg.selectAll(".legend")
.data(countType.slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
});
d3.selectAll("input").on("change", change);
function change() {
sortType = this.value
transitionData(sortType);
}
function transitionData(sortType){
var data = globalData.slice().sort(function(a, b){
return +b[sortType] - +a[sortType];
})
x0.domain(data.map(function(d) { return d.Engineer; }));
x1.domain(countType).rangeRoundBands([0, x0.rangeBand()]);
var engineer = d3.selectAll(".engineer")
engineer.transition().delay(800)
.duration(function(d, i){ return 300 * i + 300; })
.attr("transform", function(d) { return "translate(" + x0(d.Engineer) + ",0)"; });
engineer.selectAll("rect")
.transition()
.duration(800)
.style("opacity", function(d) {
if (d.name === sortType) return 1;
return 0.15;
})
xAxis.scale(x0);
d3.selectAll(".x.axis").transition().delay(1000)
.duration(data.length * 100).call(xAxis)
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment