artdaq_node_server  v1_00_12
client.js
1 
2 
3 var margin = { top: 10, right: 10, bottom: 10, left: 10 },
4  width = 1200 - margin.left - margin.right,
5  height = 740 - margin.top - margin.bottom;
6 
7 var formatNumber = d3.format(",.4f"), // zero decimal places
8  format = function (d) { return formatNumber(d); },
9  color = d3.scale.category20();
10 
11 var svg, sankey, path;
12 
13 function loadData() {
14  $("#chart").html("");
15  // append the svg canvas to the page
16  svg = d3.select("#chart").append("svg")
17  .attr("width", width + margin.left + margin.right)
18  .attr("height", height + margin.top + margin.bottom)
19  .append("g")
20  .attr("transform",
21  "translate(" + margin.left + "," + margin.top + ")");
22 
23  // Set the sankey diagram properties
24  sankey = d3.sankey()
25  .nodeWidth(36)
26  .nodePadding(10)
27  .size([width, height]);
28 
29  path = sankey.link();
30 
31  // load the data
32  d3.json("Json", function (error, data) {
33  var graph = JSON.parse(data);
34  var nodeMap = {};
35  graph.nodes.forEach(function (x) { nodeMap[x.name] = x; });
36  graph.links = graph.links.map(function (x) {
37  return {
38  source: nodeMap[x.source],
39  target: nodeMap[x.target],
40  value: x.value
41  };
42  });
43 
44  sankey
45  .nodes(graph.nodes)
46  .links(graph.links)
47  .layout(32);
48 
49  // add in the links
50  var link = svg.append("g").selectAll(".link")
51  .data(graph.links)
52  .enter().append("path")
53  .attr("class", "link")
54  .attr("d", path)
55  .style("stroke-width", function (d) { return Math.max(1, d.dy); })
56  .sort(function (a, b) { return b.dy - a.dy; });
57 
58  // add the link titles
59  link.append("title")
60  .text(function (d) {
61  return d.source.name + " -> " +
62  d.target.name + "\n" + format(d.value) + " MB/s";
63  });
64 
65  // add in the nodes
66  var node = svg.append("g").selectAll(".node")
67  .data(graph.nodes)
68  .enter().append("g")
69  .attr("class", "node")
70  .attr("transform", function (d) {
71  return "translate(" + d.x + "," + d.y + ")";
72  })
73  .call(d3.behavior.drag()
74  .origin(function (d) { return d; })
75  .on("dragstart", function () {
76  this.parentNode.appendChild(this);
77  })
78  .on("drag", dragmove));
79 
80  // add the rectangles for the nodes
81  node.append("rect")
82  .attr("height", function (d) { return d.dy; })
83  .attr("width", function (d) { return d.dx; })
84  .style("fill", function (d) {
85  return d.color = color(d.name.replace(/\..*/, ""));
86  })
87  .style("stroke", function (d) {
88  return d3.rgb(d.color).darker(2);
89  })
90  .append("title")
91  .text(function (d) {
92  return d.name + "\n" + format(d.repvalue) + " " + d.unit;
93  });
94 
95 
96  // add in the title for the nodes
97  node.append("text")
98  .attr("x", -6)
99  .attr("y", function (d) { return d.dy / 2; })
100  .attr("dy", 16)
101  .attr("text-anchor", "end")
102  .attr("transform", null)
103  .text(function (d) { return d.name; })
104  .filter(function (d) { return d.x < width / 2; })
105  .attr("x", 6 + sankey.nodeWidth())
106  .attr("text-anchor", "start");
107 
108  node.append("text")
109  .attr("x", -6)
110  .attr("y", function (d) { return (d.dy / 2) + 18; })
111  .attr("dy",16)
112  .attr("text-anchor", "end")
113  .attr("transform", null)
114  .text(function (d) { return "Last Update: " + ((Date.now() - d.lastUpdate)/1000).toFixed(2) + " s ago"; })
115  .filter(function (d) { return d.x < width / 2; })
116  .attr("x", 6 + sankey.nodeWidth())
117  .attr("text-anchor", "start");
118 
119  // the function for moving the nodes
120  function dragmove(d) {
121  d3.select(this).attr("transform",
122  "translate(" + (
123  d.x //= Math.max(0, Math.min(width - d.dx, d3.event.x))
124 ) + "," + (
125  d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))
126 ) + ")");
127  sankey.relayout();
128  link.attr("d", path);
129  }
130  });
131 }
132 
133 $( document ).ready(function() {
134  loadData();
135  //setInterval(loadData, 1000);
136 
137 });