Pop-Up Schemio v5

_.md

[ Launch: Pop-Up Schemio v4 ] 419935c191e2f1845d94 by dmann99
[ Launch: Pop-Up Schemio v3 ] 3e0c3ec6fd63b7413034 by dmann99
[ Launch: Pop-Up Schemio v2 ] 10953451 by dmann99
[ Launch: Pop-Up Schemio v1 ] 10807834 by dmann99
[ Launch: hammer nodes ] 10014177 by dmann99
[ Launch: hammer nodes ] 9729074 by DeBraid
[ Launch: hammer nodes ] 9727634 by DeBraid

config.json

{"description":"Pop-Up Schemio v5","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"links.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"evol.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"ddl.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"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/MwmZCN4.png"}

ddl.json

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

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

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

  {"table" : "JOB", "columns" : [{"name" : "JOB_ID"},{"name" : "JOB_NAME" }]},
  {"table" : "JOB_HISTORY", "columns" : [{"name" : "JOB_HISTORY_ID"},{"name":"JOB_NAME"},{"name":"JOB_ID"},{"name":"EMPLOYEE_ID"}]},
  {"source": "EMPLOYEE", "target": "JOB"},
  {"source": "JOB_HISTORY", "target": "DEPARTMENT"},
  {"source": "JOB_HISTORY", "target": "EMPLOYEE"},
  {"source": "JOB_HISTORY", "target": "JOB"},
  {"source": "LOCATION", "target": "COUNTRY"},
  
  {"table" : "ORDER", "columns" : [{"name" : "ORDER_ID"}]},
  {"table" : "ORDER_ITEM", "columns" : [{"name" : "ORDER_ITEM_ID"},{"name":"ORDER_ID"}]},
  {"source": "ORDER", "target": "ORDER_ITEM"}

]
 

index.html

<CENTER><button id="next">Click to Add Next Event</button><CENTER>
<div id="nodegraph" width=960 height=500 ></div>

inlet.js

// David Mann || @ba6dotus || http://ba6.us

// Modifying a force layout
// http://bl.ocks.org/mbostock/1095795
// http://bl.ocks.org/mbostock/929623
// http://stackoverflow.com/questions/21070899/d3-js-how-to-remove-nodes-when-link-data-updates-in-a-force-layout

// v1 - Build basic force diagram
// v2 - Enhance the node graphic
// v3 - Add dynamic build-in behavior

// Todo:
// Anaglyphic 3d? : http://threejs.org/examples/#webgl_effects_anaglyph

// Data from http://www.oracle.com/technetwork/developer-tools/datamodeler/sample-models-scripts-224531.html

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


// Constants
var width = tributary.sw,
    height = tributary.sh;

var lineHeight=15;

var color = d3.scale.category10();

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

var nodes = [],
    links = [];

// Layout
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);

// Append group to each node
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);
  
  
  var g = node.enter()
      .append("g")
      .attr("class", "node")
      .attr("name","myname")
      .call(force.drag);
  
  
  g.append("rect")
      .attr("class", function(d) { return "node " + d.id; })
      .attr("x",-65)
      .attr("y",-10)
      .attr("width", 130)
  .attr("height",function(d) {return 10+ (d.columns.length + 1) * lineHeight} );
  
  g.append("line")
      .attr("x1",-65)
      .attr("y1",10)
      .attr("x2",65)
      .attr("y2",10);
 
  g.append("text")
    .attr("class","tablename")
    .attr("x", -60)
    .attr("dy", "4px")
    .attr("font-weight","bold")
    .text(function(d) { return d.table; })
  ;
  
  // Add column names
  g.selectAll('.columns')
    .data(function (d) {return d.columns;})
    .enter().append('text')
    .text(function (d) {return d.name;})
    .attr('y', function (d,i) {return 10+(i+1) * lineHeight;})
    .attr('x', -60);
  
  node.exit().remove();

  force.start();
}

function tick() {

  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; });
}

// Next Event Logic
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++;
      }
             
	});



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;

}