[ Launch: Pop-Up Schemio v1 ] 66e13e3c82eb0fa0acc3 by dmann99
[ Launch: hammer nodes ] 10014177 by dmann99
[ Launch: hammer nodes ] 9729074 by DeBraid
[ Launch: hammer nodes ] 9727634 by DeBraid
-
-
Save dmann99/66e13e3c82eb0fa0acc3 to your computer and use it in GitHub Desktop.
Fancy EMP 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":"Fancy EMP 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.uFas | |
// Data from http://www.oracle.com/technetwork/developer-tools/datamodeler/sample-models-scripts-224531.html | |
var links = [ | |
{source: "FORD", target: "SMITH"}, | |
{source: "BLAKE", target: "ALLEN"}, | |
{source: "BLAKE", target: "WARD"}, | |
{source: "KING", target: "JONES"}, | |
{source: "BLAKE", target: "MARTIN"}, | |
{source: "KING", target: "BLAKE"}, | |
{source: "KING", target: "CLARK"}, | |
{source: "JONES", target: "SCOTT"}, | |
{source: "BLAKE", target: "TURNER"}, | |
{source: "SCOTT", target: "ADAMS"}, | |
{source: "BLAKE", target: "JAMES"}, | |
{source: "JONES", target: "FORD"}, | |
{source: "CLARK", target: "MILLER"} | |
]; | |
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 = 800; | |
var force = d3.layout.force() | |
.nodes(d3.values(nodes)) | |
.links(links) | |
.size([width, height]) | |
.linkDistance(50) | |
.charge(-800) | |
.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",-40) | |
.attr("y",-10) | |
.attr("width", 80) | |
.attr("height",20); | |
node.append("text") | |
.attr("x", -30) | |
.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