particles layouts (grids)

forked from romsson's block: particles layouts (grids)

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://romsson.github.io/d3-gridding/build/d3-gridding.js"></script>
<script>

var width = 400,
    height = 300,
    nb_groups = 9;

var modes = ["grid", "central", "horizontal", "radial", "treemap", "vertical"]; // gridding.modes();
  
var gridding = d3.gridding()
  .size([width, height])
  .mode(modes[0]);
  
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 + ")"; });

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();

.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>

Modified http://d3js.org/d3.v4.js to a secure url

Modified http://romsson.github.io/d3-gridding/build/d3-gridding.js to a secure url

https://d3js.org/d3.v4.js

https://romsson.github.io/d3-gridding/build/d3-gridding.js