gistfile1.txt

var links = [
  {source: "Healthcare", target: "Opportunity", id:"Healthcare"}, //1
  {source: "Dignity", target: "Healthcare", id:"Dignity"}, //2
  {source: "Social Justice", target: "Security", id:"Development"}, //3
  {source: "Development", target: "Dignity", id:""}, //4
  {source: "Portable Water", target: "Education", id:"Portable Water"}, //5
  {source: "Peace", target: "Education", id:"Peace"}, //6
  {source: "Education", target: "Productivity", id:"Education"}, //7
  {source: "Security", target: "Productivity", id:"Security"}, //8
  {source: "Opportunity", target: "Development", id:""}, //9
  {source: "Productivity", target: "Healthcare", id:""} //10
];


var nodes = {};

// Compute the distinct nodes from the links.
links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, id: link.id});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, id: link.id});
});

var width = 1300,
    height = 560;

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(90)
    .charge(-900)
    .on("tick", tick)
    .start();


var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var link = svg.selectAll(".link")
    .data(force.links())
    .enter().append("line")
    .attr("class", "link");

var node = svg.selectAll(".node")
    .data(force.nodes())
    .enter().append("g")
    .attr("class", "node")
    .attr("id", function(d) {
                return d.id;
            })
    .on("mouseover", mouseover)
    .on("mouseout", mouseout)
    .call(force.drag);



var colors = ["green","red","orange"];
for(i = 0; i < 10; i++){
  var color = colors[i];
  node.append("circle")
      .attr("r", 60)
      .style("fill", color);
};


function tick() {
  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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}


function mouseover() {
  d3.select(this).select("circle").transition()
      .append("svg:image")
      .attr("class", "circle")
      .attr("xlink:href", "https://d3nwyuy0nl342s.cloudfront.net/images/icons/public.png");

}

function mouseout() {
  d3.select(this).select("circle").transition()
      .duration(1000)
      .attr("r", 60);
}

node.append("text")
    .attr("text-anchor","middle")
    .text(function(d) { return d.name; });