[ Launch: love & death ] 5290171 by enjalot
-
-
Save enjalot/5290171 to your computer and use it in GitHub Desktop.
love & death
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
{"description":"love & death","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"form.csv":{"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},"style.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/mFBYLGV.png"} |
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
date | love | weddings | death | funerals | relationship | married | age | |
---|---|---|---|---|---|---|---|---|
2/28/2013 17:34:09 | 3 | 0 | 1 | yes | yes | 27 | ||
2/28/2013 17:46:27 | 1 | 15 | 0 | 5 | yes | yes | 29 | |
2/28/2013 17:46:30 | 10 | 5 | 2 | 5 | yes | no | 37 | |
2/28/2013 17:47:21 | 15 | 1 | 1 | 1 | No | No | 27 | |
2/28/2013 17:49:06 | 5 | 3 | 0 | 0 | yes | no | 23 | |
2/28/2013 17:51:54 | 10 | 18 | 0 | 6 | yes | yes | 34 | |
2/28/2013 17:55:01 | 3 | 25 | 0 | 5 | yes | yes | 33 | |
2/28/2013 17:56:55 | 2 | 3 | 0 | 3 | yes | yes | 31 | |
2/28/2013 18:18:33 | 7 | 25 | 0 | 15 | yes | no | 37 | |
2/28/2013 19:09:36 | 7 | 2 | 1 | 1 | yes | no | 31 | |
2/28/2013 19:16:53 | 9 | 2 | 1 | 1 | No | Yes | 25 | |
2/28/2013 19:42:48 | 2 | 4 | 1 | 2 | Yes | Yes | 42 | |
2/28/2013 21:22:50 | 7 | 23 | 1 | 42 | Yes | No | 56 | |
2/28/2013 22:35:21 | 2 | 10 | 0 | 2 | Yes | No | 33 | |
2/28/2013 22:57:50 | 3 | 3 | 0 | 1 | yes | No | 28 | |
2/28/2013 23:04:19 | 2 | 5 | 1 | 2 | yes | yez | 33 | |
2/28/2013 23:28:35 | 48 | 4 | 1 | 0 | yes | no | 39 | |
2/28/2013 23:44:33 | 1 | 10 | 1 | 2 | Yes | Yes | 39 | |
2/28/2013 23:52:30 | 6 | 3 | 0 | 3 | yes | no | 30 | |
3/1/2013 0:37:50 | 1 | 0 | 0 | 1 | no | no | 28 | |
3/1/2013 3:58:36 | 3 | 10 | 1 | 10 | yes | yes | 35 | |
3/1/2013 5:00:52 | 10 | 1 | 2 | 4 | no | no | 29 | |
3/1/2013 8:08:34 | 5 | 4 | 1 | 2 | yes | no | 29 | |
3/1/2013 11:50:38 | 57 | 15 | 2 | 4 | yes | yes | 31 | |
3/1/2013 11:51:28 | 3 | 5 | 2 | 1 | yes | no | 31 | |
3/1/2013 11:52:28 | 12 | 12 | 6 | 5 | yes | yes | 42 | |
3/1/2013 11:53:10 | 2 | 5 | 0 | 1 | yes | no | 28 | |
3/1/2013 11:53:38 | 5 | 22 | 0 | 6 | yes | yes | 34 | |
3/1/2013 11:55:58 | 2 | 2 | 2 | 1 | yes | no | 25 | |
3/1/2013 11:57:24 | 3 | 1 | 1 | 3 | no | no | 29 | |
3/1/2013 12:00:50 | 20 | 15 | 6 | 5 | yes | yes | 36 | |
3/1/2013 12:25:09 | 6 | 3 | 1 | 1 | no | no | 25 | |
3/1/2013 12:54:17 | 5 | 4 | 0 | 3 | yes | no | 44 | |
3/1/2013 13:19:35 | 5 | 3 | 2 | 1 | Yes | No | 26 | |
3/1/2013 14:42:04 | 20 | 6 | 2 | 2 | No | No | 41 | |
3/1/2013 17:04:57 | 3 | 2 | 0 | 1 | yes | yes | 36 | |
3/3/2013 7:29:03 | 4 | 3 | 0 | 3 | no | no | 27 | |
3/6/2013 4:40:59 | 21 | 5 | 2 | 7 | yes | yes | 43 | |
3/6/2013 17:30:18 | 5 | 3 | 0 | 0 | yes | no | 24 | |
3/26/2013 17:41:01 | 21 | 4 | 2 | 1 | no | no | 27 |
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 questions = [ | |
// "Timestamp", | |
"How old are you?", | |
"How many people have you loved in your life?", | |
"How many people you loved have died?", | |
"How many weddings have you attended?", | |
"How many funerals have you attended?", | |
"Are you in a love-based relationship?", | |
"Are you married?" | |
] | |
var answers = tributary.form.map(function(d) { | |
return { | |
age: +d.age , | |
love: +d.love, | |
death: +d.death, | |
weddings: +d.weddings, | |
funerals: +d.funerals, | |
relationship: d.relationship.toLowerCase() === "yes", | |
married: d.married.toLowerCase() === "yes" | |
} | |
}) | |
var dims = [ | |
"age", | |
"love", | |
"death", | |
"weddings", | |
"funerals", | |
"relationship", | |
"married" | |
] | |
var svg = d3.select("svg"); | |
var cw = 375; | |
var ch = 77; | |
var yspace = 15; | |
answers.sort(function(a,b) { | |
return a["love"] - b["love"] | |
}) | |
var xscale = d3.scale.ordinal() | |
.domain(d3.range(answers.length)) | |
.rangeBands([0, cw], 0.308); | |
var bg = svg.selectAll("rect.bg") | |
.data(answers) | |
bg.enter() | |
.append("rect") | |
.classed("bg", true) | |
bg.attr({ | |
x: function(d,i) { return xscale(i) }, | |
y: 0, | |
width: xscale.rangeBand(), | |
height: (dims.length) * (ch+yspace) | |
}) | |
bg.on("mouseover", updateLabels) | |
var charts = svg.selectAll("g.chart") | |
.data(dims) | |
charts.enter() | |
.append("g") | |
.classed("chart", true); | |
function render() { | |
svg.selectAll("rect.bg") | |
.data(answers) | |
bg.attr({ | |
x: function(d,i) { return xscale(i) } | |
}) | |
charts.each(barFn) | |
} | |
render(); | |
function barFn(prop, i) { | |
var max; | |
if(prop === "death") { | |
max = d3.max(answers, function(d) { return d["love"] }) | |
} else { | |
max = d3.max(answers, function(d) { return d[prop] }) | |
} | |
var yscale = d3.scale.linear() | |
.domain([0, max]) | |
.range([0, ch]) | |
var g = d3.select(this) | |
.attr("transform", "translate(" + [0, i * (ch+yspace)] + ")") | |
var bars = g.selectAll("rect.bar") | |
.data(answers) | |
bars.enter() | |
.append("rect") | |
.classed("bar", true); | |
bars.attr({ | |
x: function(d,i) { return xscale(i) }, | |
y: function(d) { return ch - yscale(d[prop]) }, | |
width: xscale.rangeBand(), | |
height: function(d) { return yscale(d[prop]) } | |
}) | |
bars.on("mouseover", updateLabels) | |
if(prop === "relationship" || prop === "married") { | |
var h = xscale.rangeBand(); | |
bars.attr({ | |
x: function(d,i) { return xscale(i) }, | |
y: ch - h, | |
width: xscale.rangeBand(), | |
height: h, | |
rx: h, | |
ry: h | |
}).style({ | |
"fill": function(d) { return d[prop] ? "#053988" : "#fff" } | |
}) | |
} | |
} | |
var ly = 39; | |
var qlabels = svg.selectAll("text.question") | |
.data(questions) | |
.enter() | |
.append("text") | |
.classed("question", true) | |
.text(function(d) { return d }) | |
.attr("transform", function(d,i){ | |
var x = cw + 20; | |
var y = ly + i * (ch+yspace) + ch/2; | |
return "translate(" + [x,y] + ")" | |
}) | |
.on("click", function(d,i) { | |
var prop = dims[i]; | |
answers.sort(function(a,b) { | |
return a[prop] - b[prop] | |
}) | |
render(); | |
}) | |
var alabels = svg.selectAll("text.answer") | |
.data(dims) | |
.enter() | |
.append("text") | |
.classed("answer", true) | |
.text(function(d) { return 0 }) | |
.attr("transform", function(d,i){ | |
var x = cw + 20; | |
var y = ly + i * (ch+yspace) + ch/2 - 20; | |
return "translate(" + [x,y] + ")" | |
}) | |
function updateLabels(d,i) { | |
svg.selectAll("text.answer") | |
.text(function(dim) { return d[dim] }); | |
svg.selectAll("rect") | |
.classed("highlighted", false); | |
svg.selectAll("rect") | |
.filter(function(f) { return f === d }) | |
.classed("highlighted", true); | |
} | |
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
.bg { | |
fill: #fff; | |
fill-opacity: 0.5; | |
} | |
.bar { | |
fill: #053988; | |
fill-opacity: 0.66; | |
} | |
.highlighted { | |
fill-opacity: 1; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment