romsson/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## 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 = 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 + ")"; });

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 / 2, 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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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 = 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 + ")"; });

	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 / 2, 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>