API tools faq
paste
Advertisement
n49o7

sankey.html

n49o7
May 11th, 2017
191
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.87 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <title>SANKEY Experiment</title>
  4. <style>
  5.  
  6. .node rect {
  7.   cursor: move;
  8.   fill-opacity: .9;
  9.   shape-rendering: crispEdges;
  10. }
  11.  
  12. .node text {
  13.   pointer-events: none;
  14. /*  text-shadow: 0 1px 0 #fff; */
  15. }
  16.  
  17. .link {
  18.   fill: none;
  19.   stroke: #000;
  20.   stroke-opacity: .2;
  21. }
  22.  
  23. .link:hover {
  24.   stroke-opacity: .5;
  25. }
  26.  
  27. </style>
  28. <body>
  29.  
  30. <div id="chart">
  31.  
  32. <script src="http://d3js.org/d3.v3.js"></script>
  33. <script src="sankey.js"></script>
  34. <script>
  35.  
  36. var units = "missions";
  37.  
  38. var margin = {top: 10, right: 10, bottom: 10, left: 10},
  39.     width = 1000 - margin.left - margin.right,
  40.     height = 1400 - margin.top - margin.bottom; // 890 for 1080p
  41.  
  42. var formatNumber = d3.format(",.0f"),    // zero decimal places
  43.     format = function(d) { return formatNumber(d) + " " + units; },
  44.     color = d3.scale.category20();
  45.  
  46. // append the svg canvas to the page
  47. var svg = d3.select("#chart").append("svg")
  48.     .attr("width", width + margin.left + margin.right)
  49.     .attr("height", height + margin.top + margin.bottom)
  50.     .append("g")
  51.     .attr("transform",
  52.           "translate(" + margin.left + "," + margin.top + ")");
  53.  
  54. // Set the sankey diagram properties
  55. var sankey = d3.sankey()
  56.     .nodeWidth(36)
  57.     .nodePadding(16)
  58.     .size([width, height]);
  59. var path = sankey.link();
  60.  
  61. // load the data
  62. d3.json("data.json", function(error, graph) {
  63.     var nodeMap = {};
  64.     graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });
  65.     graph.links = graph.links.map(function(x) {
  66.       return {
  67.         source: nodeMap[x.source],
  68.         target: nodeMap[x.target],
  69.         value: x.value
  70.       };
  71.     });
  72.   sankey
  73.       .nodes(graph.nodes)
  74.       .links(graph.links)
  75.       .layout(32);
  76.  
  77. // add in the links
  78.   var link = svg.append("g").selectAll(".link")
  79.       .data(graph.links)
  80.     .enter().append("path")
  81.       .attr("class", "link")
  82.       .attr("d", path)
  83.       .style("stroke-width", function(d) { return Math.max(1, d.dy); })
  84.       .sort(function(a, b) { return b.dy - a.dy; });
  85.  
  86. // add the link titles
  87.   link.append("title")
  88.         .text(function(d) {
  89.         return d.source.name + " → " +
  90.                 d.target.name + "\n" + format(d.value); });
  91.  
  92. // add in the nodes
  93.   var node = svg.append("g").selectAll(".node")
  94.       .data(graph.nodes)
  95.     .enter().append("g")
  96.       .attr("class", "node")
  97.       .attr("transform", function(d) {
  98.           return "translate(" + d.x + "," + d.y + ")"; })
  99.     .call(d3.behavior.drag()
  100.       .origin(function(d) { return d; })
  101.       .on("dragstart", function() {
  102.           this.parentNode.appendChild(this); })
  103.       .on("drag", dragmove));
  104.  
  105. // add the rectangles for the nodes
  106.   node.append("rect")
  107.       .attr("height", function(d) { return d.dy; })
  108.       .attr("width", sankey.nodeWidth())
  109.       .style("fill", function(d) {
  110.           return d.color = color(d.name.replace(/ .*/, "")); })
  111.       .style("stroke", function(d) {
  112.           return d3.rgb(d.color).darker(2); })
  113.     .append("title")
  114.       .text(function(d) {
  115.           return d.name + "\n" + format(d.value); });
  116.  
  117. // add in the title for the nodes
  118.   node.append("text")
  119.       .attr("x", -6)
  120.       .attr("y", function(d) { return d.dy / 2; })
  121.       .attr("dy", ".35em")
  122.       .attr("text-anchor", "end")
  123.       .attr("transform", null)
  124.       .text(function(d) { return d.name; })
  125.     .filter(function(d) { return d.x < width / 2; })
  126.       .attr("x", 6 + sankey.nodeWidth())
  127.       .attr("text-anchor", "start");
  128.  
  129. // the function for moving the nodes
  130.   function dragmove(d) {
  131.     d3.select(this).attr("transform",
  132.         "translate(" + (
  133.                d.x = Math.max(0, Math.min(width - d.dx, d3.event.x))
  134.             ) + "," + (
  135.                    d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))
  136.             ) + ")");
  137.     sankey.relayout();
  138.     link.attr("d", path);
  139.   }
  140. });
  141.  
  142. </script>
  143. </div>
  144.  
  145. </body>
  146. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!