SankeyClusterStabilityD3

Visualises cluster stability as more data is added - this version is done using D3 only

by Simon Raper

HTML

<script src="http://bost.ocks.org/mike/sankey/sankey.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script type="application/json" id="crime">
    {
        "nodes": [{
            "name": "20.1",
            "ind": "Alabama <br> Alaska <br> Delaware <br> Illinois <br> Louisiana"
        }, {
            "name": "20.2",
            "ind": "Arizona <br> California <br> Florida <br> Maryland"
        }, {
            "name": "20.3",
            "ind": "Arkansas <br> Colorado <br> Georgia"
        }, {
            "name": "20.4",
            "ind": "Connecticut <br> Idaho <br> Indiana <br> Kansas <br> Kentucky"
        }, {
            "name": "20.5",
            "ind": "Hawaii <br> Iowa <br> Maine"
        }, {
            "name": "25.1",
            "ind": "Alabama <br> Alaska <br> Delaware <br> Illinois <br> Louisiana <br> Michigan <br> Mississippi"
        }, {
            "name": "25.2",
            "ind": "Arizona <br> California <br> Florida <br> Maryland"
        }, {
            "name": "25.3",
            "ind": "Arkansas <br> Colorado <br> Georgia <br> Missouri"
        }, {
            "name": "25.4",
            "ind": "Connecticut <br> Idaho <br> Indiana <br> Kansas <br> Kentucky <br> Massachusetts"
        }, {
            "name": "25.5",
            "ind": "Hawaii <br> Iowa <br> Maine <br> Minnesota"
        }, {
            "name": "30.1",
            "ind": "Alabama <br> Alaska <br> Delaware <br> Illinois <br> Louisiana <br> Michigan <br> Mississippi <br> Nevada"
        }, {
            "name": "30.2",
            "ind": "Arizona <br> California <br> Florida <br> Maryland"
        }, {
            "name": "30.3",
            "ind": "Arkansas <br> Colorado <br> Georgia <br> Missouri"
        }, {
            "name": "30.4",
            "ind": "Connecticut <br> Idaho <br> Indiana <br> Kansas <br> Kentucky <br> Montana <br> Nebraska"
        }, {
            "name": "30.5",
            "ind":...

CSS

#chart {
    height: 500px;

}
.node rect {
    cursor: move;
    fill-opacity: .9;
    shape-rendering: crispEdges;
}
.node text {
    pointer-events: none;
}
.link {
    fill: none;
    stroke: #000;
    stroke-opacity: .2;
}
.link:hover {
    stroke-opacity: .5;
}
.d3-tip {
    line-height: 1;
    color: #999;
    font-size: 12px;
}
.cursor {
    fill: none;
    stroke: brown;
    pointer-events: none;
}

JavaScript

var crime = document.getElementById('crime').innerHTML;
energy = JSON.parse(crime);

var margin = {
    top: 200,
    right: 1,
    bottom: 6,
    left: 50
},
width = 700 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var formatNumber = d3.format(",.0f"),
    format = function (d) {
        return formatNumber(d) + " TWh";
    },
    color = d3.scale.category20();

var svg = d3.select("#chart").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 + ")");

var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function (d) {
    return "<span style='color: #606060; font: ariel '>" + d.ind + "</span>";
});

//Set up the tip and cursor
var cursor = svg.append("circle")
    .attr("r", 30)
    .attr("transform", "translate(-100,-100)")
    .attr("class", "cursor");

var sankey = d3.sankey()
    .nodeWidth(15)
    .nodePadding(10)
    .size([width, height]);

var path = sankey.link();

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



var link = svg.append("g").selectAll(".link")
    .data(energy.links)
    .enter().append("path")
    .attr("class", "link")
    .attr("d", path)
    .style("stroke-width", function (d) {
    return Math.max(1, d.dy);
})
    .sort(function (a, b) {
    return b.dy - a.dy;
});

link.append("title")
    .text(function (d) {
    return d.source.name + " → " + d.target.name + "\n" + format(d.value);
});

var node = svg.append("g").selectAll(".node")
    .data(energy.nodes)
    .enter().append("g")
    .attr("class", "node")
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide)
    .attr("transform", function (d) {
    return "translate(" + d.x + "," + d.y + ")";
})
    .call(d3.behavior.drag()
    .origin(function (d) {
    return d;
})
    .on("dragstart", function () {
   ...