D3.js donut chart

by masteram

HTML

<script src="http://d3js.org/d3.v3.js"></script>

JavaScript

var jsonData = {
    "nodes" : 
    [
        { "name" : "One", "weight" : 903 }, 
        { "name" : "Two", "weight" : 502 }
    ], 
    "links" : 
    [
        { "source" : "One", "target" : "Two", "volume" : 2 }, 
        { "source" : "Two", "target" : "One", "volume" : 1 }
    ]
};
var width = 400,
    height = 400;

var force = d3.layout.force()
.charge(-100)
.linkDistance(30)
.size([width, height]);

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

function process (graph) {
    // Compute the distinct nodes from the links.
    console.log(graph);
    var nodeMap = {};
    graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });
    graph.links = graph.links.map(function(x) {
      return {
          source: nodeMap[x.source],
          target: nodeMap[x.target],
          value: x.value,
          volume: x.volume
      };
    });
    
    force
    .nodes(graph.nodes)
    .links(graph.links)
    .start();
    
    var link = svg.selectAll(".link")
    .data(graph.links)
    .enter().append("line")
    .attr("class", "link")
    .style("stroke-width", function (d) { return Math.sqrt(d.value); });
    
    var node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("class", "node")
    .attr("r", 5)
    .call(force.drag);
    
    node.append("title")
    .text(function (d) { return d.name; });
    
    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; });
    });
    
}

process(jsonData);