Gestalt principles demo

Demonstration of some of the Gestalt principles for the BA Dev Day talk, using D3.js

<!DOCTYPE html>

<html>
<head>
<title>Gestalt Theory</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>

rect {

cursor: pointer  ;

}
	
	
</style>
	
</head>

<body>
    <h1>Gestalt theory:</h1>

var w = 1200,
    h = 500,
	defaultsize = 50;
	
var data = [ 	[ 1,1] , [ 1,2] , [ 1,3] , [ 1,4],
				[ 2,1] , [ 2,2] , [ 2,3] , [ 2,4] ];

var svg = d3.select("#chart").append("svg:svg")
    .attr("width", w)
    .attr("height", h);
	
var background = svg.append("svg:rect")
    .attr("width", w)
    .attr("height", h)
	.style("fill", "white")
	.on("click", change);

var closureBox = svg.append("svg:rect")
	.attr("x", 25)
	.attr("y", 50 )
    .attr("width", 200)
	.attr("height", h-100)
	.style("fill-opacity", 0)
	.style("fill", "grey");
	
var path = svg.append("svg:path")
	.attr("d", "M125,125L375,375L625,375")
	.attr("stroke", "grey")
    .attr("stroke-width",15 )
	.attr("stroke-opacity", 0)
    .attr("fill", "none");

var rects = svg.selectAll(".squares")
    .data(data)
	.enter()
	.append("svg:rect")
	.attr("class", "squares")
	.attr("x", function (d) { return ((250) * d[1]) - (150) ; } )
	.attr("y", function (d) { return ((250) * d[0] ) - (150) ; } )
    .attr("width", defaultsize)
	.attr("height", defaultsize)
	.on("click", change);

var changeID = 1;
var t = 500;

function change() {

//console.log(changeID);
	
	switch (true)
	{
	
		case ( changeID === 1):
				
				path
				.transition().duration(t/2)
				.style("stroke-opacity", 0);
		
				rects
				.transition().duration(t)
				.attr("width", defaultsize)
				.attr("height", defaultsize)
				.attr("x", function (d) { return ((250) * d[1]) - (150) ; } )
				.attr("y", function (d) { if (d[0] === 1) { return ((250) * d[0]) - (200) ; }
											else return ((250) * d[0]) - (50) ; });
					
				d3.select("h1").text("Gestalt theory: proximity");
				break;
				
				
		case ( changeID === 2):
				rects
				.transition().duration(t)
				.attr("y", function (d) { return ((250) * d[0] ) - (150) ; } )
				.attr("x", function (d) { if (d[1] %2 == 0 ) { return ((250) * d[1]) - (50) ; } 
											else return 	((250) * d[1]) - (150) ; 	} );
					
				d3.select("h1").text("Gestalt theory: proximity");
				break;
				
		case ( changeID === 3):
				rects
				.transition().duration(t)
				.style("fill", function(d) { if (d[1] === 2) {return "red" ; } });
				
				d3.select("h1").text("Gestalt theory: colour & shade");
				break;
				
		case ( changeID === 4):
				rects
				.transition().duration(t)
				.style("fill", "black")
				.attr("height", function(d) { if (d[1] === 3) {return 100 ; }
												else return defaultsize/2; });
				
				d3.select("h1").text("Gestalt theory: size");
				break;
				
		case ( changeID === 5):
				rects
				.transition().duration(t)
				.style("fill", "black")
				.attr("x", function (d) { return ((250) * d[1]) - (150) ; } )
				.attr("y", function (d) { return ((250) * d[0] ) - (150) ; } )
				.attr("width", defaultsize)
				.attr("height", defaultsize);
				
				closureBox
				.transition().duration(t)
				.style("fill-opacity", 0.7);
				
				d3.select("h1").text("Gestalt theory: closure");
				break;
				
		case ( changeID === 6):

closureBox
				.transition().duration(t)
				.style("fill-opacity", 0);
				
				path
				.transition().duration(t)
				.style("stroke-opacity", 0.7);
				
				d3.select("h1").text("Gestalt theory: connectedness");
				break;
	
	}
	
	
	if (changeID === 6) {changeID = 1;} 
	else changeID++;
	
}

</script>
	
</body>
</html>

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

https://d3js.org/d3.v3.min.js