Skip to content

Instantly share code, notes, and snippets.

@emilyinamillion

emilyinamillion/.block

Last active June 11, 2016 19:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emilyinamillion/d6172c0ed0e017fccef59ac1408e0476 to your computer and use it in GitHub Desktop.
Save emilyinamillion/d6172c0ed0e017fccef59ac1408e0476 to your computer and use it in GitHub Desktop.
Download ZIP
Stacked-to-Multiples
Raw
.block
license: gpl-3.0
Raw
data.tsv
group date value
1 2008-01 10
1 2008-04 8
1 2008-07 14
1 2008-10 9
1 2009-01 10
1 2009-04 8
1 2009-07 14
1 2009-10 9
2 2008-01 3
2 2008-04 3.5
2 2008-07 5
2 2008-10 11
2 2009-01 3
2 2009-04 3.5
2 2009-07 4.5
2 2009-10 10.5
3 2008-01 10
3 2008-04 8
3 2008-07 14
3 2008-10 9
3 2009-01 10
3 2009-04 8
3 2009-07 14
3 2009-10 9
4 2008-01 3
4 2008-04 3.5
4 2008-07 5
4 2008-10 11
4 2009-01 3
4 2009-04 3.5
4 2009-07 4.5
4 2009-10 10.5
Raw
dataford3.csv
group date value
Twitter disappointed 0
Twitter found 0
Twitter friends 0
Twitter gift 0
Twitter guys 0
Twitter hey 0
Twitter put 0
Twitter send 0
Twitter wings 0
Twitter charge 0
Twitter dinner 0
Twitter fuck 0
Twitter game 0
Twitter grill 0
Twitter last 0
Twitter shit 0
Twitter worst 0
Twitter steakhouse 0
Twitter stop 0
Twitter why 0
Twitter don't 0
Twitter need 0
Twitter when 0
Twitter today 0
Twitter location 0
Twitter not 0
Twitter staff 0.158791855
Twitter taste 0.16001797
Twitter right 0.16003807
Twitter something 0.160118471
Twitter drink 0.16174659
Twitter while 0.162972704
Twitter little 0.171701231
Twitter night 0.173002721
Twitter nothing 0.177816728
Twitter manager 0.178042855
Twitter ok 0.178786564
Twitter salad 0.179555398
Twitter still 0.179786551
Twitter should 0.180801612
Twitter nice 0.181253868
Twitter take 0.181409645
Twitter ever 0.18441463
Twitter think 0.186972385
Twitter tried 0.18746484
Twitter waitress 0.187640717
Twitter pretty 0.189932144
Twitter give 0.191102983
Twitter cheese 0.19214317
Twitter say 0.195263731
Twitter sauce 0.195982315
Twitter meal 0.197901887
Twitter experience 0.202449565
Twitter any 0.202942021
Twitter bar 0.204695767
Twitter another 0.205685703
Twitter wait 0.206107808
Twitter down 0.20886154
Twitter who 0.209539923
Twitter wasn't 0.211278594
Twitter told 0.2118414
Twitter come 0.214710709
Twitter before 0.215263465
Twitter going 0.220625203
Twitter server 0.22214277
Twitter way 0.224981929
Twitter well 0.229424081
Twitter know 0.231424054
Twitter pizza 0.23191651
Twitter took 0.232559717
Twitter two 0.232856196
Twitter how 0.234042109
Twitter menu 0.236901368
Twitter off 0.239449073
Twitter eat 0.243996751
Twitter people 0.246549481
Twitter much 0.257529234
Twitter first 0.258790524
Twitter great 0.268096932
Twitter again 0.272810437
Twitter could 0.27990582
Twitter bad 0.280734955
Twitter went 0.280946008
Twitter asked 0.285654488
Twitter did 0.286644424
Twitter better 0.28972981
Twitter chicken 0.299438224
Twitter table 0.301940703
Twitter said 0.304860262
Twitter other 0.316035992
Twitter then 0.318010841
Twitter over 0.323744433
Twitter more 0.32865894
Twitter never 0.334176454
Twitter want 0.342263905
Twitter minutes 0.343070808
Twitter made 0.36930917
Twitter came 0.381135628
Twitter restaurant 0.388602865
Twitter really 0.392070156
Twitter after 0.397979625
Twitter even 0.410265893
Twitter he 0.478380564
Twitter very 0.523852321
Twitter she 0.525455314
Twitter time 0.535304429
Twitter back 0.537676257
Twitter here 0.53961593
Twitter get 0.545424898
Twitter service 0.65989071
Twitter me 0.660840446
Twitter out 0.697870104
Twitter like 0.69968415
Twitter good 0.73347767
Twitter place 0.815572054
Twitter order 0.973837858
Twitter food 1.342434385
Yelp disappointed 0.193143409
Yelp found 0.193143409
Yelp friends 0.193143409
Yelp gift 0.193143409
Yelp guys 0.193143409
Yelp hey 0.193143409
Yelp put 0.193143409
Yelp send 0.193143409
Yelp wings 0.193143409
Yelp charge 0.241429261
Yelp dinner 0.241429261
Yelp fuck 0.241429261
Yelp game 0.241429261
Yelp grill 0.241429261
Yelp last 0.241429261
Yelp shit 0.241429261
Yelp worst 0.241429261
Yelp steakhouse 0.289715113
Yelp stop 0.289715113
Yelp why 0.289715113
Yelp don't 0.338000966
Yelp need 0.338000966
Yelp when 0.338000966
Yelp today 0.386286818
Yelp location 0.4
Yelp not 1.014002897
Yelp staff 0
Yelp taste 0
Yelp right 0
Yelp something 0
Yelp drink 0.579343409
Yelp while 0
Yelp little 0
Yelp night 0
Yelp nothing 0.241429261
Yelp manager 0
Yelp ok 0
Yelp salad 0.193143409
Yelp still 0
Yelp should 0.241429261
Yelp nice 0
Yelp take 0.289715113
Yelp ever 0
Yelp think 0
Yelp tried 0.144857557
Yelp waitress 0
Yelp pretty 0
Yelp give 0
Yelp cheese 0
Yelp say 0
Yelp sauce 0
Yelp meal 0
Yelp experience 0
Yelp any 0
Yelp bar 0.386286818
Yelp another 0
Yelp wait 0.289715113
Yelp down 0.241429261
Yelp who 0
Yelp wasn't 0
Yelp told 0.241429261
Yelp come 0.289715113
Yelp before 0
Yelp going 0.193143409
Yelp server 0
Yelp way 0.193143409
Yelp well 0
Yelp know 0.193143409
Yelp pizza 0
Yelp took 0
Yelp two 0
Yelp how 0.193143409
Yelp menu 0
Yelp off 0
Yelp eat 0.579429261
Yelp people 0
Yelp much 0
Yelp first 0
Yelp great 0
Yelp again 0
Yelp could 0
Yelp bad 0.579430227
Yelp went 0.144857557
Yelp asked 0
Yelp did 0
Yelp better 0
Yelp chicken 0.482858522
Yelp table 0.193143409
Yelp said 0.193143409
Yelp other 0
Yelp then 0
Yelp over 0.193143409
Yelp more 0
Yelp never 0.193143409
Yelp want 0.386286818
Yelp minutes 0.241429261
Yelp made 0.241429261
Yelp came 0
Yelp restaurant 0.676001931
Yelp really 0.193143409
Yelp after 0.241429261
Yelp even 0.193143409
Yelp he 0
Yelp very 0
Yelp she 0
Yelp time 0.144857557
Yelp back 0.193143409
Yelp here 0.241429261
Yelp get 0.86914534
Yelp service 0.847716079
Yelp me 1.255432158
Yelp out 0.338000966
Yelp like 0.676001931
Yelp good 0.241429261
Yelp place 0
Yelp order 0.578000966
Yelp food 0.482858522
Raw
dataford32.csv
group date value
Twitter again 0.272810437
Twitter another 0.205685703
Twitter any 0.202942021
Twitter asked 0.285654488
Twitter before 0.215263465
Twitter better 0.28972981
Twitter came 0.381135628
Twitter cheese 0.19214317
Twitter could 0.27990582
Twitter did 0.286644424
Twitter ever 0.18441463
Twitter experience 0.202449565
Twitter first 0.258790524
Twitter give 0.191102983
Twitter great 0.268096932
Twitter he 0.478380564
Twitter little 0.171701231
Twitter manager 0.178042855
Twitter meal 0.197901887
Twitter menu 0.236901368
Twitter more 0.32865894
Twitter much 0.257529234
Twitter nice 0.181253868
Twitter night 0.173002721
Twitter off 0.239449073
Twitter ok 0.178786564
Twitter other 0.316035992
Twitter people 0.246549481
Twitter pizza 0.23191651
Twitter place 0.815572054
Twitter pretty 0.189932144
Twitter right 0.16003807
Twitter sauce 0.195982315
Twitter say 0.195263731
Twitter server 0.22214277
Twitter she 0.525455314
Twitter something 0.160118471
Twitter staff 0.158791855
Twitter still 0.179786551
Twitter taste 0.16001797
Twitter then 0.318010841
Twitter think 0.186972385
Twitter took 0.232559717
Twitter two 0.232856196
Twitter very 0.523852321
Twitter waitress 0.187640717
Twitter wasn't 0.211278594
Twitter well 0.229424081
Twitter while 0.162972704
Twitter who 0.209539923
Twitter time 0.535304429
Twitter tried 0.18746484
Twitter went 0.280946008
Twitter back 0.537676257
Twitter disappointed 0
Twitter even 0.410265893
Twitter found 0
Twitter friends 0
Twitter gift 0
Twitter going 0.220625203
Twitter guys 0
Twitter hey 0
Twitter how 0.234042109
Twitter know 0.231424054
Twitter never 0.334176454
Twitter over 0.323744433
Twitter put 0
Twitter really 0.392070156
Twitter said 0.304860262
Twitter salad 0.179555398
Twitter send 0
Twitter table 0.301940703
Twitter way 0.224981929
Twitter wings 0
Twitter after 0.397979625
Twitter charge 0
Twitter dinner 0
Twitter down 0.20886154
Twitter fuck 0
Twitter game 0
Twitter good 0.73347767
Twitter grill 0
Twitter here 0.53961593
Twitter last 0
Twitter made 0.36930917
Twitter minutes 0.343070808
Twitter nothing 0.177816728
Twitter shit 0
Twitter should 0.180801612
Twitter told 0.2118414
Twitter worst 0
Twitter come 0.214710709
Twitter steakhouse 0
Twitter stop 0
Twitter take 0.181409645
Twitter wait 0.206107808
Twitter why 0
Twitter don't 0
Twitter need 0
Twitter out 0.697870104
Twitter when 0
Twitter bar 0.204695767
Twitter today 0
Twitter want 0.342263905
Twitter location 0
Twitter chicken 0.299438224
Twitter food 1.342434385
Twitter order 0.973837858
Twitter drink 0.16174659
Twitter eat 0.243996751
Twitter bad 0.280734955
Twitter like 0.69968415
Twitter restaurant 0.388602865
Twitter service 0.65989071
Twitter get 0.545424898
Twitter not 0
Twitter me 0.660840446
Yelp again 0
Yelp another 0
Yelp any 0
Yelp asked 0
Yelp before 0
Yelp better 0
Yelp came 0
Yelp cheese 0
Yelp could 0
Yelp did 0
Yelp ever 0
Yelp experience 0
Yelp first 0
Yelp give 0
Yelp great 0
Yelp he 0
Yelp little 0
Yelp manager 0
Yelp meal 0
Yelp menu 0
Yelp more 0
Yelp much 0
Yelp nice 0
Yelp night 0
Yelp off 0
Yelp ok 0
Yelp other 0
Yelp people 0
Yelp pizza 0
Yelp place 0
Yelp pretty 0
Yelp right 0
Yelp sauce 0
Yelp say 0
Yelp server 0
Yelp she 0
Yelp something 0
Yelp staff 0
Yelp still 0
Yelp taste 0
Yelp then 0
Yelp think 0
Yelp took 0
Yelp two 0
Yelp very 0
Yelp waitress 0
Yelp wasn't 0
Yelp well 0
Yelp while 0
Yelp who 0
Yelp time 0.144857557
Yelp tried 0.144857557
Yelp went 0.144857557
Yelp back 0.193143409
Yelp disappointed 0.193143409
Yelp even 0.193143409
Yelp found 0.193143409
Yelp friends 0.193143409
Yelp gift 0.193143409
Yelp going 0.193143409
Yelp guys 0.193143409
Yelp hey 0.193143409
Yelp how 0.193143409
Yelp know 0.193143409
Yelp never 0.193143409
Yelp over 0.193143409
Yelp put 0.193143409
Yelp really 0.193143409
Yelp said 0.193143409
Yelp salad 0.193143409
Yelp send 0.193143409
Yelp table 0.193143409
Yelp way 0.193143409
Yelp wings 0.193143409
Yelp after 0.241429261
Yelp charge 0.241429261
Yelp dinner 0.241429261
Yelp down 0.241429261
Yelp fuck 0.241429261
Yelp game 0.241429261
Yelp good 0.241429261
Yelp grill 0.241429261
Yelp here 0.241429261
Yelp last 0.241429261
Yelp made 0.241429261
Yelp minutes 0.241429261
Yelp nothing 0.241429261
Yelp shit 0.241429261
Yelp should 0.241429261
Yelp told 0.241429261
Yelp worst 0.241429261
Yelp come 0.289715113
Yelp steakhouse 0.289715113
Yelp stop 0.289715113
Yelp take 0.289715113
Yelp wait 0.289715113
Yelp why 0.289715113
Yelp don't 0.338000966
Yelp need 0.338000966
Yelp out 0.338000966
Yelp when 0.338000966
Yelp bar 0.386286818
Yelp today 0.386286818
Yelp want 0.386286818
Yelp location 0.4
Yelp chicken 0.482858522
Yelp food 0.482858522
Yelp order 0.578000966
Yelp drink 0.579343409
Yelp eat 0.579429261
Yelp bad 0.579430227
Yelp like 0.676001931
Yelp restaurant 0.676001931
Yelp service 0.847716079
Yelp get 0.86914534
Yelp not 1.014002897
Yelp me 1.255432158
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
text {
font: 10px sans-serif;
}
.axis path {
display: none;
}
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.group-label {
font-weight: bold;
text-anchor: end;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
</style>
<form>
<label><input type="radio" name="mode" value="multiples" checked> Multiples</label>
<label><input type="radio" name="mode" value="stacked"> Stacked</label>
</form>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 10, right: 20, bottom: 20, left: 60},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var y0 = d3.scale.ordinal()
.rangeRoundBands([height, 0], .2);
var y1 = d3.scale.linear();
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1, 0);
var nest = d3.nest()
.key(function(d) { return d.group; });
var stack = d3.layout.stack()
.values(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.value; })
.out(function(d, y0) { d.valueOffset = y0; });
var color = d3.scale.ordinal()
.range(["#33BBEE", "#C43123"]);
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("dataford32.csv", function(error, data) {
//data.forEach(function(d) {
// var y0 = 0;
// d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
// d.total = d.ages[d.ages.length - 1].y1;
// });
// data.sort(function(a, b) { return b.total + a.total; });
data.forEach(function(d) {
d.date = d.date;
d.value = +d.value;
});
//data.sort(function(a, b) { return b.total - a.total; });
var dataByGroup = nest.entries(data);
stack(dataByGroup);
x.domain(dataByGroup[0].values.map(function(d) { return d.date; }));
// y.domain([0, d3.max(data, function(d) { return d.total; })]);
y0.domain(dataByGroup.map(function(d) { return d.key; }));
y1.domain([0, d3.max(data, function(d) { return d.value; })]).range([y0.rangeBand(), 0]);
//y1.domain(dataByGroup.map(function(d) { return d.key; }));
var group = svg.selectAll(".group")
.data(dataByGroup)
.enter().append("g")
.attr("class", "group")
.attr("transform", function(d) { return "translate(0," + y0(d.key) + ")"; });
group.append("text")
.attr("class", "group-label")
.attr("x", 10)
.attr("y", function(d) { return y1(d.values[0].value / 2); })
.attr("dy", ".35em")
.text(function(d) { return d.key + " Vocab"; });
group.selectAll("rect")
.data(function(d) { return d.values; })
.enter().append("rect")
.style("fill", function(d) { return color(d.group); })
.attr("x", function(d) { return x(d.date); })
.attr("y", function(d) { return y1(d.value); })
.attr("width", x.rangeBand())
.attr("height", function(d) { return y0.rangeBand() - y1(d.value); });
group.filter(function(d, i) { return !i; }).append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + y0.rangeBand() + ")")
;
d3.selectAll("input").on("change", change);
var timeout = setTimeout(function() {
d3.select("input[value=\"stacked\"]").property("checked", true).each(change);
}, 2000);
function change() {
clearTimeout(timeout);
if (this.value === "multiples") transitionMultiples();
else transitionStacked();
}
function transitionMultiples() {
var t = svg.transition().duration(750),
g = t.selectAll(".group").attr("transform", function(d) { return "translate(0," + y0(d.key) + ")"; });
g.selectAll("rect").attr("y", function(d) { return y1(d.value); });
g.select(".group-label").attr("y", function(d) { return y1(d.values[0].value / 2); })
}
function transitionStacked() {
var t = svg.transition().duration(750),
g = t.selectAll(".group").attr("transform", "translate(0," + y0(y0.domain()[0]) + ")");
g.selectAll("rect").attr("y", function(d) { return y1(d.value + d.valueOffset); });
g.select(".group-label").attr("y", function(d) { return y1(d.values[0].value / 2 + d.values[0].valueOffset); })
}
// .on("mouseover", function(d) {
// d3.select(this).classed("node--hover", true);
// tooltip.html("");
// //if (d.depth = 0) return;
// if (d.depth < 2) return;
// tooltip.append("h3").attr("class", "tooltip_title");
// tooltip.append("img").attr("class", "tooltip_img");
// tooltip.append("pre").attr("class", "tooltip_body");
// tooltip.select(".tooltip_title")
// .text("Justice " + d.data.name)
// tooltip.select("img")
// .attr("src", d.imgUrl);
// tooltip.select(".tooltip_body")
// .text(
// "Appointed By: " + d.data.Appointedby + ', '+ d.data.partyname + "\n" +
// "Years: " + d.data.Start + " - " +d.data.End +"\n" +
// "Reason for Termination: " + d.data.Termcompletion + "\n" +
// "Home State: " + d.data.State + "\n\n" +
// "Total Words in Sample: " + d.data.Totalwords + "\n" +
// "Number of Unique Words: " + d.data.Numunique + "\n"
// );
// return tooltip.style("visibility", "visible");
// })
// .on("mousemove", function(d) {
// return tooltip.style("top", (d3.event.pageY-52) + "px").style("left", (d3.event.pageX+18) + "px");
// })
// .on("mouseout", function(d) {
// d3.select(this).classed("node--hover", false);
// return tooltip.style("visibility", "hidden")
});
// });
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment