Skip to content

Instantly share code, notes, and snippets.

@jmahabal

jmahabal/index.html

Last active January 18, 2017 17:29
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/c5c532f3943ce236ee9a40ef00057983 to your computer and use it in GitHub Desktop.
Save jmahabal/c5c532f3943ce236ee9a40ef00057983 to your computer and use it in GitHub Desktop.
Download ZIP
Frank Stella - Marrakech 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>
.triangle {
stroke: black;
stroke-opacity: 0.3;
stroke-width: 1px;
}
</style>
</head>
<body>
<div id="marrakech">
<img src="marrakech.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("#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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment