Frank Stella - Marrakech in d3.js

<!Doctype HTML>

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.js"></script>

<style>

.triangle {
	stroke: black;
	stroke-opacity: 0.3;
	stroke-width: 1px;
}

</style>

</head>

<body>

var width = 300;
var height = width;
var margin = {left: 20, right: 20, top: 20, bottom: 20};

var svg = d3.select("#marrakech")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom);

var numberofbars = 28;

var colorarray = ["#F3CE03", "#E1201F"]
var squareunit = width / numberofbars;
var strokecolor = "#d3d3d3";

var colorfunction = function(step) {
   	if (step % 2 == 0) {
		return colorarray[0];
	} else {
		return colorarray[1];
	}
}

var line = d3.line()
    .x(function(d) { return d[0]; })
    .y(function(d) { return d[1]; });

svg.append("clipPath")
	.attr("id", "triangle")
	.datum([[0, 0], [width/2, height/2], [width, 0], [0, 0]])
	.append("path")
	.attr("d", line);

for (var i = 0; i < numberofbars; i++) {
	svg.append("rect")
	   .attr("x", i*squareunit)
	   .attr("y", 0)
	   .attr("width", squareunit)
	   .attr("height", height)
	   .attr("fill", colorfunction(i))
	   .attr("clip-path", "url(#triangle)")
	   .attr("class", "triangle")
	   .attr("transform", "translate("+(margin.left)+","+(margin.top)+")");

svg.append("rect")
	   .attr("x", i*squareunit)
	   .attr("y", 0)
	   .attr("width", squareunit)
	   .attr("height", height)
	   .attr("fill", colorfunction(i))
	   .attr("clip-path", "url(#triangle)")
	   .attr("transform", "translate("+(width + margin.left)+","+(0 + margin.top)+") rotate(90)")
	   .attr("class", "triangle");

svg.append("rect")
	   .attr("x", i*squareunit)
	   .attr("y", 0)
	   .attr("width", squareunit)
	   .attr("height", height)
	   .attr("fill", colorfunction(i))
	   .attr("clip-path", "url(#triangle)")
	   .attr("transform", "translate("+(width + margin.left)+","+(height + margin.top)+") rotate(180)")
	   .attr("class", "triangle");

svg.append("rect")
	   .attr("x", i*squareunit)
	   .attr("y", 0)
	   .attr("width", squareunit)
	   .attr("height", height)
	   .attr("fill", colorfunction(i))
	   .attr("clip-path", "url(#triangle)")
	   .attr("transform", "translate("+(0 + margin.left)+","+(height + margin.top)+") rotate(270)")
	   .attr("class", "triangle");
}

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.js