Force practice

_.md

[ Launch: Tributary inlet ] 6222650 by tarvaina

config.json

{"description":"Force practice","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}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/9xHR1w9.png"}

inlet.js

var linksData = [
  { source: "Ei tiimityötä", target: "Yksilöitynyt osaaminen" },
  { source: "Ei tiimityötä", target: "Työläs koordinointi" },
  { source: "Ei tiimityötä", target: "Ei kehittymistä" },
  { source: "Myöhästyminen tavoitteista", target: "Monta projektia tekijöillä" },
  { source: "Myöhästyminen tavoitteista", target: "Kiire" },
  { source: "Monta projektia tekijöillä", target: "Kiire" },
  { source: "Monta projektia tekijöillä", target: "Työläs koordinointi" }, 
  { source: "Tehoton työ", target: "Myöhästyminen tavoitteista" },
  { source: "Kiire", target: "Tehoton työ" },
  { source: "Kiire", target: "Ei kehittymistä" },
  { source: "Ei kehittymistä", target: "Yksilöitynyt osaaminen" },
  { source: "Ei kehittymistä", target: "Tehoton työ" },
  { source: "Yksilöitynyt osaaminen", target: "Monta projektia tekijöillä" },
  { source: "Yksilöitynyt osaaminen", target: "Työläs koordinointi" },
  { source: "Työläs koordinointi", target: "Kiire" }
];

 
var nodesData = {};
 
linksData.forEach(function(link) {
  link.source = nodesData[link.source] || (nodesData[link.source] = {name: link.source});
  link.target = nodesData[link.target] || (nodesData[link.target] = {name: link.target});
});


var width = tributary.sw,
    height = tributary.sh;
 
var fill = d3.scale.category20();
 
var force = d3.layout.force()
    .size([width, height])
    .nodes(d3.values(nodesData)) // initialize with a single node
    .links(linksData)
    .linkDistance(50)
    .charge(-600)
    .alpha(0.005);

var svg = d3.select("svg");
svg.append("svg:defs").append("svg:marker")
    .attr("id", "m")
    .attr("refX", 8)
    .attr("refY", 5)
    .attr("markerWidth", 5)
    .attr("markerHeight", 10)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,0 V10 L5,5 Z");
 
var nodes = force.nodes(),
    links = force.links(),
    node = svg.selectAll(".node"),
    link = svg.selectAll(".link");
 
force.start();
for (var i = 0; i < 10000000; ++i) force.tick();
force.stop(); 

link = link.data(links);
 
link.enter().insert("line", ".node")
    .attr("class", "link")
    .attr("marker-end", "url(#m)")
    .attr("stroke-width", 1);
 
node = node.data(nodes);
 
g = node.enter().append("g")
    .attr("class", "node")
  
g.append("ellipse")
    .attr("rx", 3)
    .attr("ry", 3)
 
g.append("text")
    .attr("font-size", 10)
    .text(function(d) { return d.name; });
  
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] + ")"; });

style.css

rect {
  fill: none;
  pointer-events: all;
}

.node ellipse {
  stroke: #999;
  stroke-width: 1;
  fill: white;
}

.node text {
 // text-anchor: middle;
  alignment-baseline: middle
}

.cursor {
  fill: none;
  stroke: brown;
  pointer-events: none;
}

.link {
  stroke: #999;
}

marker {
  fill: #999;  
}