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
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> |