Skip to content

Instantly share code, notes, and snippets.

@walkerjeffd

walkerjeffd/.block

Last active May 4, 2016 20:58
Show Gist options
  • Save walkerjeffd/f0f27bb61ef20a6b2e17d7231e2294c6 to your computer and use it in GitHub Desktop.
Save walkerjeffd/f0f27bb61ef20a6b2e17d7231e2294c6 to your computer and use it in GitHub Desktop.
Download ZIP
Multi-Foci Force Layout Along Path
Raw
.block
license: gpl-3.0
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke-width: 1.5px;
}
</style>
<body>
<button id="btnNext">Next</button>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var timestep = 0,
maxTimestep = 3;
var fill = d3.scale.category10();
var allData = [
{id: 1, family: 0, foci: [0, 0, 1, 2]},
{id: 2, family: 0, foci: [0, 0, 2, 0]},
{id: 3, family: 2, foci: [0, 0, 1, 2]},
{id: 4, family: 1, foci: [0, 1, 2, 1]},
{id: 5, family: 1, foci: [0, 1, 1, 1]},
{id: 6, family: 2, foci: [0, 1, 0, 2]},
{id: 7, family: 0, foci: [0, 2, 0, 1]},
{id: 8, family: 1, foci: [0, 2, 1, 1]}
]
var nodes = [],
foci = [{x: 150, y: 300}, {x: 350, y: 250}, {x: 700, y: 400}];
nodes = allData.map(function (d) {
return {
index: d.id,
foci: d.foci,
family: d.family,
x: foci[d.foci[timestep]].x,
y: foci[d.foci[timestep]].y
}
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var line = d3.svg.line()
.x(function (d) { return d.x; })
.y(function (d) { return d.y; });
var paths = svg.selectAll("path")
.data([foci]);
paths.enter()
.append('path')
.style('fill', 'none')
.style('stroke', 'black')
.attr('d', line);
var force = d3.layout.force()
.nodes(nodes)
.links([])
.gravity(0)
.size([width, height])
.on("tick", tick);
var node = svg.selectAll("circle")
.data(nodes);
node.enter().append("circle")
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 8)
.style("fill", function(d) { return fill(d.family); })
.style("stroke", function(d) { return d3.rgb(fill(d.family)).darker(2); });
force.start();
function tick(e) {
var k = .1 * e.alpha;
// Push nodes toward their designated focus.
nodes.forEach(function(o, i) {
o.y += (foci[o.foci[timestep]].y - o.y) * k;
o.x += (foci[o.foci[timestep]].x - o.x) * k;
});
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
d3.select('#btnNext')
.on('click', function(e) {
timestep = timestep === maxTimestep ? 0 : timestep + 1;
force.start();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment