love & death + icons

_.md

[ Launch: love & death + icons ] 5289746 by enjalot
[ Launch: love & death ] 5278724 by enjalot

config.json

{"description":"love & death + icons","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/ROFEGbP.png"}

form.csv

icons.svg

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",
    date: new Date(d.date)
  }
})

var dims = [
  "age",
  "love",
  "death",
  "weddings",
  "funerals",
  "rel"
//  "relationship",
//  "married"
]

var ch = 76;
var cw = 387;
var yspace = 17;
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+1)
}).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) {
  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);
  
  if(prop === "rel") {
    var bars = g.selectAll("use.bar")
      .data(answers)
    bars.enter()
    .append("use")
    .classed("bar", true)
    bars.attr({
      "xlink:href": function(d) {
        if(d.married && d.relationship) {
          return "#small-ring-heart"
        } else if(d.relationship){ 
          return "#relationship"
        } else if(d.married) {
          return "#married"
        }
      },
      "transform":function(d,i) { 
        var x = xscale(i); 
        var y = ch/2;
        return "translate(" + [x,y] +")scale(0.22)"
      
     }
    })
    .style({ 
      fill: function(d) { return d[prop] ? "#000": "#C7C6C6" },
      stroke: "#000"
    })
    return;
  }
  
  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]) + yscale(d[prop])/2 },
    width: xscale.rangeBand(),
    height: function(d,i) { return yscale(d[prop]) }
  })
  .on("mouseover", function(d) {
    updateAnswers(d);
  })

  
  
  
}


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 + 14, 11 + 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 "a" })
.attr("transform", function(d,i) {
  return "translate(" + [cw + 55, 11 + ch/2 + i * (ch+yspace) + 28] + ")";
})

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 = 11 + ch/2 + i * (ch+yspace) + 7;
    return "translate(" + [x,y ] + ")" + "scale(0.54)";
  }
})

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

setup.js

var fontSize = 15;

var cm = tributary.getCodeEditor("inlet.js")
if(cm) {
  var txt = cm.getValue()
  console.log(txt);
  
  var wrap = cm.getWrapperElement();
  d3.select(wrap).select(".CodeMirror-scroll")
    .style({
      "font-size": fontSize + "px",
      "line-height": fontSize + "px"
    })
  cm.refresh();
}

style.css

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

.bar {
  fill-opacity: 0.576
}

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

.icon {
  fill-opacity: 0.6
}