Advertisement
Guest User

Untitled

a guest
Jan 22nd, 2017
140
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.91 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <head>
  4. <title>edw overview</title>
  5. </head>
  6. <style>
  7.  
  8. .node {
  9. font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  10. fill: #bbb;
  11. }
  12.  
  13.  
  14. .node:hover {
  15. fill: #000;
  16. }
  17.  
  18. .node--empty{
  19. fill: #000;
  20. font-weight: 700;
  21. }
  22.  
  23. .link {
  24. stroke: steelblue;
  25. stroke-opacity: .01;
  26. fill: none;
  27. /* pointer-events: none;*/
  28. }
  29.  
  30. .node:hover,
  31. .node--target {
  32. font-weight: 700;
  33. }
  34.  
  35. .node--source {
  36. fill: #bbb;
  37. }
  38.  
  39. .node--target {
  40. fill: purple;
  41. }
  42.  
  43. .link--source,
  44. .link--target {
  45. stroke-opacity: 0.1;
  46. stroke-width: 2px;
  47. }
  48.  
  49. .link--source {
  50. /* stroke: #d62728;
  51. */
  52. stroke: Navy;
  53. }
  54. .link--empty {
  55. stroke-opacity: 0;
  56. }
  57.  
  58.  
  59. .link--target {
  60. /* stroke: #2ca02c;*/
  61. stroke: Navy;
  62. }
  63.  
  64.  
  65. </style>
  66. <body>
  67. <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
  68. <script src="//d3js.org/topojson.v1.min.js"></script>
  69.  
  70. <script>
  71.  
  72. var diameter = 960,
  73. radius = diameter / 2,
  74. innerRadius = radius - 120;
  75.  
  76. var cluster = d3.layout.cluster()
  77. .size([360, innerRadius])
  78. .sort(null)
  79. .value(function(d) { return d.size; });
  80.  
  81. var bundle = d3.layout.bundle();
  82.  
  83.  
  84. var margin = {top: 30, right: 20, bottom: 30, left: 50},
  85. width = 1500 - margin.left - margin.right,
  86. height =1500 - margin.top - margin.bottom;
  87.  
  88.  
  89. var svg_overview = d3.select("body").append("svg")
  90. .attr("width", width)
  91. .attr("height", height)
  92. .append("g")
  93. .attr("transform", "translate(" + (radius+100) + "," + (radius+100) + ")");
  94.  
  95. var line = d3.svg.line.radial()
  96. .interpolate("bundle")
  97. .tension(.85)
  98. .radius(function(d) { return d.y; })
  99. .angle(function(d) { return d.x / 180 * Math.PI; });
  100.  
  101.  
  102. var link = svg_overview.append("g").selectAll(".link"),
  103. node = svg_overview.append("g").selectAll(".node");
  104.  
  105.  
  106. d3.json("link.json", function(error, data) {
  107.  
  108.  
  109. d3.json("node.json", function(error, classes) {
  110. source_var='';
  111.  
  112. if (error) throw error;
  113.  
  114. var nodes = cluster.nodes(packageHierarchy(classes)),
  115. links = packageImports(nodes);
  116.  
  117. link = link
  118. .data(bundle(links))
  119. .enter().append("path")
  120. .each(function(d) { d.source = d[0], d.target = d[d.length - 1]; })
  121. .attr("class", "link")
  122. .attr("d", line)
  123. .on('mouseover', function(d) {
  124.  
  125.  
  126. // console.log(d.source.source);
  127. // console.log(d.source.target);
  128. // console.log(d.target.target);
  129. // console.log(d.target.target);
  130. // link.classed("link--target", function(l) { if (l.target === d) console.log("link"); })
  131.  
  132. // console.log(d.source.name);
  133. // console.log(d.target.name);
  134. // console.log(source_var);
  135. if (d.source.name==source_var | d.target.name==source_var) {
  136. console.log("\n\n\n\n--------------------------\n");
  137.  
  138. if(d.source.name==source_var) {
  139. console.log("table 1: ", d.source.name.split(".")[1]);
  140. console.log("category 1: ", d.source.name.split(".")[0]);
  141. } else {
  142. console.log("table 1: ", source_var.split(".")[1]);
  143. console.log("category 1: ", source_var.split(".")[0]);
  144. }
  145.  
  146.  
  147. // console.log("category 1: ", data.filter(function (el) {
  148. // return el.name == d.source.name &&
  149. // el.imports==d.target.name
  150. // })[0].schema_orig);
  151.  
  152.  
  153.  
  154. if(d.source.name==source_var) {
  155. console.log("table 2: ", d.target.name.split(".")[1]);
  156. console.log("category 1: ", d.target.name.split(".")[0]);
  157. } else {
  158. console.log("table 2: ", d.source.name.split(".")[1]);
  159. console.log("category 1: ", d.source.name.split(".")[0]);
  160. }
  161.  
  162. // console.log("table 2: ", d.target.name.split(".")[1]);
  163.  
  164. // console.log("category 2: ", data.filter(function (el) {
  165. // return el.name == d.source.name &&
  166. // el.imports==d.target.name
  167. // })[0].schema_dest);
  168.  
  169. console.log("patient id linkages: ",
  170. data.filter(function (el) {
  171. return el.name == d.source.name &&
  172. el.imports==d.target.name
  173. })[0].link_id);
  174. console.log("date linkages: ",
  175. data.filter(function (el) {
  176. return el.name == d.source.name &&
  177. el.imports==d.target.name
  178. })[0].link_date);
  179. console.log("other linkages: ",
  180. data.filter(function (el) {
  181. return el.name == d.source.name &&
  182. el.imports==d.target.name
  183. })[0].link_other);
  184. console.log("\n--------------------------\n\n\n\n");
  185.  
  186. };
  187.  
  188.  
  189. });
  190.  
  191. node = node
  192. .data(nodes.filter(function(n) { return !n.children; }))
  193. .enter().append("text")
  194. .attr("class", "node")
  195. .attr("dy", ".31em")
  196. .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); })
  197. .style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
  198. .text(function(d) { return d.key; })
  199. .on("click", mouseovered)
  200. .on("dblclick", mouseouted);
  201. });
  202.  
  203.  
  204.  
  205. });
  206.  
  207.  
  208.  
  209.  
  210. function mouseovered(d) {
  211.  
  212. node
  213. .each(function(n) { n.target = n.source = false; });
  214.  
  215. link
  216. .classed("link--target", function(l) { if (l.target === d) return l.source.source = true; })
  217. .classed("link--source", function(l) { if (l.source === d) return l.target.target = true; })
  218. .filter(function(l) { return l.target === d || l.source === d; })
  219. .each(function() { this.parentNode.appendChild(this); });
  220.  
  221. link
  222. .classed("link--empty", function(l) { if (l.target != d & l.source!= d) return l.source.source = true; })
  223.  
  224.  
  225.  
  226. node
  227. .classed("node--target", function(n) { return n.target; })
  228. .classed("node--source", function(n) { return n.source; });
  229. node
  230. .classed("node--empty", function(n) {return n.name.split(".")[1]===d.key; })
  231.  
  232. source_var=d.name;
  233.  
  234. }
  235.  
  236. function mouseouted(d) {
  237. link
  238. .classed("link--target", false)
  239. .classed("link--source", false);
  240.  
  241. link
  242. .classed("link--empty", false)
  243.  
  244.  
  245. node
  246. .classed("node--target", false)
  247. .classed("node--source", false);
  248.  
  249. }
  250.  
  251. function mouseovered_link(d) {
  252.  
  253. console.log("hkjdfhsf")
  254. link
  255. .classed("link--target", true);
  256. // .classed("link--source", true)
  257.  
  258. }
  259.  
  260. function mouseouted_link(d) {
  261. link
  262. .classed("link--target", false)
  263. .classed("link--source", false);
  264.  
  265. }
  266.  
  267. d3.select(self.frameElement).style("height", diameter + "px");
  268.  
  269. // Lazily construct the package hierarchy from class names.
  270. function packageHierarchy(classes) {
  271. var map = {};
  272.  
  273. function find(name, data) {
  274. var node = map[name], i;
  275. if (!node) {
  276. node = map[name] = data || {name: name, children: []};
  277. if (name.length) {
  278. node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
  279. node.parent.children.push(node);
  280. node.key = name.substring(i + 1);
  281. }
  282. }
  283. return node;
  284. }
  285.  
  286. classes.forEach(function(d) {
  287. find(d.name, d);
  288. });
  289.  
  290. return map[""];
  291. }
  292.  
  293. // Return a list of imports for the given array of nodes.
  294. function packageImports(nodes) {
  295. var map = {},
  296. imports = [];
  297.  
  298. // Compute a map from name to node.
  299. nodes.forEach(function(d) {
  300. map[d.name] = d;
  301. });
  302.  
  303. // For each import, construct a link from the source to target node.
  304. nodes.forEach(function(d) {
  305. if (d.imports) d.imports.forEach(function(i) {
  306. imports.push({source: map[d.name], target: map[i]});
  307. });
  308. });
  309.  
  310. return imports;
  311. }
  312.  
  313.  
  314.  
  315. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement