Skip to content

Instantly share code, notes, and snippets.

@jmahabal
Last active October 18, 2016 05:56
Show Gist options
  • Save jmahabal/3b8c8f96e4168d6f74a960c1604d49ba to your computer and use it in GitHub Desktop.
Save jmahabal/3b8c8f96e4168d6f74a960c1604d49ba to your computer and use it in GitHub Desktop.
Happy Pride
license: mit
height: 600

Created for Pride 2016

<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment