learning curve

_.md

[ Launch: learning curve ] 5745518 by enjalot

config.json

{"description":"learning curve","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"types.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/AMcWN2P.png"}

inlet.js

var types = tributary.types;

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

var yscale = d3.scale.linear()
.domain([4, 62])
.range([208, 45]);

var xscale = d3.scale.ordinal()
.domain(d3.range(types.length))
.rangeBands([34, 408], 0.5)

var xf = function(d,i) {
  if(!d.x) d.x = xscale(i);
  return d.x;
}
var yf = function(d,i) {
  if(!d.y) d.y = yscale(d.value);
  return d.y;
}

var drag = d3.behavior.drag()
.on("drag", function(d,i) {
  var dx = d3.event.dx;
  var dy = d3.event.dy;
  d.x += dx;
  d.y += dy;
  update();
})

var curve = d3.svg.line()
.x(xf)
.y(yf)

function update() {
  types.sort(function(a, b) {
    return b.x - a.x
  })
    
  var circles = svg.selectAll("circle")
  .data(types)
  
  circles.enter()
  .append("circle")
  .call(drag);
  
  circles.attr({
    cx: xf,
    cy: yf,
    r: 10
  })

  
  var texts = svg.selectAll("text")
  .data(types)
  texts.enter()
  .append("text")
  texts
  .text(function(d) { return d.type })
  .attr("transform", function(d,i) {
    var x = xf(d,i) + 12
    var y = yf(d,i) + -10
    return "translate(" + [x,y] + ")rotate(-36)";
  }).style({
    "font-size": 10
  })

  var paths = svg.selectAll("path")
  .data([types])
  paths
  .enter()
  .append("path")
  
  paths.attr("d", curve(types));
  
}
update()


svg.append("path")

console.log(types)

style.css

path {
  fill: none;
  stroke: #000000;
  stroke-width: 3;
  pointer-events: none;
}

circle {
  opacity: 0.2
}

text {
  pointer-events: none;
}

types.json

[
  {"type":"Started", "value": 0},
  {"type":"Selections", "value":62},
  {"type":"Scales", "value":50},
  {"type":"Layouts", "value":43},
  {"type":"SVG", "value":32},
  {"type":"Arrays", "value":31},
  {"type":"Transitions", "value":24},
  {"type":"Time", "value":10},
  {"type":"Geo", "value":10},
  {"type":"Geom", "value":10},
  {"type":"Strings", "value":15},
  {"type":"Colors", "value":15},
  {"type":"Math", "value":12},
  {"type":"AJAX", "value":12},
  {"type":"Namespaces", "value":10},
  {"type":"Internals", "value":10},
  {"type":"Behaviors", "value":4}
]