Built with blockbuilder.org
forked from anonymous's block: fresh block
Built with blockbuilder.org
forked from anonymous's block: fresh block
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
svg { width:100%; height: 100% } | |
</style> | |
</head> | |
<body> | |
<script> | |
// Feel free to change or delete any of the code you see! | |
var svg = d3.select("body").append("svg").append("g") | |
var rectPalette = [ | |
{ "x": 0, "y": 40, "width": 20,"height": 20, "color" : "#e8e8e8" }, | |
{ "x": 20, "y": 40, "width": 20,"height": 20, "color" : "#e4acac"}, | |
{ "x": 40, "y": 40, "width": 20,"height": 20, "color" : "#c85a5a"}, | |
{ "x": 0, "y": 20, "width": 20,"height": 20, "color" : "#b0d5df" }, | |
{ "x": 20, "y": 20, "width": 20,"height": 20, "color" : "#ad93a5"}, | |
{ "x": 40, "y": 20, "width": 20,"height": 20, "color" : "#985356"}, | |
{ "x": 0, "y": 0, "width": 20,"height": 20, "color" : "#64acbe" }, | |
{ "x": 20, "y": 0, "width": 20,"height": 20, "color" : "#62718c"}, | |
{ "x": 40, "y": 0, "width": 20,"height": 20, "color" : "#574249"} | |
]; | |
d3.select("svg g").attr("transform", "translate(15,15)"); | |
var rects = svg.selectAll("rects") | |
.data(rectPalette) | |
.enter() | |
.append("rect"); | |
var rectAttributes = rects | |
.attr("x", function (d) { return d.x; }) | |
.attr("y", function (d) { return d.y; }) | |
.attr("width", function (d) { return d.width; }) | |
.attr("height", function (d) { return d.height; }) | |
.style("fill", function(d) { return d.color; }); | |
console.log("you are now rocking with d3", d3); | |
</script> | |
</body> |