love & death @ html5devconf

_.md

[ Launch: love & death @ html5devconf ] 7027391 by davo
[ Launch: love & death @ html5devconf ] 5289655 by enjalot

config.json

{"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"}

form.csv

icons.svg

inlet.js

//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) } )

setup.js

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();
}

style.css

.question {
  font-size: 12px;
}

.bg {
  fill: #FFFFFF;
  fill-opacity: 0.5
}

.bar {
  fill-opacity: 0.5;
}

.highlight {
  fill-opacity: 1;
}