Sankey with Circles - step 5

CSS

.node rect {
    cursor: move;
}
.node text {
    pointer-events: none;
}

JavaScript

var units = "Widgets";

var margin = {
        top: 10,
        right: 10,
        bottom: 10,
        left: 10
    },
    width = 640 - margin.left - margin.right,
    height = 250 - margin.top - margin.bottom;

var formatNumber = d3.format(",.0f"), // zero decimal places
    format = function (d) {
        return formatNumber(d) + " " + units;
    },
    color = d3.scale.category20();

// append the svg canvas to the page
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

// Set the sankey diagram properties
var sankey = d3sankey()
    .nodeWidth(20)
    .nodePadding(25)
    .size([width, height]);

var path = d3.svg.diagonal()
    .source(function(d) {
        return {"x":d.source.y + d.source.dy / 2,
                "y":d.source.x + sankey.nodeWidth()/2};
    })            
    .target(function(d) {
        return {"x":d.target.y + d.target.dy / 2,
                "y":d.target.x + sankey.nodeWidth()/2};
    })
    .projection(function(d) { return [d.y, d.x]; });

// load the data
var graph = getData();

sankey.nodes(graph.nodes)
    .links(graph.links)
    .layout(32);

// add in the links
var link = svg.append("g").selectAll(".link")
    .data(graph.links)
    .enter().append("path")
    .attr("class", "link")
    .attr("d", path)
    .style("fill", "none")
    .style("stroke", "tan")
    .style("stroke-opacity", ".33")
    .on("mouseover", function() { d3.select(this).style("stroke-opacity", ".5") } )
    .on("mouseout", function() { d3.select(this).style("stroke-opacity", ".2") } )
    .style("stroke-width", function (d) {
        return Math.max(1, Math.sqrt(d.dy));
    })
    .sort(function (a, b) {
        return b.dy - a.dy;
    });

// add the link titles
link.append("title")
    .text(function (d) {
        return d.source.name + " → " +...