Skip to content

Instantly share code, notes, and snippets.

@davo

davo/_.md

Created Oct 17, 2013
Embed
What would you like to do?
love & death @ html5devconf
{"description":"love & death @ html5devconf","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/fmPEsip.png"}
date love death weddings funerals relationship married age
4/2/2013 17:00:28 8 1 8 5 no you're pretty nosy! 39
4/2/2013 17:00:31 1 0 3 3 yes no 25
4/2/2013 17:00:37 5 2 1 3 yes no 33
4/2/2013 17:00:37 7
4/2/2013 17:00:50 3 0 4 2 yes yes 31
4/2/2013 17:00:57 23 0 64 0 yes yes 34
4/2/2013 17:01:00 6
4/2/2013 17:01:02 5 1 3 2 yes no 25
4/2/2013 17:01:05 5 0 4 4 Yes No 28
4/2/2013 17:01:10 10 2 3 2 no no 23
4/2/2013 17:01:14 5 1 5 2 yes yes 27
4/2/2013 17:01:15 20 3 12 4 yes yes 44
4/2/2013 17:01:16 20 2 2 4 Yes Yes 31
4/2/2013 17:01:24 5 1 8 1 No No 50
4/2/2013 17:01:28 13 3 15 5 yes no 31
4/2/2013 17:01:28 60
4/2/2013 17:01:29 2 0 2 3 Yea No 32
4/2/2013 17:01:32 3 0 ~10 ~3 yes yes 60
4/2/2013 17:01:32 12 3 10 7 yes no 36
4/2/2013 17:01:32 20 4 12 5 Yes Yes 33
4/2/2013 17:01:33 10 3 5 2 yes yes 26
4/2/2013 17:01:35 8 0 7 1 Yes Yes 30
4/2/2013 17:01:36 5 1 10 4 Yes Yes 29
4/2/2013 17:01:38 2 0 3 2 Yes No 29
4/2/2013 17:01:41 37 17 22 12 Yes Yes 44
4/2/2013 17:01:43 25 4 6 3 yes no 38
4/2/2013 17:01:43 8 3 8 5 Yes No 31
4/2/2013 17:01:43 20 5 15 1 yes yes 35
4/2/2013 17:01:43 20 2 3 2 no no 23
4/2/2013 17:01:46 6 0 2 2 yes no 23
4/2/2013 17:01:48 7 1 3 0 Yes No 25
4/2/2013 17:01:53 1 0 5 4 No No 23
4/2/2013 17:01:54 9 0 3 1 Yes No 27
4/2/2013 17:01:56 5 0 10 3 Yes No 29
4/2/2013 17:01:57 5 2 3 4 No No 47
4/2/2013 17:01:58 7 2 9 3 yes yes -56
4/2/2013 17:02:03 33 1 2 3 yes no 27
4/2/2013 17:02:03 15 2 10 6 yes no 29
4/2/2013 17:02:04 20 3 5 2 yes yes 47
4/2/2013 17:02:05 15 1 27 4 Yes No 26
4/2/2013 17:02:05 10 0 2 1 Yes Yes 26
4/2/2013 17:02:06 22 4 5 2 yes yes 36
4/2/2013 17:02:06 5 0 10 1 yes yes 44
4/2/2013 17:02:06 10
4/2/2013 17:02:06 15 3 3 4 no yes 47
4/2/2013 17:02:06 10 1 100 10 yes yes 52
4/2/2013 17:02:06 6 0 0 0 yes no 24
4/2/2013 17:02:06 30 2 5 1 Yes Yes 23
4/2/2013 17:02:08 4 0 9 2 No No 36
4/2/2013 17:02:08 30 3 15 5 Yes Yes 34
4/2/2013 17:02:12 10 3 5 3 yes yes 30
4/2/2013 17:02:17 6 0 5 1 yes yes 44
4/2/2013 17:02:19 10 1 100 2 yes yes 34
4/2/2013 17:02:21 20 5 1 0 yes yes 35
4/2/2013 17:02:28 20 4 4 2 yes yes 27
4/2/2013 17:02:29 47 2 4 3 no no 28
4/2/2013 17:02:34 8 1 5 4 yes no 36
4/2/2013 17:02:38 10 2 2 1 no no 25
4/2/2013 17:02:45 50 5 4 1 Yes Yes 35
4/2/2013 17:02:47 60 5 40 8 no no 33
4/2/2013 17:02:50 5 1 4 8 yes no 31
4/2/2013 17:02:55 7 0 7 1 yes yes 30
4/2/2013 17:02:57 10 1 10 5 yes yes 29
4/2/2013 17:02:58 6 0 30 10 No No 31
4/2/2013 17:03:00 80 2 7 1 yes no 34
4/2/2013 17:03:05 10 1 5 1 no no 26
4/2/2013 17:03:09 10 2 7 10 Yes No 29
4/2/2013 17:03:12 20 5 7 4 Yes Yes 49
4/2/2013 17:03:17 50 10 25 6 yes yes 52
4/2/2013 17:03:23 5 0 4 8 yes yes 63
4/2/2013 17:03:27 100 12 10 6 Yes Yes 41
4/2/2013 17:03:28 26 2 16 3 yes yes 29
4/2/2013 17:03:38 8 0 3 0 no no 26
4/2/2013 17:03:51 20 5 5 8 Yes Yes 40
4/2/2013 17:03:58 9 1 3 12 yes no 56
4/2/2013 17:04:02 4 0 11 3 Yes Yes 44
4/2/2013 17:04:09 15 5 4 2 yes yes 40
4/2/2013 17:04:39 100 3 4 1 yes yes 43
4/2/2013 17:04:51 25 2 3 1 Yes Yes 25
4/2/2013 17:05:20 8 0 8 2 Yes Yes 46
4/2/2013 17:05:43 20 3 3 0 yes no 28
4/2/2013 17:05:57 30 5 5 5 Yes No 35
4/2/2013 17:06:16 5 2 4 6 yes no 28
4/2/2013 17:06:31 10 1 12 4 no yes 39
4/2/2013 17:06:33 20 9 30 9 Yes Yes 61
4/2/2013 17:06:34 2 0 3 2 No No 29
4/2/2013 17:06:40 12 3 2 5 yes yes 41
4/2/2013 17:06:55 10 1 2 1 Yes No 29
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
//data from: https://docs.google.com/spreadsheet/pub?key=0ArrKrg7AOwYMdFdOSmh1VTJWaFo0dVFYWG1JcWF2TWc&output=html
var questions = [
// "Timestamp",
"How old are you?",
"How many people have you loved in your life?",
"How many of the people you loved have died?",
"How many weddings have you attended?",
"How many funerals have you attended?"
//"Are you in a loving 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"
]
//console.log(answers[2])
var svg = d3.select("svg");
var cw = 322;
var ch = 71;
var cx = 10;
var yspace = 25;
var colorScale = d3.scale.category20();
answers.sort(function(a,b) {
return b.love - a.love
})
var xscale = d3.scale.ordinal()
.domain(d3.range(answers.length))
.rangeBands([0, cw], 0.536);
var bg = svg.selectAll("rect.bg")
.data(answers)
bg.enter()
.append("rect")
.classed("bg", true)
.attr({
x: function(d,i) { return xscale(i) + cx },
y: 0,
width: xscale.rangeBand(),
height: (ch+yspace) * (dims.length)
})
.on("mouseover", updateLabels)
var charts = svg.selectAll("g.chart")
.data(dims)
charts.enter()
.append("g")
.classed("chart", true)
.attr("transform", function(d,i) {
var x = cx;
var y = (ch+yspace) * i
return "translate(" + [x,y] +")"
})
function render() {
bg = svg.selectAll("rect.bg")
.data(answers)
.attr({
x: function(d,i) { return xscale(i) + cx },
});
charts
.each(barFn);
}
render();
function barFn(dim,i) {
var max = d3.max(answers, function(d) { return d[dim] })
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[dim])},
width: xscale.rangeBand(),
height: function(d,i) { return yscale(d[dim]) }
})
.style("fill", colorScale(i) )
.on("mouseover", updateLabels)
}
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 = cx;
var y = (ch+yspace) * (i+1) - 12
return "translate(" + [x,y] +")"
})
.on("click", function(d,i) {
var dim = dims[i];
answers.sort(function(a,b) {
return b[dim] - a[dim]
})
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 = cx + cw + 45;
var y = (ch+yspace) * (i+1) - 25
return "translate(" + [x,y] +")"
})
.style("fill", function(d,i) { return colorScale(i) } )
function updateLabels(d,i) {
svg.selectAll("text.answer")
.text(function(dim) { return d[dim] });
svg.selectAll("rect")
.classed("highlight", false)
svg.selectAll("rect")
.filter(function(f) { return f === d })
.classed("highlight", true)
}
var icons = svg.selectAll("use.icon")
.data(dims)
.enter()
.append("use")
.classed("icon", true)
.attr("xlink:href", function(d) { return "#" + d })
.attr("transform", function(d,i) {
var x = cx + cw + 5;
var y = (ch+yspace) * (i+1) - 51
return "translate(" + [x,y] +")scale(0.5)"
})
.style("fill", function(d,i) { return colorScale(i) } )
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();
}
.question {
font-size: 12px;
}
.bg {
fill: #FFFFFF;
fill-opacity: 0.5
}
.bar {
fill-opacity: 0.5;
}
.highlight {
fill-opacity: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment