Africa_Colors

CSS

@charset "utf-8";
/* CSS Document */

.header {
	font-family: sans-serif;
}

.node text { 
	pointer-events: none;
	font-family: sans-serif;
}


.line {
	stroke: #999;
}


.node .type1 {
  fill:#690011;
}
.node .type2 {
  fill:#BF0426;
}

.fadein{
display:none;
font-size:20px;
}

JavaScript

var w = 600,
    h = 500,
    r = 30;
//    fill = d3.scale.category10()

var force = d3.layout.force()
        .charge(-3000)
        .linkDistance(30)
        .linkStrength(.1)
        .gravity(0.6)
        .size([w, h]);

var svg = d3.select("body").append("svg:svg")
        .attr("width", w)
        .attr("height", h);
        
var div = d3.select("body").append("div")	
    .attr("class", "tooltip")				
    .style("opacity", 0);

function load(json) {
    json.nodes.forEach(function(node) {
    	node.radius = 35;
    })
    
    var link = svg.selectAll("line")
            .data(json.links)
            .enter()
            .append("svg:line")
           // .style("stroke", function(d) {
        	//				return fill(d.value)})
            .attr("marker-end", "url(#end)"); //adds arrowhead to line
	
    var node = svg.selectAll("g.node")
            .data(json.nodes)
            .enter().append("svg:g")
            .attr("class", "node")
            .call(force.drag);
            
       //arrowheads
			svg.append("svg:defs").selectAll("marker")
    				.data(["end"])
  					.enter().append("svg:marker")
    				.attr("id", String)
    				.attr("viewBox", "0 -5 10 10")
    				.attr("refX", 30)
    				.attr("refY", -0)
    				.attr("markerWidth", 4)
    				.attr("markerHeight", 4)
    				.attr("orient", "auto")
  					.append("svg:path")
    				.attr("d", "M0,-5L10,0L0,5");

            
       	node.append("circle")
            .attr("r", 35)
            .attr("class", function(d){
              return "node type" + d.type;
            })
            //.style("fill", function(d) {
        		//			return fill(d.type)})
            .on("mouseover", fade(.1))
            .on("mouseout", fade(1));
            
           	node.on("mouseover", function (d) {
								link.style('stroke-width', function(l) {
				    			if (d === l.source || d === l.target)
				    				return 4;
				  				else
				    				return 2;
								})
       ...