[ Launch: love & death ] 5278724 by enjalot
-
-
Save enjalot/5278724 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},"setup.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},"form.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"icons.svg":{"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/Ny59E9Q.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 | 1 | 1 | 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", | |
date: new Date(d.date) | |
} | |
}) | |
var dims = [ | |
"age", | |
"love", | |
"death", | |
"weddings", | |
"funerals", | |
"relationship", | |
"married" | |
] | |
var ch = 76; | |
var cw = 387; | |
var yspace = 14; | |
var colorScale = d3.scale.category20(); | |
var svg = d3.select("svg"); | |
var sortProp = "age"; | |
answers.sort(function(a,b) { | |
return a[sortProp] - b[sortProp] | |
}) | |
var xscale = d3.scale.ordinal() | |
.domain(d3.range(answers.length)) | |
.rangeBands([0, cw], 0.304) | |
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: (ch+yspace)*dims.length | |
}).on("mouseover", function(d) { | |
updateAnswers(d); | |
}) | |
var chart = svg.selectAll("g.chart") | |
.data(dims) | |
chart.enter().append("g") | |
.classed("chart", true) | |
.attr("transform", function(d,i) { | |
return "translate(" + [0, i * (ch + yspace)] + ")"; | |
}) | |
function render() { | |
bg = svg.selectAll("rect.bg") | |
.data(answers) | |
.attr({ x: function(d,i) { return xscale(i) } }) | |
chart.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); | |
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,i) { return ch - yscale(d[prop]) }, | |
width: xscale.rangeBand(), | |
height: function(d,i) { return yscale(d[prop]) } | |
}) | |
.style("fill", colorScale(i)) | |
.on("mouseover", function(d) { | |
updateAnswers(d); | |
}) | |
if(prop === "relationship" || prop === "married") { | |
var h = ch/10.28 | |
bars.attr({ | |
height: h, | |
y: ch - h, | |
rx: 35.24, | |
ry: 54.8 | |
//stroke: "#000000" | |
}) | |
.style({ | |
"fill": function(d) { return d[prop] ? colorScale(i) : "#fff" } | |
}) | |
} | |
} | |
var lx = 57; | |
var ly = 38; | |
var qlabels = svg.selectAll("text.question") | |
.data(questions) | |
.enter() | |
.append("text") | |
.classed("question", true) | |
.text(function(d) {return d }) | |
.attr("transform", function(d,i) { | |
return "translate(" + [cw + lx, ly + ch/2 + i * (ch+yspace)] + ")"; | |
}) | |
.on("click", function(d,i) { | |
var sortProp = dims[i]; | |
answers.sort(function(a,b) { | |
return a[sortProp] - b[sortProp] | |
}) | |
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) { | |
return "translate(" + [cw + lx, ly + ch/2 + i * (ch+yspace) - 21] + ")"; | |
}) | |
.style("fill", function(d,i) { return colorScale(i) }) | |
function updateAnswers(d) { | |
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); | |
} | |
var icons = svg.selectAll("use.icon") | |
.data(dims) | |
.enter() | |
.append("use") | |
.classed("icon", true) | |
.attr({ | |
"xlink:href": function(d) { return "#" + d }, | |
"transform": function(d,i) { | |
var x = cw + 14; | |
var y = ly + ch/2 + i * (ch+yspace) - 41; | |
return "translate(" + [x, y] + ")scale(0.4)"; | |
} | |
}) | |
.style("fill", function(d,i) { return colorScale(i) }) | |
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 fontSize = 15; | |
var cm = tributary.getCodeEditor("inlet.js") | |
if(cm) { | |
var txt = cm.getValue() | |
var wrap = cm.getWrapperElement(); | |
d3.select(wrap).select(".CodeMirror-scroll") | |
.style({ | |
"font-size": fontSize + "px", | |
"line-height": fontSize + "px" | |
}) | |
cm.refresh(); | |
} |
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-opacity: 0.64729645056; | |
fill: #31699C; | |
} | |
.answer { | |
font-weight:bold; | |
text-shadow:1px 1px #8589BE; | |
} | |
.highlighted { | |
/*stroke: #057C0A;*/ | |
fill-opacity: 1; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment