Created
November 7, 2019 17:29
-
-
Save TomKearney/05c6f809a36b4d4838c09d8a37ea9b47 to your computer and use it in GitHub Desktop.
Data Dictionary Tree Structure
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Tree Example</title> | |
| <style> | |
| .node { | |
| cursor: pointer; | |
| } | |
| .node circle { | |
| fill: #fff; | |
| stroke: steelblue; | |
| stroke-width: 3px; | |
| } | |
| .node text { | |
| font: 12px sans-serif; | |
| } | |
| .link { | |
| fill: none; | |
| stroke: #ccc; | |
| stroke-width: 2px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- load the d3.js library --> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var dictionaryOne = [ | |
| { | |
| "name": "Security Master Dictionary", | |
| "children": | |
| [ | |
| { | |
| "parent": "Security Master Dictionary", | |
| "type": "attribute", | |
| "name": "Security ID", | |
| "description": "Master Security internal ID" | |
| }, | |
| { | |
| "parent": "Security Master Dictionary", | |
| "type": "attribute", | |
| "name": "CUSIP", | |
| "description": "Committee on Uniform Securities Identification Procedures" | |
| }, | |
| { | |
| "parent": "Security Master Dictionary", | |
| "type": "attribute", | |
| "name": "LEI", | |
| "description": "Legal Entity ID" | |
| }, | |
| { | |
| "parent": "Security Master Dictionary", | |
| "type": "entity", | |
| "name": "Equity", | |
| "children": [ | |
| { | |
| "parent": "Equity", | |
| "type": "attribute", | |
| "name": "Ticker Code", | |
| "description": "Ticker code for equity" | |
| }, | |
| { | |
| "parent": "Equity", | |
| "type": "entity", | |
| "name": "Closing Price", | |
| "description": "Details of the closing price of an exchange traded equity", | |
| "children": [ | |
| { | |
| "parent": "Closing Price", | |
| "type": "attribute", | |
| "name": "Price", | |
| "description": "Closing price" | |
| }, | |
| { | |
| "parent": "Closing Price", | |
| "type": "attribute", | |
| "name": "Currency Code", | |
| "description": "Currency code of closing price" | |
| }, | |
| { | |
| "parent": "Closing Price", | |
| "type": "attribute", | |
| "name": "Date", | |
| "description": "Date of closing price" | |
| } | |
| ] | |
| }, | |
| { | |
| "parent": "Equity", | |
| "type": "attribute", | |
| "name": "Shares Outstanding", | |
| "description": "Number of shares outstanding" | |
| }, | |
| { | |
| "parent": "Equity", | |
| "type": "attribute", | |
| "name": "EPS", | |
| "description": "Earnings per share" | |
| } | |
| ] | |
| }, | |
| { | |
| "parent": "Security Master Dictionary", | |
| "type": "entity", | |
| "name": "Rating", | |
| "description": "Details of ratings for a security", | |
| "children": [ | |
| { | |
| "parent": "Rating", | |
| "type": "entity", | |
| "name": "Ratings Agency", | |
| "description": "Details of the agency provider", | |
| "children": [ | |
| { | |
| "parent": "Ratings Agency", | |
| "type": "attribute", | |
| "name": "Name", | |
| "description": "Ratings agency name" | |
| }, | |
| { | |
| "parent": "Ratings Agency", | |
| "type": "attribute", | |
| "name": "ID", | |
| "description": "Identifier for the ratings provider" | |
| } | |
| ] | |
| }, | |
| { | |
| "parent": "Rating", | |
| "type": "attribute", | |
| "name": "Rating Type", | |
| "description": "Classification of the rating" | |
| }, | |
| { | |
| "parent": "Rating", | |
| "type": "attribute", | |
| "name": "Rating", | |
| "description": "Rating score for given security" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ]; | |
| // ************** Generate the tree diagram ***************** | |
| var margin = { top: 20, right: 120, bottom: 20, left: 120 }, | |
| width = 960 - margin.right - margin.left, | |
| height = 500 - margin.top - margin.bottom; | |
| var i = 0, | |
| duration = 750, | |
| root; | |
| var tree = d3.layout.tree() | |
| .size([height, width]); | |
| var diagonal = d3.svg.diagonal() | |
| .projection(function (d) { return [d.y, d.x]; }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.right + margin.left) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| root = dictionaryOne | |
| [0]; | |
| root.x0 = height / 2; | |
| root.y0 = 0; | |
| update(root); | |
| d3.select(self.frameElement).style("height", "500px"); | |
| function update(source) { | |
| // Compute the new tree layout. | |
| var nodes = tree.nodes(root).reverse(), | |
| links = tree.links(nodes); | |
| // Normalize for fixed-depth. | |
| nodes.forEach(function (d) { d.y = d.depth * 180; }); | |
| // Update the nodes… | |
| var node = svg.selectAll("g.node") | |
| .data(nodes, function (d) { return d.id || (d.id = ++i); }); | |
| // Enter any new nodes at the parent's previous position. | |
| var nodeEnter = node.enter().append("g") | |
| .attr("class", "node") | |
| .attr("transform", function (d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) | |
| .on("click", click); | |
| nodeEnter.append("circle") | |
| .attr("r", 1e-6) | |
| .style("fill", function (d) { return d._children ? "lightsteelblue" : "#fff"; }); | |
| nodeEnter.append("text") | |
| .attr("x", function (d) { return d.children || d._children ? -13 : 13; }) | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", function (d) { return d.children || d._children ? "end" : "start"; }) | |
| .text(function (d) { return d.name; }) | |
| .style("fill-opacity", 1e-6); | |
| // Transition nodes to their new position. | |
| var nodeUpdate = node.transition() | |
| .duration(duration) | |
| .attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; }); | |
| nodeUpdate.select("circle") | |
| .attr("r", 10) | |
| .style("fill", function (d) { return d._children ? "lightsteelblue" : "#fff"; }); | |
| nodeUpdate.select("text") | |
| .style("fill-opacity", 1); | |
| // Transition exiting nodes to the parent's new position. | |
| var nodeExit = node.exit().transition() | |
| .duration(duration) | |
| .attr("transform", function (d) { return "translate(" + source.y + "," + source.x + ")"; }) | |
| .remove(); | |
| nodeExit.select("circle") | |
| .attr("r", 1e-6); | |
| nodeExit.select("text") | |
| .style("fill-opacity", 1e-6); | |
| // Update the links… | |
| var link = svg.selectAll("path.link") | |
| .data(links, function (d) { return d.target.id; }); | |
| // Enter any new links at the parent's previous position. | |
| link.enter().insert("path", "g") | |
| .attr("class", "link") | |
| .attr("d", function (d) { | |
| var o = { x: source.x0, y: source.y0 }; | |
| return diagonal({ source: o, target: o }); | |
| }); | |
| // Transition links to their new position. | |
| link.transition() | |
| .duration(duration) | |
| .attr("d", diagonal); | |
| // Transition exiting nodes to the parent's new position. | |
| link.exit().transition() | |
| .duration(duration) | |
| .attr("d", function (d) { | |
| var o = { x: source.x, y: source.y }; | |
| return diagonal({ source: o, target: o }); | |
| }) | |
| .remove(); | |
| // Stash the old positions for transition. | |
| nodes.forEach(function (d) { | |
| d.x0 = d.x; | |
| d.y0 = d.y; | |
| }); | |
| } | |
| // Toggle children on click. | |
| function click(d) { | |
| if (d.children) { | |
| d._children = d.children; | |
| d.children = null; | |
| } else { | |
| d.children = d._children; | |
| d._children = null; | |
| } | |
| update(d); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment