Skip to content

Instantly share code, notes, and snippets.

@jmahabal

jmahabal/.block

Last active August 31, 2017 23:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jmahabal/094ceefec38dae6b04331d4f5a7dfc5b to your computer and use it in GitHub Desktop.
Save jmahabal/094ceefec38dae6b04331d4f5a7dfc5b to your computer and use it in GitHub Desktop.
Download ZIP
unconf
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<style>
body {
text-align: center;
padding-top: 16em;
}
svg {
/*border: 1px black solid;*/
}
</style>
</head>
<body>
<div id="grancairo"></div>
<script>
// Feel free to change or delete any of the code you see in this editor!
var width = 1050;
var height = 1050;
var margin = {left: 0, right: 0, top: 0, bottom: 0};
var svg = d3.select("#grancairo")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var colors = ["rgb(129,168,141)", "rgb(211,221,220)", "rgb(230,160,196)", "rgb(198,205,247)", "rgb(216,164,153)", "rgb(114,148,212)", "rgb(244,181,189)", "rgb(156,150,74)", "rgb(205,192,140)", "rgb(137,157,164)", "rgb(201,51,18)", "rgb(250,239,209)", "rgb(220,134,59)", "rgb(154,136,34)", "rgb(245,205,180)", "rgb(248,175,168)", "rgb(116,160,137)", "rgb(234,190,148)", "rgb(59,154,178)", "rgb(120,183,197)"];
var colorarray = colors.slice(0, 10);
var squareunit = width / (colorarray.length*2-1);
for (var colorsquare = colorarray.length - 1; colorsquare >= 0; colorsquare--) {
svg.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", squareunit * (1 + 2*colorsquare))
.attr("height", squareunit * (1 + 2*colorsquare))
.attr("transform", function() {
var padding = Math.abs(colorarray.length - colorsquare - 1) * squareunit;
return "translate(" + (padding + margin.left) + "," + (padding + margin.top) + ")";
})
.attr("fill", colorarray[colorsquare])
.attr("stroke", "#d3d3d3")
.attr("class", 'colorsquare')
.attr("stroke-opacity", 0.7)
};
var counter = 0;
d3.interval(function() {
d3.selectAll(".colorsquare")
.attr("fill", o => _.sample(colors));
}, 500);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment