Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <meta charset="utf-8">
- <title>SANKEY Experiment</title>
- <style>
- .node rect {
- cursor: move;
- fill-opacity: .9;
- shape-rendering: crispEdges;
- }
- .node text {
- pointer-events: none;
- /* text-shadow: 0 1px 0 #fff; */
- }
- .link {
- fill: none;
- stroke: #000;
- stroke-opacity: .2;
- }
- .link:hover {
- stroke-opacity: .5;
- }
- </style>
- <body>
- <div id="chart">
- <script src="http://d3js.org/d3.v3.js"></script>
- <script src="sankey.js"></script>
- <script>
- var units = "missions";
- var margin = {top: 10, right: 10, bottom: 10, left: 10},
- width = 1000 - margin.left - margin.right,
- height = 1400 - margin.top - margin.bottom; // 890 for 1080p
- 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("#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 + ")");
- // Set the sankey diagram properties
- var sankey = d3.sankey()
- .nodeWidth(36)
- .nodePadding(16)
- .size([width, height]);
- var path = sankey.link();
- // load the data
- d3.json("data.json", function(error, 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
- };
- });
- 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("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; })
- .on("dragstart", function() {
- this.parentNode.appendChild(this); })
- .on("drag", dragmove));
- // add the rectangles for the nodes
- node.append("rect")
- .attr("height", function(d) { return d.dy; })
- .attr("width", sankey.nodeWidth())
- .style("fill", function(d) {
- return d.color = color(d.name.replace(/ .*/, "")); })
- .style("stroke", function(d) {
- return d3.rgb(d.color).darker(2); })
- .append("title")
- .text(function(d) {
- return d.name + "\n" + format(d.value); });
- // add in the title for the nodes
- node.append("text")
- .attr("x", -6)
- .attr("y", function(d) { return d.dy / 2; })
- .attr("dy", ".35em")
- .attr("text-anchor", "end")
- .attr("transform", null)
- .text(function(d) { return d.name; })
- .filter(function(d) { return d.x < width / 2; })
- .attr("x", 6 + sankey.nodeWidth())
- .attr("text-anchor", "start");
- // the function for moving the nodes
- function dragmove(d) {
- d3.select(this).attr("transform",
- "translate(" + (
- d.x = Math.max(0, Math.min(width - d.dx, d3.event.x))
- ) + "," + (
- d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))
- ) + ")");
- sankey.relayout();
- link.attr("d", path);
- }
- });
- </script>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement