Demonstration of some of the Gestalt principles for the BA Dev Day talk, using D3.js
Last active
August 29, 2015 14:09
-
-
Save tomshanley/6280d44c85c8ea3a153b to your computer and use it in GitHub Desktop.
Gestalt principles demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment