Skip to content

Instantly share code, notes, and snippets.

@jmahabal

jmahabal/grancairo.jpg

Last active January 18, 2017 07:56
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/1ff064c3e15cb9aab6106a2a88e49326 to your computer and use it in GitHub Desktop.
Save jmahabal/1ff064c3e15cb9aab6106a2a88e49326 to your computer and use it in GitHub Desktop.
Download ZIP
Frank Stella - Gran Cairo in d3.js
Raw
index.html
<!Doctype HTML>
<head>
<!-- <script src="d3.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.js"></script>
<style>
</style>
</head>
<body>
<div id="grancairo">
<img src="grancairo.jpg" style="width: 300px; height: 300px; padding: 20px">
</div>
<script>
var width = 300;
var height = width;
var margin = {left: 20, right: 20, top: 20, bottom: 20};
var svg = d3.select("#grancairo")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var colorarray = ["#17223D", "#0E3964", "#001C08", "#FFE200", "#CB3C26", "#BB2123", "#CB3C26", "#FFE200", "#001C08", "#0E3964", "#17223D", "#0E3964", "#001C08", "#FFE200", "#CB3C26", "#BB2123"].reverse()
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("stroke-opacity", 0.7)
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment