love & death bars

_.md

[ Launch: love & death bars ] 5250908 by enjalot
[ Launch: love & death prototype ] 5250680 by enjalot

config.json

{"description":"love & death bars","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/gzJe5ls.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 dims = [
  "age",
  "love",
  "death",
  "weddings",
  "funerals",
  "relationship",
  "married"
  ]

var cw = 400;
var ch = 76;
var yspace = 15;
var cx = 10;

var svg = d3.select("svg");

//click bar will highlight so you can follow
//ui for selecting sort dim
//punchcard
//styling for active
//other color bar for binary


var answers = tributary.form.map(function(d,i) {
  return {
    ind: i,
    date: new Date(d.date),
    love: +d.love,
    weddings: +d.weddings,
    death: +d.death,
    funerals: +d.funerals,
    relationship: d.relationship.toLowerCase() === "yes" ? true : false,
    married: d.married.toLowerCase() === "yes" ? true: false,
    age: +d.age
  }
})

//bar charts

var xscale = d3.scale.ordinal()
  .domain(d3.range(answers.length))
  .rangeBands([0, cw], 0.22)


var sortProp = "love";
answers.sort(function(a, b) {
  return a[sortProp] - b[sortProp]
})

var bgbars = svg.selectAll("rect.bg")
.data(answers);
bgbars.enter()
.append("rect")
.classed("bg", true)
bgbars
.attr({
  x: function(d,i) { return cx + xscale(i) },
  y: 0,
  width:xscale.rangeBand(),
  height: (ch+yspace) * questions.length + 25
}).on("mouseover", function(d) {
  updateLabel(d)
})


var charts = svg.selectAll("g.chart")
.data(dims)
.enter()
.append("g")
.classed("chart", true)
.attr("transform", function(d,i) {
  return "translate(" + [10, i * (ch + yspace)] + ")"
});

function render() {
  bgbars = svg.selectAll("rect.bg")
  .data(answers);
    bgbars
  .attr({
    x: function(d,i) { return cx + xscale(i) }
  })
  charts.each(bar);
}
render();

//make a bar chart offset by its index
function bar(prop, i) {

  if(prop === "death") {
  var max = d3.max(answers, function(d) { return d["love"]});
  } else {
    var 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 bs = g.selectAll("rect")
  .data(answers)
  bs.enter()
  .append("rect")
  .classed("bar", true)
  bs.attr({
    x: function(d,i) { return xscale(i) },
    y: function(d,i) { return ch - yscale(d[prop]) + yscale(d[prop])/2},
    width: xscale.rangeBand(),
    height: function(d,i) { return yscale(d[prop])}
  })
  .on("mouseover", function(d) {
    updateLabel(d)
  })
  bs.exit().remove();
  
  if(prop === "married" || prop === "relationship") {
    bs.attr({
    x: function(d,i) { return xscale(i) },
    y: function(d,i) { return ch/2 + 20},
    width: xscale.rangeBand(),
    height: function(d,i) { return 33 },
    rx: 2,
    ry: 2
    }).style({
      fill: function(d) { return d[prop] ? "#000": "#DFDFDF" },
      stroke: function(d) { return d[prop] ? "#000": "#000" }
    })
  }
}

var label = svg.append("g")
.attr("transform", "translate(" + [cw + 20, 31] + ")");

label.selectAll("text.question")
.data(questions)
.enter()
.append("text")
.classed("question", true)
.text(function(d) { return d })
.attr({
  y: function(d,i) { return ch/2 + i * (ch + yspace) }
}).on("click", function(d,i) {
  var sortProp = dims[i];
  console.log(sortProp);
  answers.sort(function(a, b) {
    return a[sortProp] - b[sortProp]
  })
  render();
})

label.selectAll("text.answer")
.data(questions)
.enter()
.append("text")
.classed("answer", true)
.attr({
  y: function(d,i) { return ch/2 + i * (ch + yspace) }
})

function updateLabel(d) {
  label.selectAll("text.answer")
    .data(dims)
    .text(function(dim) { return d[dim] })
    .attr({
      y: function(d,i) { return 20 + ch/2 + i * (ch + yspace) }
    })
  
  svg.selectAll("rect")
  .classed("selected", false)
  svg.selectAll("rect")
  .filter(function(f) { return f.ind === d.ind })
  .classed("selected", true)
}

style.css

.bg {
  fill: #fff;
  fill-opacity: 0.34;
}
.bar {
  fill: #030530;
  fill-opacity: 0.7;
}

.selected {
  stroke: red;
  fill-opacity: 1;
}