D3 Matrix table

Question

I am able to develop this matrix but I think code can be improved. I am creating a map on which each rectangle may have zero through many list items with their titles (still need to add code for adding titles):

var width = 600,
height = 600;
var margin = {top: -5, right: -5, bottom: -5, left: -5};
var zoom = d3.behavior.zoom()
 .scaleExtent([1, 15])
 .on("zoom", zoomed);
var svgContainer = d3.select("body").append("svg")
 .attr("width", width)
 .attr("height", height)
 .style("background-color", "black")
 .append("g")
 .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
 .call(zoom);
var zoomed = function () {
 svgContainer.attr("transform", "translate("+ d3.event.translate + ")scale(" + d3.event.scale + ")");
};
var zoom = d3.behavior.zoom()
.scaleExtent([1, 8])
.on("zoom", zoomed)
.size([width, height]);
svgContainer.call(zoom);
var rectangle1 = svgContainer.append("rect")
 .attr("x", 0)
 .attr("y", 0)
 .attr("width", 100)
 .attr("height", 100)
 .attr("fill", "red");
var rectangle2 = svgContainer.append("rect")
 .attr("x", 100)
 .attr("y", 0)
 .attr("width", 100)
 .attr("height", 100)
 .attr("fill", "yellow");
var rectangle3 = svgContainer.append("rect")
 .attr("x", 200)
 .attr("y", 0)
 .attr("width", 100)
 .attr("height", 100)
 .attr("fill", "red");
var rectangle4 = svgContainer.append("rect")
 .attr("x", 0)
 .attr("y", 100)
 .attr("width", 100)
 .attr("height", 100)
 .attr("fill", "yellow");
var rectangle5 = svgContainer.append("rect")
 .attr("x", 100)
 .attr("y", 100)
 .attr("width", 100)
 .attr("height", 100)
 .attr("fill", "red");
var rectangle6 = svgContainer.append("rect")
 .attr("x", 200)
 .attr("y", 100)
 .attr("width", 100)
 .attr("height", 100)
 .attr("fill", "yellow");
var rectangle7 = svgContainer.append("rect")
 .attr("x", 0)
 .attr("y", 200)
 .attr("width", 100)
 .attr("height", 100)
 .attr("fill", "red");
var rectangle8 = svgContainer.append("rect")
 .attr("x", 100)
 .attr("y", 200)
 .attr("width", 100)
 .attr("height", 100)
 .attr("fill", "yellow");
var rectangle9 = svgContainer.append("rect")
 .attr("x", 200)
 .attr("y", 200)
 .attr("width", 100)
 .attr("height", 100)
 .attr("fill", "red");

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

Answer 1

What do you think about this?

var rects = [ 
 [0, 0, "#C0FC3E"],
 [0, 200, "#60FC60"],
 [0, 400, "#64FE2E"],
 [0, 600, "#00FF00"],
 [200, 0, "#F6FF33"],
 [200, 200, "#AFFC3B"],
 [200, 400, "#00FF00"],
 [200, 600, "#64FE2E"],
 [400, 0, "#FDB500"],
 [400, 200, "#8DB723"],
 [400, 400, "#AFFC3B"],
 [400, 600, "#60FC60"],
 [600, 0, "red"],
 [600, 200, "#FDB500"],
 [600, 400, "#F6FF33"],
 [600, 600, "#C0FC3E"]
];
var width = 800,
 height = 800,
 boxWidth = 200,
 boxHeight = 200;
 var svgContainer = d3.select("body").append("svg")
 .attr("width", width)
 .attr("height", height);
var len = rects.length;
for(var i=0;i<len;i++){
 CreateRect(rects[i][0],rects[i][1],rects[i][2])
}
svgContainer.append("text")
 .attr("x", 85)
 .attr("y", 125)
 .attr("font-size", 55)
 .text("3")
 .attr("onclick", "alert('You clicked A');");

• Malachi: I think that you could add a little plain text to this code so that it is a full review of the code. like why you would change the OP code to this. and how it makes a difference.

Answer 2

I had to remove some features e.g. Zoom etc.. and now my latest code looks like this,

var width = 800,
 height = 800,
 boxWidth = 200,
 boxHeight = 200;
var svgContainer = d3.select("body").append("svg")
 .attr("width", width)
 .attr("height", height);
 CreateRect(0, 0, "#C0FC3E");
 CreateRect(0, 200, "#60FC60");
 CreateRect(0, 400, "#64FE2E");
 CreateRect(0, 600, "#00FF00");
 CreateRect(200, 0, "#F6FF33");
 CreateRect(200, 200, "#AFFC3B");
 CreateRect(200, 400, "#00FF00");
 CreateRect(200, 600, "#64FE2E");
 CreateRect(400, 0, "#FDB500");
 CreateRect(400, 200, "#8DB723");
 CreateRect(400, 400, "#AFFC3B");
 CreateRect(400, 600, "#60FC60");
 CreateRect(600, 0, "red");
 CreateRect(600, 200, "#FDB500");
 CreateRect(600, 400, "#F6FF33");
 CreateRect(600, 600, "#C0FC3E");
svgContainer.append("text")
 .attr("x", 85)
 .attr("y", 125)
 .attr("font-size", 55)
 .text("3")
 .attr("onclick", "alert('You clicked A');");
function CreateRect(x, y, boxColor)
{
 svgContainer.append("rect")
 .attr("x", x)
 .attr("y", y)
 .attr("width", boxWidth)
 .attr("height", boxHeight)
 .attr("fill", boxColor);
}