best11

_.md

[ Launch: best11 ] 763ca6bd9fcb24e74c69 by danharr

config.json

{"description":"best11","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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,"ajax-caching":true}

inlet.js

var svg = d3.select('svg');
w=372;
h=556;
var test = d3.range(20).map(function() {return d3.range(11).map(Math.random);});

var xx = [1,2,3];

var zz=
[
{"team":0,"player":"seaman","pos":"GK","apps":3,"cx":300,"cy":850,"radius":15,"color":"#fff"},
{"team":0,"player":"seaman","pos":"GK","apps":30,"cx":300,"cy":850,"radius":15,"color":"#fff"},
{"team":0,"player":"seaman","pos":"GK","apps":2,"cx":300,"cy":850,"radius":15,"color":"#fff"},
{"team":0,"player":"seaman","pos":"GK","apps":5,"cx":300,"cy":850,"radius":15,"color":"#fff"},

{"team":0,"player":"seaman","pos":"LB","apps":13,"cx":100,"cy":650,"radius":15,"color":"#fff"},
{"team":0,"player":"seaman","pos":"LB","apps":20,"cx":100,"cy":650,"radius":15,"color":"#fff"},
{"team":0,"player":"seaman","pos":"LB","apps":2,"cx":100,"cy":650,"radius":15,"color":"#fff"},
{"team":0,"player":"wright","pos":"RB","apps":30,"cx":500,"cy":650,"radius":15,"color":"#fff"},
{"team":0,"player":"wright","pos":"CB","apps":30,"cx":300,"cy":650,"radius":15,"color":"#fff"}
,
{"team":1,"player":"wright","pos":"CM","apps":30,"cx":300,"cy":450,"radius":15,"color":"#fff"},

{"team":1,"player":"wright","pos":"CM","apps":30,"cx":300,"cy":450,"radius":15,"color":"#fff"},

{"team":1,"player":"wright","pos":"CM","apps":30,"cx":300,"cy":450,"radius":15,"color":"#fff"},

{"team":1,"player":"wright","pos":"LM","apps":30,"cx":100,"cy":450,"radius":15,"color":"#fff"},

{"team":1,"player":"wright","pos":"LM","apps":30,"cx":100,"cy":450,"radius":15,"color":"#fff"},

{"team":1,"player":"wright","pos":"RM","apps":30,"cx":500,"cy":450,"radius":15,"color":"#fff"},

{"team":1,"player":"wright","pos":"AM","apps":30,"cx":300,"cy":300,"radius":15,"color":"#fff"},

{"team":1,"player":"wright","pos":"CF","apps":30,"cx":300,"cy":150,"radius":15,"color":"#fff"}

];

var apps = d3.scale.linear().domain([0,30]).range(["white","blue"]);

//alert(zz[0].pos.gk[0].apps);

var t20 = d3.range(20);



d3.select('body').append("p").html(function(d) {return "Chosen Team";})


var team = svg.attr("width",w).attr("height",h).append("g");

team.append("rect").attr("height",h).attr("width",w).style("fill","green").style("stroke-width",15).style("stroke","white");

/*team.selectAll("circle").data(zz).enter().append("circle").attr("cx",function(d){return d.cx;}).attr("cy",function(d) {return d.cy;}).attr("r",function(d){return 10;}).style("fill","red").style("stroke","white").style("stroke-width",4);*/



var 
    padding = 6, // separation between nodes
    maxRadius = 20;




var force = d3.layout.force()
    .nodes(zz)
    .size([w, h])
    .gravity(0)
    .charge(0)
    .on("tick", tick)
    .start();


//append these to a g element
var labels =

team.selectAll(".label")
.data(zz)
.enter()
.append("text")
.text(function(d){return d.pos;})
.attr("x",function(d) {return d.cx;})
.attr("y",function(d) {return d.cy;})




var circle = team.selectAll("circle")
    .data(zz)
  .enter().append("circle")
    .attr("r", function(d) { return d.radius; })
    .style("fill", function(d) { return apps(d.apps); })
    .style("stroke","white")
    .style("opacity",0.8)
    .call(force.drag);



function tick(e) {
  circle
      .each(gravity(0.2 * e.alpha))
      .each(collide(0.5))
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
}

// Move nodes toward cluster focus.
function gravity(alpha) {
  return function(d) {
    d.y += (d.cy - d.y) * alpha;
    d.x += (d.cx - d.x) * alpha;
  };
}





// Resolve collisions between nodes.
function collide(alpha) {
  var quadtree = d3.geom.quadtree(zz);
  return function(d) {
    var r = d.radius + maxRadius + padding,
        nx1 = d.x - r,
        nx2 = d.x + r,
        ny1 = d.y - r,
        ny2 = d.y + r;
    quadtree.visit(function(quad, x1, y1, x2, y2) {
      if (quad.point && (quad.point !== d)) {
        var x = d.x - quad.point.x,
            y = d.y - quad.point.y,
            l = Math.sqrt(x * x + y * y),
            r = d.radius + quad.point.radius + (d.color !== quad.point.color) * padding;
        if (l < r) {
          l = (l - r) / l * alpha;
          d.x -= x *= l;
          d.y -= y *= l;
          quad.point.x += x;
          quad.point.y += y;
        }
      }
      return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
    });
  };
}


d3.select("body").append("p").html("Starting elevens are all that have been taken into consideration. Each circle represents a player in a position. The darker blue the circle, the more appearances that player made. I'll expand this to all other premiership teams by end of Nov'14")

style.css

p {
font-family: arial;
font-size: 30px;

}


text {
font-family: arial;
font-size: 50px;
fill:#fff;
}