4
\$\begingroup\$

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>

\$\endgroup\$
1
\$\begingroup\$

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');");
\$\endgroup\$
  • 1
    \$\begingroup\$ 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. \$\endgroup\$ – Malachi Apr 20 '15 at 15:54
-2
\$\begingroup\$

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);
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.