Skip to content

Instantly share code, notes, and snippets.

@meurig

meurig/.block

Forked from mbostock/.block
Last active May 24, 2017 16:39
Show Gist options
  • Save meurig/9f96d80b432beaa5547c6fee2d732bf7 to your computer and use it in GitHub Desktop.
Save meurig/9f96d80b432beaa5547c6fee2d732bf7 to your computer and use it in GitHub Desktop.
Download ZIP
Normalized Stacked Bar Chart
Raw
.block
license: gpl-3.0
Raw
README.md

This variation of a stacked bar chart shows percentages rather than absolute numbers. This fork is simply a sandbox area for me to play with and better understand the code.

Raw
data.tsv
Name undefined_genus_of_Enterobacteriaceae Blautia Barnesiella undefined_genus_of_unclassified_Mollicutes undefined_genus_of_Lachnospiraceae Akkermansia Clostridium_difficile unclassified_Lachnospiraceae Coprobacillus Enterococcus Other
0 0.0000235060 0.0008667700 0.0927450000 0.0014446000 0.2195800000 0.0330820000 0.0000000000 0.0325050000 0.0001444600 0.0000368320 0.1113800000
2 0.8691400000 0.0000401150 0.0001678900 0.0003368800 0.0001146700 0.0001971600 0.0000000000 0.0000754130 0.0002530800 0.0023581000 0.0040425000
3 0.4150100000 0.0072401000 0.0001288700 0.0005171600 0.0000880170 0.0517160000 0.0000000000 0.0000578730 0.0018101000 0.0010343000 0.0025858000
4 5.0998000000 0.0047352000 0.0023599000 0.0045446000 0.0016118000 0.0094701000 0.0000000000 0.0010598000 1.0891000000 0.1515200000 0.4261700000
5 0.4291600000 2.3947000000 0.0008554900 0.0016475000 0.0005843100 0.5064200000 0.0000000000 0.0003841900 0.0017166000 0.0171660000 0.0909810000
6 0.2401800000 2.6006000000 0.0006879400 0.0013248000 0.0004698600 0.3119600000 0.0000000000 0.0003090600 0.0010370000 0.0013804000 0.0124230000
7 0.1422500000 0.1188700000 0.0001069300 0.0229570000 0.0000730330 0.2845100000 0.0000000000 0.0000480140 0.0001611900 0.0038620000 0.0025747000
9 0.4690200000 0.1099600000 0.0001201800 0.1162300000 0.0000820790 0.0001411300 0.0000000000 0.0000539430 0.0001811600 0.0004822800 0.0103690000
12 0.5817900000 0.1645000000 0.0001880300 0.2248700000 0.0001284200 0.0002208100 0.0000000000 0.0000844290 0.0002834400 0.0000962530 0.0060367000
16 0.0032515000 0.0046870000 0.0000070144 0.0191420000 0.0000047911 0.0000082377 0.0000000000 0.0000031502 0.0000105740 0.0000140750 0.0011964000
23 0.0150720000 0.0165070000 0.0000162580 0.0440090000 0.0000111050 0.0000190940 0.0000000000 0.0000073034 0.0000245090 0.0000326230 0.0031645000
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
fill: steelblue;
}
.axis path {
display: none;
}
.legend {
font-size: 12px;
}
rect {
stroke-width: 2;
}
</style>
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = { top: 20, right: 300, bottom: 30, left: 40 },
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var g2 = svg.append("g")
.attr("transform", "translate(" + (margin.left + 650) + "," + (margin.top + 125) + ")")
.attr('class', 'legend');
var x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1)
.align(0.1);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
//var z = d3.scaleOrdinal()
// .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var z = d3.scaleOrdinal(d3.schemeCategory20b);
var stack = d3.stack()
.offset(d3.stackOffsetExpand);
d3.tsv("data.tsv", type, function (error, data) {
if (error) throw error;
//data.sort(function (a, b) { return b[data.columns[1]] / b.total - a[data.columns[1]] / a.total; });
x.domain(data.map(function (d) { return d.Name; }));
z.domain(data.columns.slice(1));
var serie = g.selectAll(".serie")
.data(stack.keys(data.columns.slice(1))(data))
.enter().append("g")
.attr("class", "serie")
.attr("fill", function (d) { return z(d.key); });
serie.selectAll("rect")
.data(function (d) { return d; })
.enter().append("rect")
.attr("x", function (d) { return x(d.data.Name); })
.attr("y", function (d) { return y(d[1]); })
.attr("height", function (d) { return y(d[0]) - y(d[1]); })
.attr("width", x.bandwidth());
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(10, "%"));
/*
var legendSide = serie.append("g")
.attr("class", "legendSide")
.attr("transform", function (d) { var d = d[d.length - 1]; return "translate(" + (x(d.data.Name) + x.bandwidth()) + "," + ((y(d[0]) + y(d[1])) / 2) + ")"; });
legendSide.append("line")
.attr("x1", -6)
.attr("x2", 6)
.attr("stroke", "#000");
legendSide.append("text")
.attr("x", 9)
.attr("dy", "0.35em")
.attr("fill", "#000")
.style("font", "10px sans-serif")
.text(function (d) { return d.key; });
*/
var legendRectSize = 18;
var legendSpacing = 4;
var legend = g2.selectAll('.legend')
.data(z.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function (d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * z.domain().length / 2;
var horz = -2 * legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', z)
.style('stroke', z);
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function (d) { return d; });
});
function type(d, i, columns) {
for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
d.total = t;
return d;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment