jmahabal/.block

## .block
license: mit
height: 600

## README.md

      
    Raw
  

              README.md
            
          
    Created for Pride 2016

  
## index.html
<!doctype html>
<html>
    <head>
     	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.js"></script>
			<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>

<style>

#page svg {
	border: 1px black solid;
}

#flash_container {
	text-align: center;
}

</style>
<body>

<title>Happy Pride!</title>
  <h1 style="text-align:center;">Happy Pride!</h1>


  <div class="row">
  <div class="col-md-3"></div><div class="col-md-6"><hr></div>
  </div>
  <br>

<div id="flash_container">
	<div id="page"></div>
</div>
<br>
<br>

<script type="text/javascript">

var radius = 10;
var width = radius*82;
var height = radius*32;

var div_svg = d3.select("#page").append("svg")
  .attr("width", width)
  .attr("height", height);

var flash_svg = d3.select("#flash").append("svg")
  .attr("width", width)
  .attr("height", height);

var circle_list = [];
for (var i = height/(2*radius); i >= 0; i--) {
	for (var j = width/(2*radius); j >= 0; j--) {
		circle_list.push([i, j]);
	}
}

var colorarray = ['#e41a1c','#377eb8','#4daf4a','#984ea3', "#f1c40f", "#e67e22", "#ff69b4"];

var prideLetters = [[3, 2], [3, 3], [3, 4], [3, 5],
					[4, 2], [5, 2], [6, 2], [7, 2], [8, 2], [9, 2], [10, 2], [11, 2], [12, 2],
					[4, 6], [5, 6], [6, 6],
					[7, 3], [7, 4], [7, 5], // P
					[3, 10], [3, 11], [3, 12], [3, 13],
					[4, 10], [5, 10], [6, 10], [7, 10], [8, 10], [9, 10], [10, 10], [11, 10], [12, 10],
					[4, 14], [5, 14], [6, 14],
					[7, 11], [7, 12], [7, 13],
					[8, 13], [9, 14], [10, 14], [11, 14], [12, 14], // R
					[3, 18], [3, 19], [3, 20], [3, 21], [3, 22],
					[4, 20], [5, 20], [6, 20], [7, 20], [8, 20], [9, 20], [10, 20], [11, 20],
					[12, 18], [12, 19], [12, 20], [12, 21], [12, 22], // I
					[3, 26], [3, 27], [3, 28], [3, 29],
					[4, 26], [5, 26], [6, 26], [7, 26], [8, 26], [9, 26], [10, 26], [11, 26],
					[4, 30], [5, 30], [6, 30], [7, 30], [8, 30], [9, 30], [10, 30], [11, 30],
					[12, 26], [12, 27], [12, 28], [12, 29], // D
					[3, 34], [3, 35], [3, 36], [3, 37], [3, 38],
					[4, 34], [5, 34], [6, 34], [7, 34], [8, 34], [9, 34], [10, 34], [11, 34],
					[7, 34], [7, 35], [7, 36], [7, 37], [7, 38],
					[12, 34], [12, 35], [12, 36], [12, 37], [12, 38] // E
					];

circlesSet = new Set();

div_svg.append("rect")
	.attr("fill", "white")
	.attr("class", "flashscreen")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", width)
    .attr("height", height)
    .attr("opacity", 0);

var circles = div_svg.selectAll("circles")
    .data(circle_list)
    .enter()
    .append("rect")
    .attr("fill", "white")
    .attr("opacity", "0")
    .attr("class", function(d, i) { if (_.find(prideLetters, (d)) != undefined) { return "pride"; } else { return "color"; }; })
    .attr("x", function(d, i) { return radius*2*d[1]; })
    .attr("y", function(d, i) { return radius*2*d[0]; })
    .attr("width", 2*radius)
    .attr("height", 2*radius)
    .on("mouseover", function(d,i) {
    	circlesSet.add(this);
    	// console.log(circlesSet.size, height*width/(4*radius*radius));
    	if (this.className.baseVal == "pride") {
    		d3.select(this).attr("fill", "white").transition()
    			.duration(100).style("opacity", "1");
    	} else {
    		d3.select(this).attr("fill", colorarray[Math.floor(Math.random()*colorarray.length)]).transition()
    			.duration(100).style("opacity", "1");
    	};
    	if (circlesSet.size == height*width/(4*radius*radius) - 5){

    		// console.log("launch");

    		d3.selectAll(".color").remove();
    		d3.selectAll(".flashscreen").style("opacity", 1);
    		d3.selectAll(".pride").attr("fill", "white").style("opacity", "1");

    		var flashloop = function() {
				d3.select(".flashscreen")
				.transition().duration(1000)
				.attr("fill", colorarray[Math.floor(Math.random()*colorarray.length)])
				.each("end", flashloop)
			}
			flashloop();
    	}
    });

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

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!doctype html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>

	<style>

	#page svg {
	border: 1px black solid;
	}

	#flash_container {
	text-align: center;
	}

	</style>
	<body>

	<title>Happy Pride!</title>
	<h1 style="text-align:center;">Happy Pride!</h1>


	<div class="row">
	<div class="col-md-3"></div><div class="col-md-6"><hr></div>
	</div>
	<br>

	<div id="flash_container">
	<div id="page"></div>
	</div>
	<br>
	<br>

	<script type="text/javascript">

	var radius = 10;
	var width = radius*82;
	var height = radius*32;

	var div_svg = d3.select("#page").append("svg")
	.attr("width", width)
	.attr("height", height);

	var flash_svg = d3.select("#flash").append("svg")
	.attr("width", width)
	.attr("height", height);

	var circle_list = [];
	for (var i = height/(2*radius); i >= 0; i--) {
	for (var j = width/(2*radius); j >= 0; j--) {
	circle_list.push([i, j]);
	}
	}

	var colorarray = ['#e41a1c','#377eb8','#4daf4a','#984ea3', "#f1c40f", "#e67e22", "#ff69b4"];

	var prideLetters = [[3, 2], [3, 3], [3, 4], [3, 5],
	[4, 2], [5, 2], [6, 2], [7, 2], [8, 2], [9, 2], [10, 2], [11, 2], [12, 2],
	[4, 6], [5, 6], [6, 6],
	[7, 3], [7, 4], [7, 5], // P
	[3, 10], [3, 11], [3, 12], [3, 13],
	[4, 10], [5, 10], [6, 10], [7, 10], [8, 10], [9, 10], [10, 10], [11, 10], [12, 10],
	[4, 14], [5, 14], [6, 14],
	[7, 11], [7, 12], [7, 13],
	[8, 13], [9, 14], [10, 14], [11, 14], [12, 14], // R
	[3, 18], [3, 19], [3, 20], [3, 21], [3, 22],
	[4, 20], [5, 20], [6, 20], [7, 20], [8, 20], [9, 20], [10, 20], [11, 20],
	[12, 18], [12, 19], [12, 20], [12, 21], [12, 22], // I
	[3, 26], [3, 27], [3, 28], [3, 29],
	[4, 26], [5, 26], [6, 26], [7, 26], [8, 26], [9, 26], [10, 26], [11, 26],
	[4, 30], [5, 30], [6, 30], [7, 30], [8, 30], [9, 30], [10, 30], [11, 30],
	[12, 26], [12, 27], [12, 28], [12, 29], // D
	[3, 34], [3, 35], [3, 36], [3, 37], [3, 38],
	[4, 34], [5, 34], [6, 34], [7, 34], [8, 34], [9, 34], [10, 34], [11, 34],
	[7, 34], [7, 35], [7, 36], [7, 37], [7, 38],
	[12, 34], [12, 35], [12, 36], [12, 37], [12, 38] // E
	];

	circlesSet = new Set();

	div_svg.append("rect")
	.attr("fill", "white")
	.attr("class", "flashscreen")
	.attr("x", 0)
	.attr("y", 0)
	.attr("width", width)
	.attr("height", height)
	.attr("opacity", 0);

	var circles = div_svg.selectAll("circles")
	.data(circle_list)
	.enter()
	.append("rect")
	.attr("fill", "white")
	.attr("opacity", "0")
	.attr("class", function(d, i) { if (_.find(prideLetters, (d)) != undefined) { return "pride"; } else { return "color"; }; })
	.attr("x", function(d, i) { return radius2d[1]; })
	.attr("y", function(d, i) { return radius2d[0]; })
	.attr("width", 2*radius)
	.attr("height", 2*radius)
	.on("mouseover", function(d,i) {
	circlesSet.add(this);
	// console.log(circlesSet.size, heightwidth/(4radius*radius));
	if (this.className.baseVal == "pride") {
	d3.select(this).attr("fill", "white").transition()
	.duration(100).style("opacity", "1");
	} else {
	d3.select(this).attr("fill", colorarray[Math.floor(Math.random()*colorarray.length)]).transition()
	.duration(100).style("opacity", "1");
	};
	if (circlesSet.size == heightwidth/(4radius*radius) - 5){

	// console.log("launch");

	d3.selectAll(".color").remove();
	d3.selectAll(".flashscreen").style("opacity", 1);
	d3.selectAll(".pride").attr("fill", "white").style("opacity", "1");

	var flashloop = function() {
	d3.select(".flashscreen")
	.transition().duration(1000)
	.attr("fill", colorarray[Math.floor(Math.random()*colorarray.length)])
	.each("end", flashloop)
	}
	flashloop();
	}
	});

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