Built with blockbuilder.org
Trying recreate this piece by Jean Pierre Yvaral that I saw at the Tate Modern, in London. I can't seem to find the specific piece online...
Part I of V
license: mit |
Built with blockbuilder.org
Trying recreate this piece by Jean Pierre Yvaral that I saw at the Tate Modern, in London. I can't seem to find the specific piece online...
Part I of V
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
</head> | |
<style> | |
body { | |
background: #2f3337 !important; | |
} | |
</style> | |
<body align="center"> | |
<script> | |
var width = window.innerHeight*.98, | |
height = window.innerHeight*.98, | |
margin = {top: 0, bottom: 0, right: 0, left: 0} | |
var svg = d3.select("body").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
var n = 6, | |
quadrants = 4, | |
rowHeight = height/2/n, | |
cellWidth = width/2/n; | |
// Lay out quandrants | |
var quadrants = svg.selectAll(".quadrant") | |
.data(d3.range(quadrants).map(Object)) | |
.enter().append("g") | |
.attr("class", "quadrant") | |
.attr("transform", function(d, i) { | |
if(i == 0) { | |
return "translate(0,0)" | |
} else if(i == 1) { | |
return "translate(" + width/2 + ",0)" | |
} else if(i == 2) { | |
return "translate(0," + height/2 + ")" | |
} else { | |
return "translate(" + width/2 + "," + height/2 + ")" | |
} | |
}) | |
// within each quadrant, there is a 6 by 6 | |
var rows = quadrants.selectAll(".quadrant-row") | |
.data(d3.range(n).map(Object)) | |
.enter().append("g") | |
.attr("class", "quadrant-row") | |
.attr("transform", function(d, i) { return "translate(0," + rowHeight*i + ")" }) | |
var cells = rows.selectAll(".cell") | |
.data(d3.range(n).map(Object)) | |
.enter().append("g") | |
.attr("class", "cell") | |
.attr("transform", function(d, i) { return "translate(" + cellWidth*i + ",0)" }) | |
// Making first triangle | |
cells.append("path") | |
.attr("d", "M0,0 L " + cellWidth + ",0L" + cellWidth + "," + rowHeight + "Z") | |
.style("fill", "darkgray") | |
// Making first triangle | |
cells.append("path") | |
.attr("d", "M0,0 L0," + rowHeight + "L" + cellWidth + "," + rowHeight + "Z") | |
.style("fill", "lightgray") | |
// Make 2nd triangle | |
// create clip paths for each | |
cells.append("clipPath") | |
.attr("id","rect-clip") | |
.append("rect") | |
.attr("width", cellWidth/2) | |
.attr("height", rowHeight/2) | |
cells.append("rect") | |
.attr("clip-path","url(#rect-clip)") | |
.attr("width", cellWidth-2) | |
.attr("height", rowHeight-2) | |
.style("fill", "#002EA7") // Klein blue | |
</script> | |
</body> | |