AddNodes

_.md

[ Launch: AddNodes ] 0478585cf3ee464cc8de by dmann99

config.json

{"description":"AddNodes","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"ddl.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/kYsjYTY.gif"}

ddl.json

[
  {"table" : "COUNTRY", "columns" : [{"name" : "COUNTRY_ID"},{"name" : "COUNTRY_NAME" }]},
  {"table" : "REGION", "columns" : [{"name" : "REGION_ID"},{"name" : "REGION_NAME" }]},
  {"source": "COUNTRY", "target": "REGION"},

  {"table" : "DEPARTMENT", "columns" : [{"name" : "DEPARTMENT_ID"},{"name" : "DEPARTMENT_NAME" }]},
  {"table" : "LOCATION", "columns" : [{"name" : "LOCATION_ID"},{"name" : "LOCATION_NAME" }]},
  {"source": "DEPARTMENT", "target": "LOCATION"},

  {"table" : "EMPLOYEE", "columns" : [{"name" : "EMPLOYEE_ID"},{"name" : "EMPLOYEE_NAME" },{"name" : "HIRE_DATE"},{"name" : "TERM_DATE"}]},
  {"source": "EMPLOYEE", "target": "DEPARTMENT"},

  {"table" : "JOB", "columns" : [{"name" : "JOB_ID"},{"name" : "JOB_NAME" }]},
  {"table" : "JOB_HISTORY", "columns" : [{"name" : "_ID"}]},
  {"source": "EMPLOYEE", "target": "JOB"},
  {"source": "JOB_HISTORY", "target": "DEPARTMENT"},
  {"source": "JOB_HISTORY", "target": "EMPLOYEE"},
  {"source": "JOB_HISTORY", "target": "JOB"},
  {"source": "LOCATION", "target": "COUNTRY"}
]

index.html

<button id="next">Next</button>
<div id="nodegraph" width=960 height=500 ></div>

inlet.js

// Based on : http://bl.ocks.org/mbostock/1095795
// Reference : http://bl.ocks.org/mbostock/929623


var width = 960,
    height = 700;

var color = d3.scale.category10();

var ddl = tributary.ddl;
var ddlcounter = 0;

var nodes = [],
    links = [];

var force = d3.layout.force()
    .nodes(nodes)
    .links(links)
    .charge(-1200)
    .linkDistance(220)
    .size([width, height])
    .on("tick", tick);

var svg = d3.select("#nodegraph")
      .append("svg")
      .attr("width", width)
      .attr("height", height);

var node = svg.selectAll(".node").append("g"),
    link = svg.selectAll(".link");


function start() { 
  link = link.data( force.links(), function(d) { return d.source.id + "-" + d.target.id; });
  link.enter().insert("line", ".node").attr("class", "link");
  link.exit().remove();

  node = node.data(force.nodes(), function(d) { return d.id;}).call(force.drag);
  
  
    node.enter()
      .append("g")
      .attr("class", "node")
      .attr("name","myname")
      .call(force.drag);
  
  
  node.append("rect")
      .attr("class", function(d) { return "node " + d.id; })
      .attr("x",-65)
      .attr("y",-10)
      .attr("width", 130)
  .attr("height",function(d) {return d.columns.length * 35} );
  
  node.append("line")
      .attr("x1",-65)
      .attr("y1",10)
      .attr("x2",65)
      .attr("y2",10);
 
  node.append("text")
    .attr("class","tablename")
    .attr("x", -60)
    .attr("dy", "4px")
    .attr("font-weight","bold")
    .text(function(d) { return d.table; })
  ;
  
  // Loop through columns and add text elements

  
  node.exit().remove();

  force.start();
}

function tick() {
//  node.attr("x", function(d) { return d.x-65; })
//      .attr("y", function(d) { return d.y-20 })
  
  
  node
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });
}


d3.select("#next")
	.on("click", function(){
      
      if (ddlcounter < ddl.length) {
      
        if (ddl[ddlcounter].table) { // If a table
          var table_name=ddl[ddlcounter].table;
          console.log("Processing Node for Table : "+ table_name);
          nodes.push({id: ddl[ddlcounter].table,
                      table: ddl[ddlcounter].table,
                      columns: ddl[ddlcounter].columns});
          
          console.log(nodes);
          
          start(); 
          
        } else { // if a link
	      console.log("Processing Link "+ddl[ddlcounter].source+" to "+ddl[ddlcounter].target);
          console.log(nodes);
          console.log(ddl);

          var srcdb = ddl[ddlcounter].source;
          console.log("Source DB Name " + srcdb);


          var tgtdb = ddl[ddlcounter].target;
          console.log("Target DB Name " + tgtdb);

          
          links.push({ source: nodes[findIndexById(nodes,srcdb)], 
                       target: nodes[findIndexById(nodes,tgtdb)]});
          start();
        } 
        ddlcounter++;
      }
             
	});




d3.select("#reset")
	.on("click", function(){

nodes=[];
links=[];
ddlcounter=0;
start();      
             
	});


    

function findIndexById(source, id) {
  for (var i = 0; i < source.length; i++) {
    if (source[i].id === id) {
      return i;
    }
  }
  throw "Couldn't find object with id: " + id;
}





    
    
    
    

style.css

.link {
  fill: none;
  stroke: black;
  stroke-width: 1.5px;
}

.node rect  {
  fill: white;
  stroke: #000000;
  stroke-width: 1.5px;
}

.node line  {
  fill: white;
  stroke: #000000;
  stroke-width: 1.5px;
}


.node text {
  font: 10px sans-serif;
  pointer-events: none;
}

text.tablename {
  fill: black;
  font: 11px sans-serif;
  pointer-events: none;
  font-weight: bold;
  stroke-width: 0px;

}