Skip to content

Instantly share code, notes, and snippets.

@paulosborne

paulosborne/.block

Last active September 18, 2018 10:44
Show Gist options
  • Save paulosborne/5d0443472aa02b242b74de3dd9520f47 to your computer and use it in GitHub Desktop.
Save paulosborne/5d0443472aa02b242b74de3dd9520f47 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v4.js"></script>
<script src="http://romsson.github.io/d3-gridding/build/d3-gridding.js"></script>
<script>
var width = 400,
height = 300,
nb_groups = 6;
var modes = ["grid", "central", "horizontal", "radial", "treemap", "vertical"]; // gridding.modes();
var gridding = d3.gridding()
.size([width, height])
.mode('radial');
var data = d3.range(100).map(function(d, i) {
return {id: i, group: i % nb_groups, r: 10*Math.random()}
});
var griddingData = gridding(d3.range(nb_groups));
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
d3.select("body").on("click", function() {
// update layout
var index = modes.indexOf(gridding.mode());
var index = (index + 1) % modes.length;
gridding.mode(modes[index]);
griddingData = gridding(d3.range(nb_groups));
// redraw and re-heat simulation
svg.selectAll(".square").data(griddingData).transition()
.attr("width", function(d) { return d.width; })
.attr("height", function(d) { return d.height; })
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
simulation.nodes(data).alpha(0.5).restart()
});
svg.selectAll(".square")
.data(griddingData)
.enter().append("rect")
.style("fill", "none")
.attr("class", "square")
.style("stroke", "black")
.attr("width", function(d) { return d.width; })
.attr("height", function(d) { return d.height; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {
return d.id;
}))
.force("x", d3.forceX(function(d, i) {
return griddingData[d.group].cx;
}))
.force("y", d3.forceY(function(d, i) {
return griddingData[d.group].cy;
}))
.force("collide", d3.forceCollide(12).radius(function(d) { return d.r; }).iterations(2))
.force("center", d3.forceCenter(width / 3, height / 2))
var ticked = function() {
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
link
.attr("x1", function(d) { return d.x; })
.attr("y1", function(d) { return d.y; })
.attr("x2", function(d) { return griddingData[d.group].cx; })
.attr("y2", function(d) { return griddingData[d.group].cy; })
}
simulation
.nodes(data)
.on("tick", ticked);
simulation.force("link")
.links([])
// for (var i = 0; i < 120; ++i) simulation.tick();
var link = svg.selectAll("line.links")
.data(data)
.enter().append("line")
.attr("class", "links")
.attr("stroke", "#999")
.attr("stroke-width", 1);
var node = svg.selectAll("circle.node")
.data(data)
.enter().append("circle")
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.r; })
.attr("id", function(d) { return "_" + d.id; })
.style("stroke-width", .5)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.5).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment