html5devconf color scale

_.md

[ Launch: html5devconf color scale ] 7113017 by enjalot
[ Launch: html5devconf starter ] 7112916 by enjalot
[ Launch: html5devconf starter ] 7112845 by enjalot

config.json

{"description":"html5devconf color scale","endpoint":"","display":"div","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}},"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/EVlZF15.png"}

inlet.js

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.time = new Date(d.time);
})



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", "Bottom"]},
  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?"}
}
var fields = Object.keys(qmap);

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

var field = questions[0];

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 display = d3.select("#display")

var ppl = display.selectAll("div.person")
.data(results)

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

ppl.style({
  width: "20px",
  height: "20px",
  float: "left",
  margin: "2px",
  "background-color": function(d) { return colorScale(d[field]) }
})

var legend = display.append("div")
.style({
  float:"left",
  clear:"left"
})
legend.append("span").text(field + ": " + qmap[field].q)
legend.append("br")
var one = legend.append("div")
one.append("div").style({
  width: "20px",
  height: "20px",
  "background-color": colorScale(qmap[field].a[0])
})
one.append("span").text(qmap[field].a[0])
var two = legend.append("div")
two.append("div").style({
  width: "20px",
  height: "20px",
  "background-color": colorScale(qmap[field].a[1])
})
two.append("span").text(qmap[field].a[1])

survey.csv