love & death

_.md

[ Launch: love & death ] 5290270 by enjalot
[ Launch: love & death ] 5290171 by enjalot

config.json

{"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/yhyJIY8.png"}

form.csv

inlet.js

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 = 58;
var yspace = 32;

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

style.css

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

.bar {
  fill: #053988;
  fill-opacity: 0.66;
}

.highlighted {
  fill-opacity: 1;
}