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
forked from jonsadka's block: Lever Love (Hire2)
Last active
January 16, 2016 23:45
-
-
Save jonsadka/5288d925bae8785cb760 to your computer and use it in GitHub Desktop.
Lever Love (Taskqueue2)
This file contains hidden or 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
| Engineer | Give | Receive | Total | |
|---|---|---|---|---|
| rkstedman | 96 | 58 | 154 | |
| l8on | 4 | 24 | 28 | |
| ishbu | 90 | 45 | 135 | |
| hflw | 11 | 35 | 46 | |
| distracteddev | 26 | 24 | 50 | |
| ericyhwang | 11 | 12 | 23 | |
| jylauril | 39 | 55 | 94 | |
| eshenfield | 7 | 18 | 25 | |
| bruchu | 16 | 24 | 40 | |
| jonsadka | 14 | 20 | 34 | |
| TheRealest | 2 | 1 | 3 | |
| drags | 2 | 1 | 3 | |
| nateps | 1 | 2 | 3 | |
| zmillman | 0 | 1 | 1 | |
| jackerman | 0 | 1 | 1 |
This file contains hidden or 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> | |
| <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