Sankey with Circles - step 0

by anikettiwari

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 = sankey.link();

// 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, 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 + " → " + d.target.name + "\n" + format(d.value);
    });

// add in the nodes
var node = svg.append("g").selectAll(".node")
    .data(graph.nodes)
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    })
    .call(d3.behavior.drag()
    .origin(function (d) {
        return d;
 ...