After almost commiting suicide because the parsing of json CouchDB stuff did not work and fit into my D3 script. I came up with the idea to make this. This is a donut chart which shows how the best bioinformaticians in the class spend their time and how many muggs of coffee they consume.
Try to change the name in the upper left!
| id | parsing | talking | installing software | analysis | confusion | giving up | making coffee | |
|---|---|---|---|---|---|---|---|---|
| Pjotr | 310504 | 552339 | 259034 | 450818 | 1231572 | 1215966 | 641667 | |
| Carlo | 52083 | 85640 | 42153 | 74257 | 198724 | 183159 | 50277 | |
| Mehdi | 515910 | 828669 | 362642 | 601943 | 1804762 | 1523681 | 862573 | |
| Reijer | 202070 | 343207 | 157204 | 264160 | 754420 | 727124 | 407205 | |
| Sharif | 2704659 | 4499890 | 2159981 | 3853788 | 10604510 | 8819342 | 4114496 |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .axis text { | |
| font: 10px sans-serif; | |
| } | |
| .axis line, | |
| .axis path { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var dispatch = d3.dispatch("load", "statechange"); | |
| var groups = [ | |
| "parsing", | |
| "talking", | |
| "installing software", | |
| "analysis", | |
| "confusion", | |
| "giving up", | |
| "making coffee" | |
| ]; | |
| d3.csv("data.csv", type, function(error, states) { | |
| if (error) throw error; | |
| var stateById = d3.map(); | |
| states.forEach(function(d) { stateById.set(d.id, d); }); | |
| dispatch.load(stateById); | |
| dispatch.statechange(stateById.get("Pjotr")); | |
| }); | |
| // A drop-down menu for selecting a state; uses the "menu" namespace. | |
| dispatch.on("load.menu", function(stateById) { | |
| var select = d3.select("body") | |
| .append("div") | |
| .append("select") | |
| .on("change", function() { dispatch.statechange(stateById.get(this.value)); }); | |
| select.selectAll("option") | |
| .data(stateById.values()) | |
| .enter().append("option") | |
| .attr("value", function(d) { return d.id; }) | |
| .text(function(d) { return d.id; }); | |
| dispatch.on("statechange.menu", function(state) { | |
| select.property("value", state.id); | |
| }); | |
| }); | |
| // A bar chart to show total population; uses the "bar" namespace. | |
| dispatch.on("load.bar", function(stateById) { | |
| var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
| width = 80 - margin.left - margin.right, | |
| height = 460 - margin.top - margin.bottom; | |
| var y = d3.scale.linear() | |
| .domain([0, d3.max(stateById.values(), function(d) { return d.total; })]) | |
| .rangeRound([height, 0]) | |
| .nice(); | |
| 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 + ")"); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis); | |
| var rect = svg.append("rect") | |
| .attr("x", 4) | |
| .attr("width", width - 4) | |
| .attr("y", height) | |
| .attr("height", 0) | |
| .style("fill", "#aaa"); | |
| dispatch.on("statechange.bar", function(d) { | |
| rect.transition() | |
| .attr("y", y(d.total)) | |
| .attr("height", y(0) - y(d.total)); | |
| }); | |
| }); | |
| // A donut which shows bioinformatics time | |
| dispatch.on("load.pie", function(stateById) { | |
| var width = 880, | |
| height = 460, | |
| radius = Math.min(width, height) / 2; | |
| var color = d3.scale.ordinal() | |
| .domain(groups) | |
| .range(["#98ffff", "#ff8aa6", "#7bff88", "#ff486b", "#a05dff", "#ff743c", "#8cff00"]); | |
| var arc = d3.svg.arc() | |
| .outerRadius(radius - 10) | |
| .innerRadius(radius - 70); | |
| var pie = d3.layout.pie() | |
| .sort(null); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| var path = svg.selectAll("path") | |
| .data(groups) | |
| .enter().append("path") | |
| .style("fill", color) | |
| .each(function() { this._current = {startAngle: 0, endAngle: 0}; }); | |
| dispatch.on("statechange.pie", function(d) { | |
| path.data(pie.value(function(g) { return d[g]; })(groups)).transition() | |
| .attrTween("d", function(d) { | |
| var interpolate = d3.interpolate(this._current, d); | |
| this._current = interpolate(0); | |
| return function(t) { | |
| return arc(interpolate(t)); | |
| }; | |
| }); | |
| }); | |
| // Add title | |
| svg.append("svg:text") | |
| .attr("class", "title") | |
| .attr("x", -430) | |
| .attr("y", 200) | |
| .text("Muggs of coffee"); | |
| var color_hash = { | |
| 0: ["parsing" , "#98ffff"], | |
| 1: ["talking" , "#ff8aa6"], | |
| 2: ["installing software" ,"#7bff88"], | |
| 3: ["analysis" , "#ff486b"], | |
| 4: ["confusion" , "#a05dff"], | |
| 5: ["giving up" , "#ff743c"], | |
| 6: ["making coffee" , "#8cff00"] | |
| } | |
| // add legend | |
| var legend = svg.append("g") | |
| .attr("class", "legend") | |
| .attr("x", 500 - 65) | |
| .attr("y", 25) | |
| .attr("height", 100) | |
| .attr("width", 100); | |
| legend.selectAll('g').data(groups) | |
| .enter() | |
| .append('g') | |
| .each(function(d, i) { | |
| var g = d3.select(this); | |
| g.append("rect") | |
| .attr("x", 300 - 65) | |
| .attr("y", i*25) | |
| .attr("width", 10) | |
| .attr("height", 10) | |
| .style("fill", color_hash[String(i)][1]); | |
| g.append("text") | |
| .attr("x", 300- 50) | |
| .attr("y", i * 25 + 8) | |
| .attr("height",30) | |
| .attr("width",100) | |
| .style("fill", color_hash[String(i)][1]) | |
| .text(color_hash[String(i)][0]); | |
| }); | |
| }); | |
| //COFFFFEEEEEEEE!!!! | |
| function type(d) { | |
| d.total = d3.sum(groups, function(k) { return d[k] = +d[k]; }); | |
| return d; | |
| } | |
| </script> |