[ Launch: hammer nodes ] 10014177 by dmann99
[ Launch: hammer nodes ] 9729074 by DeBraid
[ Launch: hammer nodes ] 9727634 by DeBraid
-
-
Save dmann99/10014177 to your computer and use it in GitHub Desktop.
Pop-Up Schemio v1
This file contains 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
{"description":"Pop-Up Schemio v1","endpoint":"","display":"svg","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}},"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/i3chOtA.png"} |
This file contains 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
// David Mann || @ba6dotus || http://ba6.us | |
// Data from http://www.oracle.com/technetwork/developer-tools/datamodeler/sample-models-scripts-224531.html | |
var links = [ | |
{source: "COUNTRIES", target: "COUNTRIES"}, | |
{source: "DEPARTMENTS", target: "DEPARTMENTS"}, | |
{source: "EMPLOYEES", target: "EMPLOYEES"}, | |
{source: "JOBS", target: "JOBS"}, | |
{source: "JOB_HISTORY", target: "JOB_HISTORY"}, | |
{source: "LOCATIONS", target: "LOCATIONS"}, | |
{source: "REGIONS", target: "REGIONS"}, | |
{source: "COUNTRIES", target: "REGIONS"}, | |
{source: "DEPARTMENTS", target: "LOCATIONS"}, | |
{source: "EMPLOYEES", target: "DEPARTMENTS"}, | |
{source: "EMPLOYEES", target: "JOBS"}, | |
{source: "JOB_HISTORY", target: "DEPARTMENTS"}, | |
{source: "JOB_HISTORY", target: "EMPLOYEES"}, | |
{source: "JOB_HISTORY", target: "JOBS"}, | |
{source: "LOCATIONS", target: "COUNTRIES"} | |
]; | |
var nodes = {}; | |
// Compute the distinct nodes from the links. | |
links.forEach(function(link) { | |
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); | |
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); | |
}); | |
var width = 800, | |
height = 600; | |
var force = d3.layout.force() | |
.nodes(d3.values(nodes)) | |
.links(links) | |
.size([width, height]) | |
.linkDistance(226) | |
.charge(-1546) | |
.on("tick", tick) | |
.start(); | |
var svg = d3.select("svg") | |
.attr("width", width) | |
.attr("height", height); | |
var link = svg.selectAll(".link") | |
.data(force.links()) | |
.enter().append("line") | |
.attr("class", "link"); | |
var node = svg.selectAll(".node") | |
.data(force.nodes()) | |
.enter().append("g") | |
.attr("class", "node") | |
// .on("mouseover", mouseover) | |
// .on("mouseout", mouseout) | |
.call(force.drag); | |
node.append("rect") | |
.attr("x",-65) | |
.attr("y",-10) | |
.attr("width", 130) | |
.attr("height",20); | |
node.append("text") | |
.attr("x", -55) | |
.attr("dy", "4px") | |
.text(function(d) { return d.name; }); | |
function tick() { | |
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; }); | |
node | |
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); | |
} | |
function mouseover() { | |
d3.select(this).select("circle").transition() | |
.duration(750) | |
.attr("r", 20); | |
} | |
function mouseout() { | |
d3.select(this).select("circle").transition() | |
.duration(750) | |
.attr("r", 8); | |
} | |
// References: | |
// Labeled Force Layout - http://bl.ocks.org/mbostock/950642 |
This file contains 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
.link { | |
fill: none; | |
stroke: black; | |
stroke-width: 1.0px; | |
} | |
.node circle { | |
fill: tomato; | |
stroke: #fff; | |
stroke-width: 2.5px; | |
} | |
.node rect { | |
fill: white; | |
stroke: #000000; | |
stroke-width: 1.0px; | |
} | |
text { | |
font: 10px sans-serif; | |
pointer-events: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment