Skip to content

Instantly share code, notes, and snippets.

@terrysmith2000

terrysmith2000/_.md

Created August 7, 2013 13:43
Show Gist options
  • Save terrysmith2000/6174161 to your computer and use it in GitHub Desktop.
Save terrysmith2000/6174161 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":3.402088136,"pop2":0.070912528,"pop3":0.01,"pop4":0.070912528},
{"key":"Instrument 1_CS","pop1":2.512879903,"pop2":0.680260137,"pop3":0.01,"pop4":0.680260137},
{"key":"Instrument 1_Voldemort","pop1":3.22788787,"pop2":0.412150956,"pop3":0.01,"pop4":0.412150956},
{"key":"Instrument 1_Potter","pop1":2.451391155,"pop2":0.714412018,"pop3":0.01,"pop4":0.714412018},
{"key":"Instrument 1_Dumbledore","pop1":2.980802278,"pop2":0.397469301,"pop3":0.01,"pop4":0.397469301},
{"key":"Instrument 2_ML","pop1":0.940977965,"pop2":0.916479606,"pop3":0.01,"pop4":0.916479606},
{"key":"Instrument 2_CS","pop1":1.88497724,"pop2":0.323275887,"pop3":0.01,"pop4":0.323275887},
{"key":"Instrument 2_Voldemort","pop1":1.55699125,"pop2":0.594370555,"pop3":0.01,"pop4":0.594370555},
{"key":"Instrument 2_Potter","pop1":1.132503913,"pop2":0.86239265,"pop3":0.01,"pop4":0.86239265},
{"key":"Instrument 2_Dumbledore","pop1":1.584892106,"pop2":0.483443352,"pop3":0.01,"pop4":0.483443352},
{"key":"Instrument 3_ML","pop1":0.799255164,"pop2":0.251085725,"pop3":0.01,"pop4":0.251085725},
{"key":"Instrument 3_CS","pop1":0.031653966,"pop2":0.445505878,"pop3":0.01,"pop4":0.445505878},
{"key":"Instrument 3_Voldemort","pop1":0.302280728,"pop2":0.655979757,"pop3":0.01,"pop4":0.655979757},
{"key":"Instrument 3_Potter","pop1":0,"pop2":0.566220103,"pop3":0.01,"pop4":0.566220103},
{"key":"Instrument 3_Dumbledore","pop1":0.301773031,"pop2":0.337071777,"pop3":0.01,"pop4":0.337071777},
{"key":"Instrument 4_ML","pop1":4.377634545,"pop2":0.340796468,"pop3":0.01,"pop4":0.340796468},
{"key":"Instrument 4_CS","pop1":4.152086418,"pop2":0.34583288,"pop3":0.01,"pop4":0.34583288},
{"key":"Instrument 4_Voldemort","pop1":4.146748182,"pop2":0.235852865,"pop3":0.01,"pop4":0.235852865},
{"key":"Instrument 4_Potter","pop1":3.863590082,"pop2":0.658249937,"pop3":0.01,"pop4":0.658249937},
{"key":"Instrument 4_Dumbledore","pop1":3.705630837,"pop2":0.690456505,"pop3":0.01,"pop4":0.690456505},
{"key":"Instrument 5_ML","pop1":5.977528719,"pop2":0.513476844,"pop3":0.01,"pop4":0.513476844},
{"key":"Instrument 5_CS","pop1":6.03583085,"pop2":0.345082129,"pop3":0.01,"pop4":0.345082129},
{"key":"Instrument 5_Voldemort","pop1":6.19181594,"pop2":0.403363604,"pop3":0.01,"pop4":0.403363604},
{"key":"Instrument 5_Potter","pop1":5.951282882,"pop2":0.478637212,"pop3":0.01,"pop4":0.478637212},
{"key":"Instrument 5_Dumbledore","pop1":5.468542424,"pop2":0.508341046,"pop3":0.01,"pop4":0.508341046},
{"key":"Insturment 6_ML","pop1":0.314163215,"pop2":0.824266949,"pop3":0.01,"pop4":0.824266949},
{"key":"Insturment 6_CS","pop1":0.620745602,"pop2":0.608772905,"pop3":0.01,"pop4":0.608772905},
{"key":"Insturment 6_Voldemort","pop1":0.289066481,"pop2":0.77320731,"pop3":0.01,"pop4":0.77320731},
{"key":"Insturment 6_Potter","pop1":0.353873122,"pop2":0.531056709,"pop3":0.01,"pop4":0.531056709},
{"key":"Insturment 6_Dumbledore","pop1":1.119564963,"pop2":0.211635449,"pop3":0.01,"pop4":0.211635449}]
;
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);
console.log(yStackMax);
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