Skip to content

Instantly share code, notes, and snippets.

@terrysmith2000

terrysmith2000/_.md

Created August 7, 2013 12:14
Show Gist options
  • Save terrysmith2000/6173553 to your computer and use it in GitHub Desktop.
Save terrysmith2000/6173553 to your computer and use it in GitHub Desktop.
Download ZIP
horizontal stacked bar, copy
Raw
_.md
Raw
config.json
{"description":"horizontal stacked bar, copy","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"test.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/CnFTxTB.png"}
Raw
inlet.js
var data =
[{"key":"Instrument 1_ML","pop1":89.67490483,"pop2":0.341140413,"pop3":0.351140413},
{"key":"Instrument 1_CS","pop1":93.00813113,"pop2":93.6877248,"pop3":93.6977248},
{"key":"Instrument 1_Voldemort","pop1":94.02385846,"pop2":94.79530986,"pop3":94.80530986},
{"key":"Instrument 1_Potter","pop1":102.442477,"pop2":102.7865178,"pop3":102.7965178},
{"key":"Instrument 1_Dumbledore","pop1":90.31193866,"pop2":90.91991973,"pop3":90.92991973},
{"key":"Instrument 2_ML","pop1":92.90905014,"pop2":92.97877967,"pop3":92.98877967},
{"key":"Instrument 2_CS","pop1":97.17606498,"pop2":97.61239582,"pop3":97.62239582},
{"key":"Instrument 2_Voldemort","pop1":94.99123225,"pop2":95.61776132,"pop3":95.62776132},
{"key":"Instrument 2_Potter","pop1":95.13440209,"pop2":95.84275627,"pop3":95.85275627},
{"key":"Instrument 2_Dumbledore","pop1":92.64063978,"pop2":93.13518115,"pop3":93.14518115},
{"key":"Instrument 3_ML","pop1":91.44614928,"pop2":92.27260693,"pop3":92.28260693},
{"key":"Instrument 3_CS","pop1":96.40909088,"pop2":97.18396133,"pop3":97.19396133},
{"key":"Instrument 3_Voldemort","pop1":97.3045313,"pop2":97.45550807,"pop3":97.46550807},
{"key":"Instrument 3_Potter","pop1":92.26913342,"pop2":92.89280292,"pop3":92.90280292},
{"key":"Instrument 3_Dumbledore","pop1":101.3175405,"pop2":101.7616994,"pop3":101.7716994},
{"key":"Instrument 4_ML","pop1":95.92085447,"pop2":96.24504825,"pop3":96.25504825},
{"key":"Instrument 4_CS","pop1":97.84203441,"pop2":98.29655544,"pop3":98.30655544},
{"key":"Instrument 4_Voldemort","pop1":97.15339911,"pop2":97.84320185,"pop3":97.85320185},
{"key":"Instrument 4_Potter","pop1":100.3449604,"pop2":100.8167278,"pop3":100.8267278},
{"key":"Instrument 4_Dumbledore","pop1":-0.971864015,"pop2":0.010053878,"pop3":0.020053878},
{"key":"Instrument 5_ML","pop1":-0.660360806,"pop2":0.098744952,"pop3":0.108744952},
{"key":"Instrument 5_CS","pop1":-0.702135048,"pop2":-0.199111665,"pop3":-0.189111665},
{"key":"Instrument 5_Voldemort","pop1":-0.695579921,"pop2":0.059712025,"pop3":0.069712025},
{"key":"Instrument 5_Potter","pop1":-0.329802146,"pop2":-0.123099934,"pop3":-0.113099934},
{"key":"Instrument 5_Dumbledore","pop1":-0.593671431,"pop2":0.08185175,"pop3":0.09185175},
{"key":"Insturment 6_ML","pop1":-0.953026062,"pop2":-0.266235902,"pop3":-0.256235902},
{"key":"Insturment 6_CS","pop1":-0.55126477,"pop2":0.124601498,"pop3":0.134601498},
{"key":"Insturment 6_Voldemort","pop1":-0.172756518,"pop2":0.111598003,"pop3":0.121598003},
{"key":"Insturment 6_Potter","pop1":-0.955104218,"pop2":-0.005547166,"pop3":0.004452834},
{"key":"Insturment 6_Dumbledore","pop1":-0.782861009,"pop2":0.002753974,"pop3":0.012753974}]
;
var n =4, // number of layers
m = data.length, // number of samples per layer
stack = d3.layout.stack(),
labels = data.map(function(d) {return d.key;}),
//go through each layer (pop1, pop2 etc, that's the range(n) part)
//then go through each object in data and pull out that objects's population data
//and put it into an array where x is the index and y is the number
layers = stack(d3.range(n).map(function(d) {
var a = [];
for (var i = 0; i < m; ++i) {
a[i] = {x: i, y: data[i]['pop' + (d+1)]};
}
console.log(a);
return a;
})),
//the largest single layer
yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
//the largest stack
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
var margin = {top: 40, right: 10, bottom: 20, left:160},
width = 677 - margin.left - margin.right,
height = 533 - margin.top - margin.bottom;
var y = d3.scale.ordinal()
.domain(d3.range(m))
.rangeRoundBands([2, height], 0.08);
var x = d3.scale.linear()
.domain([0, yStackMax])
.range([0, width]);
var color = d3.scale.linear()
.domain([0, n - 1])
.range(["#aad", "#556"]);
var svg = d3.select("#display").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 layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) {
if(i===0) { return '#' }
if(i===2) { return '#FF0000' }
return color(i); });
layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("y", function(d) { return y(d.x); })
.attr("x", function(d) { return x(d.y0); })
.attr("height", y.rangeBand())
.attr("width", function(d) { return x(d.y); });
var yAxis = d3.svg.axis()
.scale(y)
.tickSize(1)
.tickPadding(6)
.tickValues(labels)
.orient("left");
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
Raw
test.css
.axis text {
font-family: ariel;
font-size:8px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment