html5devconf time

_.md

[ Launch: html5devconf time ] 7123788 by enjalot
[ Launch: html5devconf starter ] 7123619 by enjalot
[ Launch: html5devconf starter ] 7112845 by enjalot

config.json

{"description":"html5devconf time","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"survey.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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/4R4ZMtU.png"}

inlet.js

//this is using data from twitter survey
//http://bit.ly/advd3presurvey
var results = tributary.survey;
results.forEach(function(d) {
  d.evil = +d.evil;
  d.passion = +d.passion;
  d.age = +d.age || 0;
  d.exp = +d.exp;
  d.oj = d.oj.replace(/ /g, '-');
  d.toothpaste = d.toothpaste.replace(/ /g, '-');
  d.time = new Date(d.time);
})
//console.log(results);


var qmap = {
  time: {q: "Timestamp"},
  pb: {q: "What type of peanut butter do you prefer?", a: ["Crunchy", "Smooth"]},
  toothpaste: {q:"Where do you squeeze the toothpaste from?", a: ["Top-of-the-tube", "Bottom-of-the-tube"]},
  cv: {q:"Vanilla or Chocolate?", a: ["Chocolate", "Vanilla"]},
  tp: {q:"What direction does toilet paper go on the holder thingy?", a: ["Over", "Under"]},
  oj: {q:"Do you prefer pulp or no pulp in your orange juice?", a: ["Pulp", "No-pulp"]},
  evil: {q:"Where do you sit on the good vs. evil scale?"},
  age: {q:"How old are you?"},
  passion: {q:"How passionate of a person are you?"},
  exp: {q:"How many years have you been building for the web?"}
}
//time,pb,toothpaste,cv,tp,oj,evil,passion,exp,age


var questions = [
  "pb", "toothpaste", "cv", "tp", "oj"
]
var field = questions[4]

results.sort(function(a,b) {
  return b[field] < a[field] ? 1 : -1
})
var colorScale = d3.scale.ordinal()
  .domain(qmap[field].a)
  .range(["#fff", "#000"])

var extent = d3.extent(results, function(d) { return d.evil })
var linearScale = d3.scale.linear()
  .domain(extent)
  .range([10, 294])

var timeScale = d3.time.scale()
  .domain(d3.extent(results, function(d) { return d.time }))
  .range([0, 401])

var svg = d3.select("svg")

var ppl = svg.selectAll("rect.person")
.data(results)

ppl.enter().append("rect").classed("person", true)

ppl.attr({
  width: 2,
  height: function(d,i) { return linearScale(d.evil) },
  x: function(d,i) { return 100 + timeScale(d.time) },
  y: function(d,i) { return 420 - linearScale(d.evil) }
})
.style("fill-opacity", 0.5)



var format = d3.time.format("%m/%d %H:%M");

var axis = d3.svg.axis()
.scale(timeScale)
.orient("bottom") //left, right, top
.ticks(10) //best guess
.tickFormat(format)
//.tickValues([20, 25, 30]) //specify exact values

var g = svg.append("g")
axis(g)
g.attr("transform", "translate(100, 435)")
g.selectAll("path")
  .style({ fill: "none", stroke: "#000"})
g.selectAll("line")
  .style({ stroke: "#000"})

g.selectAll(".tick text")
.attr("transform", "rotate(45)translate(59, -10)")



var scale = d3.scale.linear()
  .domain([20, 30])
  .range([10, 300])

var brush = d3.svg.brush()
brush.x(timeScale)

var g = svg.append("g")
brush(g)
g.attr("transform", "translate(100, 65)")
g.selectAll("rect").attr("height", 30)
g.selectAll(".background")
  .style({fill: "#4B9E9E", visibility: "visible"})
g.selectAll(".extent")
  .style({fill: "#78C5C5", visibility: "visible"})
g.selectAll(".resize rect")
  .style({fill: "#276C86", visibility: "visible"})
        
brush.on("brush", function() {
  var ext = brush.extent()
  ppl.style("fill", "#000")
  ppl.filter(function(d,i) {
    return d.time > ext[0] && d.time < ext[1]
  }).style("fill", "#ff0000")
})

style.css

.legend {
  float:left;
  clear:left;
}

survey.csv