This is an animated variation of mbostock's normalized stacked barchart. When you click on a block, that block is sent to the bottom of the stack and the bars are reordered by decreasing height of that block. This allows you to compare any value in the stacks with a common baseline, eliminating a common criticism of stacked barcharts.
Last active
September 25, 2017 14:51
-
-
Save datapixie/5986521 to your computer and use it in GitHub Desktop.
An animated normalized stacked barchart.
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
| var margin = {top: 20, right: 100, bottom: 30, left: 40}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var x = d3.scale.ordinal() | |
| .rangeRoundBands([0, width], .05); | |
| var y = d3.scale.linear() | |
| .rangeRound([height, 0]); | |
| var color = d3.scale.ordinal() | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom") | |
| .tickSize(0, 0, 0) | |
| .tickPadding(6); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .tickFormat(d3.format(".0%")) | |
| .tickSize(0, 0, 0) | |
| .tickPadding(-1); | |
| 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 + ")"); | |
| d3.csv("genes10.txt", function(error, data) { | |
| var categories = d3.keys(data[0]).filter(function(key) { return key !== "Sample"; }); | |
| var categories_shift = categories; | |
| console.log(categories); | |
| color.domain(categories); | |
| color.range(colorbrewer.Spectral[categories.length]); | |
| data.forEach(function(d) { | |
| var y0 = 0; | |
| d.genes = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; }); | |
| d.genes.forEach(function(d) { d.y0 /= y0; d.y1 /= y0; }); | |
| }); | |
| data.sort(function(a, b) { return b.genes[0].y1 - a.genes[0].y1; }); | |
| x.domain(data.map(function(d) { return d.Sample; })); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis); | |
| var rotate = function(arr){ | |
| var temp = arr.shift(); | |
| arr.push(temp); | |
| } | |
| var sample = svg.selectAll(".sample") | |
| .data(data) | |
| .enter().append("g") | |
| .attr("class", "sample") | |
| .attr("transform", function(d) { return "translate(" + x(d.Sample) + ",0)"; }); | |
| sample.selectAll("rect") | |
| .data(function(d) { return d.genes; }) | |
| .enter().append("rect") | |
| .attr("width", x.rangeBand()) | |
| .attr("y", function(d) { return y(d.y1); }) | |
| .attr("height", function(d) { return y(d.y0) - y(d.y1); }) | |
| .style("fill", function(d) { return color(d.name);}) | |
| .on("click", function(d) { | |
| var gene_index = categories_shift.indexOf(d.name); | |
| moveStuff(gene_index); | |
| }); | |
| var moveStuff = function(gene_index){ | |
| categories_shift = categories; | |
| for (var i=0; i<gene_index; i++){ | |
| rotate(categories_shift); | |
| } | |
| data.forEach(function(d) { | |
| var y0 = 0; | |
| d.genes = categories_shift.map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; }); | |
| d.genes.forEach(function(d) { d.y0 /= y0; d.y1 /= y0; }); | |
| }) | |
| data.sort(function(a, b) { return b.genes[0].y1 - a.genes[0].y1; }); | |
| x.domain(data.map(function(d) { return d.Sample; })); | |
| svg.select(".x.axis") | |
| .transition() | |
| .duration(1000) | |
| .call(xAxis); | |
| sample = svg.selectAll(".sample") | |
| .data(data) | |
| .attr("transform", function(d) { return "translate(" + x(d.Sample) + ",0)"; }); | |
| sample.selectAll("rect") | |
| .data(function(d) { return d.genes; }) | |
| .transition() | |
| .delay(function(d, i) { return i * 50}) | |
| .attr("y", function(d) {return y(d.y1);}) | |
| .attr("height", function(d) { return y(d.y0) - y(d.y1); }) | |
| .style("fill", function(d) { return color(d.name);}); | |
| last_sample = data[data.length - 1]; | |
| }; | |
| console.log(data); | |
| console.log(data[data.length - 1].genes); | |
| var last_sample = data[data.length - 1]; | |
| console.log( x(last_sample.Sample)); | |
| svg.selectAll("text") | |
| .data(last_sample.genes) | |
| .enter() | |
| .append("text") | |
| .text(function(d) { | |
| return d.name; | |
| }) | |
| .attr("x", function(d) { | |
| return x(last_sample.Sample) + x.rangeBand() + 15; | |
| }) | |
| .attr("y", function(d) { | |
| return (y(d.y0) + y(d.y1)) / 2; | |
| }) | |
| .attr("font-size", "11px") | |
| .attr("fill", "black"); | |
| }); |
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
| // This product includes color specifications and designs developed by Cynthia Brewer (http://colorbrewer.org/). | |
| var colorbrewer = {YlGn: { | |
| 3: ["#f7fcb9","#addd8e","#31a354"], | |
| 4: ["#ffffcc","#c2e699","#78c679","#238443"], | |
| 5: ["#ffffcc","#c2e699","#78c679","#31a354","#006837"], | |
| 6: ["#ffffcc","#d9f0a3","#addd8e","#78c679","#31a354","#006837"], | |
| 7: ["#ffffcc","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#005a32"], | |
| 8: ["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#005a32"], | |
| 9: ["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"] | |
| },YlGnBu: { | |
| 3: ["#edf8b1","#7fcdbb","#2c7fb8"], | |
| 4: ["#ffffcc","#a1dab4","#41b6c4","#225ea8"], | |
| 5: ["#ffffcc","#a1dab4","#41b6c4","#2c7fb8","#253494"], | |
| 6: ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#2c7fb8","#253494"], | |
| 7: ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"], | |
| 8: ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"], | |
| 9: ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"] | |
| },GnBu: { | |
| 3: ["#e0f3db","#a8ddb5","#43a2ca"], | |
| 4: ["#f0f9e8","#bae4bc","#7bccc4","#2b8cbe"], | |
| 5: ["#f0f9e8","#bae4bc","#7bccc4","#43a2ca","#0868ac"], | |
| 6: ["#f0f9e8","#ccebc5","#a8ddb5","#7bccc4","#43a2ca","#0868ac"], | |
| 7: ["#f0f9e8","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"], | |
| 8: ["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"], | |
| 9: ["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"] | |
| },BuGn: { | |
| 3: ["#e5f5f9","#99d8c9","#2ca25f"], | |
| 4: ["#edf8fb","#b2e2e2","#66c2a4","#238b45"], | |
| 5: ["#edf8fb","#b2e2e2","#66c2a4","#2ca25f","#006d2c"], | |
| 6: ["#edf8fb","#ccece6","#99d8c9","#66c2a4","#2ca25f","#006d2c"], | |
| 7: ["#edf8fb","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"], | |
| 8: ["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"], | |
| 9: ["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#006d2c","#00441b"] | |
| },PuBuGn: { | |
| 3: ["#ece2f0","#a6bddb","#1c9099"], | |
| 4: ["#f6eff7","#bdc9e1","#67a9cf","#02818a"], | |
| 5: ["#f6eff7","#bdc9e1","#67a9cf","#1c9099","#016c59"], | |
| 6: ["#f6eff7","#d0d1e6","#a6bddb","#67a9cf","#1c9099","#016c59"], | |
| 7: ["#f6eff7","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016450"], | |
| 8: ["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016450"], | |
| 9: ["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016c59","#014636"] | |
| },PuBu: { | |
| 3: ["#ece7f2","#a6bddb","#2b8cbe"], | |
| 4: ["#f1eef6","#bdc9e1","#74a9cf","#0570b0"], | |
| 5: ["#f1eef6","#bdc9e1","#74a9cf","#2b8cbe","#045a8d"], | |
| 6: ["#f1eef6","#d0d1e6","#a6bddb","#74a9cf","#2b8cbe","#045a8d"], | |
| 7: ["#f1eef6","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#034e7b"], | |
| 8: ["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#034e7b"], | |
| 9: ["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#045a8d","#023858"] | |
| },BuPu: { | |
| 3: ["#e0ecf4","#9ebcda","#8856a7"], | |
| 4: ["#edf8fb","#b3cde3","#8c96c6","#88419d"], | |
| 5: ["#edf8fb","#b3cde3","#8c96c6","#8856a7","#810f7c"], | |
| 6: ["#edf8fb","#bfd3e6","#9ebcda","#8c96c6","#8856a7","#810f7c"], | |
| 7: ["#edf8fb","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#6e016b"], | |
| 8: ["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#6e016b"], | |
| 9: ["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#810f7c","#4d004b"] | |
| },RdPu: { | |
| 3: ["#fde0dd","#fa9fb5","#c51b8a"], | |
| 4: ["#feebe2","#fbb4b9","#f768a1","#ae017e"], | |
| 5: ["#feebe2","#fbb4b9","#f768a1","#c51b8a","#7a0177"], | |
| 6: ["#feebe2","#fcc5c0","#fa9fb5","#f768a1","#c51b8a","#7a0177"], | |
| 7: ["#feebe2","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177"], | |
| 8: ["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177"], | |
| 9: ["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"] | |
| },PuRd: { | |
| 3: ["#e7e1ef","#c994c7","#dd1c77"], | |
| 4: ["#f1eef6","#d7b5d8","#df65b0","#ce1256"], | |
| 5: ["#f1eef6","#d7b5d8","#df65b0","#dd1c77","#980043"], | |
| 6: ["#f1eef6","#d4b9da","#c994c7","#df65b0","#dd1c77","#980043"], | |
| 7: ["#f1eef6","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#91003f"], | |
| 8: ["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#91003f"], | |
| 9: ["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#980043","#67001f"] | |
| },OrRd: { | |
| 3: ["#fee8c8","#fdbb84","#e34a33"], | |
| 4: ["#fef0d9","#fdcc8a","#fc8d59","#d7301f"], | |
| 5: ["#fef0d9","#fdcc8a","#fc8d59","#e34a33","#b30000"], | |
| 6: ["#fef0d9","#fdd49e","#fdbb84","#fc8d59","#e34a33","#b30000"], | |
| 7: ["#fef0d9","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#990000"], | |
| 8: ["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#990000"], | |
| 9: ["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"] | |
| },YlOrRd: { | |
| 3: ["#ffeda0","#feb24c","#f03b20"], | |
| 4: ["#ffffb2","#fecc5c","#fd8d3c","#e31a1c"], | |
| 5: ["#ffffb2","#fecc5c","#fd8d3c","#f03b20","#bd0026"], | |
| 6: ["#ffffb2","#fed976","#feb24c","#fd8d3c","#f03b20","#bd0026"], | |
| 7: ["#ffffb2","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#b10026"], | |
| 8: ["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#b10026"], | |
| 9: ["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#bd0026","#800026"] | |
| },YlOrBr: { | |
| 3: ["#fff7bc","#fec44f","#d95f0e"], | |
| 4: ["#ffffd4","#fed98e","#fe9929","#cc4c02"], | |
| 5: ["#ffffd4","#fed98e","#fe9929","#d95f0e","#993404"], | |
| 6: ["#ffffd4","#fee391","#fec44f","#fe9929","#d95f0e","#993404"], | |
| 7: ["#ffffd4","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#8c2d04"], | |
| 8: ["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#8c2d04"], | |
| 9: ["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#993404","#662506"] | |
| },Purples: { | |
| 3: ["#efedf5","#bcbddc","#756bb1"], | |
| 4: ["#f2f0f7","#cbc9e2","#9e9ac8","#6a51a3"], | |
| 5: ["#f2f0f7","#cbc9e2","#9e9ac8","#756bb1","#54278f"], | |
| 6: ["#f2f0f7","#dadaeb","#bcbddc","#9e9ac8","#756bb1","#54278f"], | |
| 7: ["#f2f0f7","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#4a1486"], | |
| 8: ["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#4a1486"], | |
| 9: ["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#54278f","#3f007d"] | |
| },Blues: { | |
| 3: ["#deebf7","#9ecae1","#3182bd"], | |
| 4: ["#eff3ff","#bdd7e7","#6baed6","#2171b5"], | |
| 5: ["#eff3ff","#bdd7e7","#6baed6","#3182bd","#08519c"], | |
| 6: ["#eff3ff","#c6dbef","#9ecae1","#6baed6","#3182bd","#08519c"], | |
| 7: ["#eff3ff","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#084594"], | |
| 8: ["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#084594"], | |
| 9: ["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"] | |
| },Greens: { | |
| 3: ["#e5f5e0","#a1d99b","#31a354"], | |
| 4: ["#edf8e9","#bae4b3","#74c476","#238b45"], | |
| 5: ["#edf8e9","#bae4b3","#74c476","#31a354","#006d2c"], | |
| 6: ["#edf8e9","#c7e9c0","#a1d99b","#74c476","#31a354","#006d2c"], | |
| 7: ["#edf8e9","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#005a32"], | |
| 8: ["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#005a32"], | |
| 9: ["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#006d2c","#00441b"] | |
| },Oranges: { | |
| 3: ["#fee6ce","#fdae6b","#e6550d"], | |
| 4: ["#feedde","#fdbe85","#fd8d3c","#d94701"], | |
| 5: ["#feedde","#fdbe85","#fd8d3c","#e6550d","#a63603"], | |
| 6: ["#feedde","#fdd0a2","#fdae6b","#fd8d3c","#e6550d","#a63603"], | |
| 7: ["#feedde","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#8c2d04"], | |
| 8: ["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#8c2d04"], | |
| 9: ["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#a63603","#7f2704"] | |
| },Reds: { | |
| 3: ["#fee0d2","#fc9272","#de2d26"], | |
| 4: ["#fee5d9","#fcae91","#fb6a4a","#cb181d"], | |
| 5: ["#fee5d9","#fcae91","#fb6a4a","#de2d26","#a50f15"], | |
| 6: ["#fee5d9","#fcbba1","#fc9272","#fb6a4a","#de2d26","#a50f15"], | |
| 7: ["#fee5d9","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#99000d"], | |
| 8: ["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#99000d"], | |
| 9: ["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"] | |
| },Greys: { | |
| 3: ["#f0f0f0","#bdbdbd","#636363"], | |
| 4: ["#f7f7f7","#cccccc","#969696","#525252"], | |
| 5: ["#f7f7f7","#cccccc","#969696","#636363","#252525"], | |
| 6: ["#f7f7f7","#d9d9d9","#bdbdbd","#969696","#636363","#252525"], | |
| 7: ["#f7f7f7","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525"], | |
| 8: ["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525"], | |
| 9: ["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525","#000000"] | |
| },PuOr: { | |
| 3: ["#f1a340","#f7f7f7","#998ec3"], | |
| 4: ["#e66101","#fdb863","#b2abd2","#5e3c99"], | |
| 5: ["#e66101","#fdb863","#f7f7f7","#b2abd2","#5e3c99"], | |
| 6: ["#b35806","#f1a340","#fee0b6","#d8daeb","#998ec3","#542788"], | |
| 7: ["#b35806","#f1a340","#fee0b6","#f7f7f7","#d8daeb","#998ec3","#542788"], | |
| 8: ["#b35806","#e08214","#fdb863","#fee0b6","#d8daeb","#b2abd2","#8073ac","#542788"], | |
| 9: ["#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788"], | |
| 10: ["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"], | |
| 11: ["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"] | |
| },BrBG: { | |
| 3: ["#d8b365","#f5f5f5","#5ab4ac"], | |
| 4: ["#a6611a","#dfc27d","#80cdc1","#018571"], | |
| 5: ["#a6611a","#dfc27d","#f5f5f5","#80cdc1","#018571"], | |
| 6: ["#8c510a","#d8b365","#f6e8c3","#c7eae5","#5ab4ac","#01665e"], | |
| 7: ["#8c510a","#d8b365","#f6e8c3","#f5f5f5","#c7eae5","#5ab4ac","#01665e"], | |
| 8: ["#8c510a","#bf812d","#dfc27d","#f6e8c3","#c7eae5","#80cdc1","#35978f","#01665e"], | |
| 9: ["#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e"], | |
| 10: ["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"], | |
| 11: ["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"] | |
| },PRGn: { | |
| 3: ["#af8dc3","#f7f7f7","#7fbf7b"], | |
| 4: ["#7b3294","#c2a5cf","#a6dba0","#008837"], | |
| 5: ["#7b3294","#c2a5cf","#f7f7f7","#a6dba0","#008837"], | |
| 6: ["#762a83","#af8dc3","#e7d4e8","#d9f0d3","#7fbf7b","#1b7837"], | |
| 7: ["#762a83","#af8dc3","#e7d4e8","#f7f7f7","#d9f0d3","#7fbf7b","#1b7837"], | |
| 8: ["#762a83","#9970ab","#c2a5cf","#e7d4e8","#d9f0d3","#a6dba0","#5aae61","#1b7837"], | |
| 9: ["#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837"], | |
| 10: ["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"], | |
| 11: ["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"] | |
| },PiYG: { | |
| 3: ["#e9a3c9","#f7f7f7","#a1d76a"], | |
| 4: ["#d01c8b","#f1b6da","#b8e186","#4dac26"], | |
| 5: ["#d01c8b","#f1b6da","#f7f7f7","#b8e186","#4dac26"], | |
| 6: ["#c51b7d","#e9a3c9","#fde0ef","#e6f5d0","#a1d76a","#4d9221"], | |
| 7: ["#c51b7d","#e9a3c9","#fde0ef","#f7f7f7","#e6f5d0","#a1d76a","#4d9221"], | |
| 8: ["#c51b7d","#de77ae","#f1b6da","#fde0ef","#e6f5d0","#b8e186","#7fbc41","#4d9221"], | |
| 9: ["#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221"], | |
| 10: ["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"], | |
| 11: ["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"] | |
| },RdBu: { | |
| 3: ["#ef8a62","#f7f7f7","#67a9cf"], | |
| 4: ["#ca0020","#f4a582","#92c5de","#0571b0"], | |
| 5: ["#ca0020","#f4a582","#f7f7f7","#92c5de","#0571b0"], | |
| 6: ["#b2182b","#ef8a62","#fddbc7","#d1e5f0","#67a9cf","#2166ac"], | |
| 7: ["#b2182b","#ef8a62","#fddbc7","#f7f7f7","#d1e5f0","#67a9cf","#2166ac"], | |
| 8: ["#b2182b","#d6604d","#f4a582","#fddbc7","#d1e5f0","#92c5de","#4393c3","#2166ac"], | |
| 9: ["#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac"], | |
| 10: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"], | |
| 11: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"] | |
| },RdGy: { | |
| 3: ["#ef8a62","#ffffff","#999999"], | |
| 4: ["#ca0020","#f4a582","#bababa","#404040"], | |
| 5: ["#ca0020","#f4a582","#ffffff","#bababa","#404040"], | |
| 6: ["#b2182b","#ef8a62","#fddbc7","#e0e0e0","#999999","#4d4d4d"], | |
| 7: ["#b2182b","#ef8a62","#fddbc7","#ffffff","#e0e0e0","#999999","#4d4d4d"], | |
| 8: ["#b2182b","#d6604d","#f4a582","#fddbc7","#e0e0e0","#bababa","#878787","#4d4d4d"], | |
| 9: ["#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d"], | |
| 10: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"], | |
| 11: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"] | |
| },RdYlBu: { | |
| 3: ["#fc8d59","#ffffbf","#91bfdb"], | |
| 4: ["#d7191c","#fdae61","#abd9e9","#2c7bb6"], | |
| 5: ["#d7191c","#fdae61","#ffffbf","#abd9e9","#2c7bb6"], | |
| 6: ["#d73027","#fc8d59","#fee090","#e0f3f8","#91bfdb","#4575b4"], | |
| 7: ["#d73027","#fc8d59","#fee090","#ffffbf","#e0f3f8","#91bfdb","#4575b4"], | |
| 8: ["#d73027","#f46d43","#fdae61","#fee090","#e0f3f8","#abd9e9","#74add1","#4575b4"], | |
| 9: ["#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4"], | |
| 10: ["#a50026","#d73027","#f46d43","#fdae61","#fee090","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"], | |
| 11: ["#a50026","#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"] | |
| },Spectral: { | |
| 3: ["#fc8d59","#ffffbf","#99d594"], | |
| 4: ["#d7191c","#fdae61","#abdda4","#2b83ba"], | |
| 5: ["#d7191c","#fdae61","#ffffbf","#abdda4","#2b83ba"], | |
| 6: ["#d53e4f","#fc8d59","#fee08b","#e6f598","#99d594","#3288bd"], | |
| 7: ["#d53e4f","#fc8d59","#fee08b","#ffffbf","#e6f598","#99d594","#3288bd"], | |
| 8: ["#d53e4f","#f46d43","#fdae61","#fee08b","#e6f598","#abdda4","#66c2a5","#3288bd"], | |
| 9: ["#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd"], | |
| 10: ["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"], | |
| 11: ["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"] | |
| },RdYlGn: { | |
| 3: ["#fc8d59","#ffffbf","#91cf60"], | |
| 4: ["#d7191c","#fdae61","#a6d96a","#1a9641"], | |
| 5: ["#d7191c","#fdae61","#ffffbf","#a6d96a","#1a9641"], | |
| 6: ["#d73027","#fc8d59","#fee08b","#d9ef8b","#91cf60","#1a9850"], | |
| 7: ["#d73027","#fc8d59","#fee08b","#ffffbf","#d9ef8b","#91cf60","#1a9850"], | |
| 8: ["#d73027","#f46d43","#fdae61","#fee08b","#d9ef8b","#a6d96a","#66bd63","#1a9850"], | |
| 9: ["#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850"], | |
| 10: ["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"], | |
| 11: ["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"] | |
| }}; |
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
| Sample,CDH3,COMP,MMP13,CXCL14,PDGFD,DIO2,IGLC3,IGHG2,RP11-731F5.2,IGHGP | |
| Norm1,68.0090578441956,7.88510815584877,1.97127703896219,12.8133007532542,43.3680948571682,34.4973481818384,46.3250104156115,29.5691555844329,5.91383111688658,2.95691555844329 | |
| Norm2,90.2840571212405,5.37405101912146,4.29924081529717,5.37405101912146,41.9175979491474,27.9450652994316,219.261281580155,304.171287682274,62.3389918218089,17.1969632611887 | |
| Norm3,271.537010398429,10.202257616126,12.5566247583089,71.4158033128817,52.5808661754184,46.302553796264,367.281274180535,418.292562261164,109.870466635203,15.6957809478861 | |
| Norm4,71.9420186396439,18.3525557754194,0.734102231016774,15.4161468513523,46.2484405540568,8.80922677220129,332.548310650599,182.791455523177,49.1848494781239,16.150249082369 | |
| Norm5,40.1239338346327,11.6488840165063,9.06024312394931,12.9432044627847,25.8864089255695,51.7728178511389,86.7194699006577,240.743603007796,72.4819449915945,19.4148066941771 | |
| Norm6,295.891252851361,42.4018617793227,5.53067762338992,16.5920328701698,53.4632170261026,23.9662697013563,201.869733253732,279.299219981191,70.9770295001707,8.29601643508489 | |
| Norm8,53.8112301464391,8.12244983342478,9.13775606260287,7.10714360424668,35.5357180212334,53.8112301464391,73.102048500823,67.0102111257544,15.2295934376715,17.2602058960276 | |
| IPF1,195.316832801279,26.2365894807688,10.2031181314101,85.9977099647422,386.260900689096,96.2008280961523,4487.91438951595,3703.73188170186,1071.32740379806,26.2365894807688 | |
| IPF2,479.906746016322,166.738201288522,110.08996623537,489.526257629121,464.943061285301,327.063394835177,2433.73643803823,7611.17135497156,2292.65026771717,277.897002147536 | |
| IPF3,972.738447391894,202.803403238531,104.991142384549,769.935044153363,195.624521707964,152.551232524559,8729.51994117006,3057.30617183043,998.761892940201,184.856199412113 | |
| IPF4,678.533260654831,253.306891106992,83.2163432878567,383.160965248483,163.689290643147,249.64902986357,1102.84516489181,4346.45362249651,1100.10176895925,161.860360021435 | |
| IPF5,724.447915182007,168.042042181393,121.986075065011,567.608675812706,185.468624333538,322.391769814673,1349.31536092319,2816.88252930736,522.797464564335,728.182182786038 | |
| IPF6,333.327397552599,158.256331182243,102.866615268458,362.011357579381,159.245433252132,357.065847229936,4932.65202253654,4983.09622810088,1271.98526187728,856.56239252389 | |
| IPF7,176.771212288023,44.4291282221234,5.67180360282426,69.9522444348325,245.778156122385,203.239629101203,1097.49399714649,4633.86354350742,1509.64505895172,7.56240480376568 | |
| IPF8,518.698907755569,292.246287260512,29.8366628354973,67.3237520390709,145.358100993448,194.320829749136,2549.88710847981,1142.97369939059,283.065775618821,112.461267610721 |
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
| <!-- get rid of legend --> | |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .bar { | |
| fill: steelblue; | |
| } | |
| .x.axis path { | |
| display: none; | |
| } | |
| .y.axis path { | |
| display: none; | |
| } | |
| .legend line { | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="colorbrewer.js"></script> | |
| <script src="barchart.js"></script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Great viz... but why not in 3D?