tomshanley/index.html

## readme.md

      
    Raw
  

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

  
## index.html
<!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>

	<div id='chart'></div>


<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>

	<div id='chart'></div>



	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>

	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>