d3 learning curve

_.md

[ Launch: d3 learning curve ] 5737089 by enjalot

config.json

{"description":"d3 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},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":true,"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/UoZwrqN.png","inline-console":false}

inlet.js

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

function x(d,i) {
  if(!d.x) d.x = 100 + i * 36
  return d.x
}
function y(d,i) {
  if(!d.y) d.y = tributary.sh - 200 - d.value
  return d.y
}

var curve = d3.svg.line()
.x(x)
.y(y)
.interpolate("cardinal")

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

function update() {
  types.sort(function(a,b) { return b.x - a.x })
  
  var circles = svg.selectAll("circle")
  .data(types)
  circles.enter()
  .append("circle")
  circles.attr({
    cx: x,
    cy: y,
    r: 10
  }).style({
    opacity: 0.5
  })
  .call(drag)
  
  var text = svg.selectAll("text")
  .data(types)
  text.enter()
  .append("text")
  text.attr({
//    x: function(d,i) { return x(d,i) + 10 },
//    y: function(d,i) { return y(d,i) + 6 },
    transform:function(d,i) {
      var xx = x(d,i) + 10
      var yy = y(d,i) + 18
      return "translate(" + [xx,yy] + ")rotate(40)"
    }
  })
  .text(function(d,i) { return d.type })
  .style({
    "pointer-events":"none"
  })
  
  var path = svg.selectAll("path")
  .data([types])
  path.enter()
  .append("path")
  path.attr("d", curve)
  .style({
    fill: "none",
    stroke: "#000",
    "stroke-width":3,
    "pointer-events":"none"
  })
  
  
}
update();

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}
]