frontend masters interest + experience survey

_.md

[ Launch: frontend masters interest + experience survey ] 7345180 by enjalot

config.json

{"description":"frontend masters interest + experience survey","endpoint":"","display":"div","public":true,"require":[{"name":"parallel coordinates","url":"http://syntagmatic.github.io/parallel-coordinates/d3.parcoords.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"interest.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"experience.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/4BVrZ6M.png"}

experience.csv

inlet.js

var exp = tributary.experience;
var int = tributary.interest;
console.log("exp", exp);
console.log("int", int);



var questions = [
"Advanced CSS3 (Psuedo Elements, Animations, Gradients, etc.)",
"AngularJS",
"Backbone.js",
"Building jQuery Plugins",
"CSS3",
"Data Visualization with d3.js",
"HTML5 Audio and Video APIs",
"HTML5 Essentials",
"JavaScript",
"Responsive Web Design",
"Web Animation",
"Workflow and Tooling (Grunt, Yeoman, Bower)",
"jQuery",
"jQuery UI"
]
  
var iscale = {
  "Exciting!":3,
  "Interesting":2,
  "Not sure": 1,
  "Not interested": 0

}

var escale = {
  "No experience": 0,
  "I've googled it": 1,
  "I'm familiar": 2,
  "Expert": 3
}


var data = []
exp.forEach(function(d, i) {
  var ret = {
    index: i,
    type: "exp"
  };
  questions.forEach(function(q) {
    if(~questions.indexOf(q)) ret[q] =escale[d[q]] + Math.random() * 0.2;
  })
  data.push(ret)
})

int.forEach(function(d, i) {
  var ret = {
    index: i,
    type: "int"
  };
  questions.forEach(function(q) {
    if(~questions.indexOf(q)) ret[q] = iscale[d[q]] + Math.random() * 0.2;
  })
  data.push(ret)
})

var maxRecord = {
  index: -1
};
var minRecord = {
  index: 65
};
questions.forEach(function(q) {
  maxRecord[q] = 3;
  minRecord[q] = 0;
})
data.push(maxRecord);
data.push(minRecord);
console.log("data", data);

var display = d3.select("#display")
display.append("div").classed("survey", true).classed("parcoords", true)

pc1 = d3.parcoords()(".survey")
  .data(data)
  .alpha(0.4)
  .margin({top: 115, left: 20, right: 200, bottom: 10 })
  .color(function(d) { return d.type == "exp" ? "#0721DF" : "#FF0052" })
  .render()    
  .brushable()  // enable brushing
  .interactive()  // command line mode


d3.select(".survey").selectAll(".label").attr({
  "text-anchor": "start",
  "transform": "translate(-7, -5)rotate(-12)"
})

interest.csv

style.css

.parcoords > svg, .parcoords > canvas { 
  font: 14px sans-serif;
  position: absolute;
  margin-top: 0px;
}
.parcoords > canvas {
  pointer-events: none;
}
.parcoords rect.background {
  fill: transparent;
}
.parcoords rect.background:hover {
  fill: rgba(120,120,120,0.2);
}
.parcoords .resize rect {
  fill: rgba(0,0,0,0.1);
}
.parcoords rect.extent {
  fill: rgba(255,255,255,0.25);
  stroke: rgba(0,0,0,0.6);
}
.parcoords .axis line, .parcoords .axis path {
  fill: none;
  stroke: #222;
  shape-rendering: crispEdges;
}
.parcoords canvas {
  opacity: 1;
  -moz-transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
}
.parcoords canvas.faded {
  opacity: 0.25;
}
.survey{ 
  margin-top:72px;
  width:1988px;
  height:443px;
}

.parcoords > svg > g:first-child > g:first-child {
  font-size: 7px
}
#display{
overflow: scroll;
}