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
Last active
December 17, 2015 21:20
-
-
Save jonsadka/810749b7dbcf0eca1e4e to your computer and use it in GitHub Desktop.
Lever Love (Hire2)
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
| 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 |
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> | |
| <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