Skip to content

Instantly share code, notes, and snippets.

@dmann99
Created June 15, 2014 01:53
Show Gist options
  • Save dmann99/419935c191e2f1845d94 to your computer and use it in GitHub Desktop.
Save dmann99/419935c191e2f1845d94 to your computer and use it in GitHub Desktop.
Pop-Up Schemio v5
{"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"}
[
{"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"}
]
<CENTER><button id="next">Click to Add Next Event</button><CENTER>
<div id="nodegraph" width=960 height=500 ></div>
// 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;
}
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment