Football Lineups

_.md

[ Launch: Football Lineups ] 7694722 by danharr

config.json

{"description":"Football Lineups","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"k.js":{"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}

inlet.js

var viz = d3.select("body").append("svg")
.attr("width",600).attr("height",600).classed("visual",true)
;

var rect = d3.select("svg").append("rect").attr("stroke","black").attr("width",300).attr("height",300).attr("fill","none").attr("transform", "translate(100,100)");


var data = {
    "links": [
        {
            "source": 0, 
            "target": 1
        }, 
        {
            "source": 0, 
            "target": 2
        }, 
        {
            "source": 0, 
            "target": 3
        }, 
        {
            "source": 1, 
            "target": 2
        }, 
        {
            "source": 1, 
            "target": 3
        }
		, 
        {
            "source": 2, 
            "target": 3
        }
		, 
        {
            "source": 4, 
            "target": 1
        }
    ], 
    "nodes": [
        {
            "name": "Neville",
			"size":38
        }, 
        {
            "name": "Bruce",
			"size":33
        }, 
        {
            "name": "Pallister",
			"size":10
        }, 
        {
            "name": "Evra",
			"size":17        }  
, 
        {
            "name": "Stam",
			"size":2        }			]
};

var col =  d3.scale.category10();


var node = viz.selectAll(".node")
			.data(data.nodes)
			.enter()
			.append("circle")
			.attr("class","node")
			.attr("fill",function(d) {return col(d.name);})
			.attr("stroke","black")
			.attr("r",function(d) {return d.size/2;})
			.attr("transform", "translate(100,100)");
			
var link = viz.selectAll(".link")
			.data(data.links)
			.enter()
			.append("line")
			.style("stroke","black")
			.style("stroke-width",function(d) { return d.target;})
			.attr("transform", "translate(100,100)");
			
			
var force = d3.layout.force()
			.charge(-30)
			.linkDistance(function(d) {return d.target.size*7;})
			.size([280,280])
			.nodes(data.nodes)
			.links(data.links)
			.start();
			
			
force.on("tick",function() {
				link.attr("x1",function(d) { return d.source.x; })
					.attr("y1",function(d) { return d.source.y; })
					.attr("x2",function(d) { return d.target.x; })
					.attr("y2",function(d) { return d.target.y; });
					
				node.attr("cx",function(d) { return d.x;})
					.attr("cy",function(d) { return d.y;});
					
					
					});
					
					
node.call(force.drag);