Divs inline with SVG rect

Question

I want this,

What I have achieved so far is this - http://jsfiddle.net/nhe613kt/116/

All I need to is to add numbering to sides and text "Sales" and "Profit", I tried adding few divs but then they bring spaces above, what would be the best way of adding these numbers here, I want to do so in JS preferably as number of boxes may wary.

Code

$("#myConta").height(window.innerHeight - (window.innerHeight / 40));

var width = window.innerWidth - (window.innerWidth / 10),
    height = window.innerHeight - (window.innerHeight / 10),
    boxW = width / 4,
    boxH = height / 4,
    boxSize = boxW + boxH,

    xPos1 = 0,
    xPos2 = boxW,
    xPos3 = boxW * 2,
    xPos4 = boxW * 3,
    yPos1 = 0,
    yPos2 = boxH,
    yPos3 = boxH * 2,
    yPos4 = boxH * 3;

var CreateRect = function (x, y, boxColor) {
    svgContainer.append("rect")
        .attr("x", x)
        .attr("y", y)
        .attr("width", boxW)
        .attr("height", boxH)
        .attr("fill", boxColor)
        .attr("class", "hover_group");
};
var CreateRectWithLength = function (x, y, w, h, boxColor) {
    svgContainer.append("rect")
        .attr("x", x)
        .attr("y", y)
        .attr("width", w)
        .attr("height", h)
        .attr("fill", boxColor);
};

var CreateText = function(x, y, text, textColor) {
     svgContainer.append("text")
         .attr("x", x)
         .attr("y", y)
         .attr("stroke", textColor)
         .text(text);
};

var CreateTextInMain = function(x, y, text, textColor) {
     $("#myConta").append("div")
         .attr("x", x)
         .attr("y", y)
         .attr("stroke", textColor)
         .text(text);
};

var svgContainer = d3.select("#myConta")
    .append("svg")
    .attr("id", "myContasvg")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", "#2E2E2E")
    .attr("float", "right")
    .append("g");

CreateRect(xPos1, yPos1, "#C0FC3E");
CreateRect(xPos1, yPos2, "#60FC60");
CreateRect(xPos1, yPos3, "#64FE2E");
CreateRect(xPos1, yPos4, "#00FF00");

CreateRect(xPos2, yPos1, "#F6FF33");
CreateRect(xPos2, yPos2, "#AFFC3B");
CreateRect(xPos2, yPos3, "#00FF00");
CreateRect(xPos2, yPos4, "#64FE2E");

CreateRect(xPos3, yPos1, "#FDB500");
CreateRect(xPos3, yPos2, "#8DB723");
CreateRect(xPos3, yPos3, "#AFFC3B");
CreateRect(xPos3, yPos4, "#60FC60");

CreateRect(xPos4, yPos1, "red");
CreateRect(xPos4, yPos2, "#FDB500");
CreateRect(xPos4, yPos3, "#F6FF33");
CreateRect(xPos4, yPos4, "#C0FC3E");

//CreateText(xPos1 + (boxW / 2), height, "0", "black");
//CreateText(xPos2 + (boxW / 2), height, "1", "black");
//CreateText(xPos3 + (boxW / 2), height, "2", "black");
//CreateText(xPos4 + (boxW / 2), height, "3", "black");

//CreateText(xPos1 + 5, yPos1 + (boxH / 2), "3", "black");
//CreateText(xPos1 + 5, yPos2 + (boxH / 2), "2", "black");
//CreateText(xPos1 + 5, yPos3 + (boxH / 2), "1", "black");
//CreateText(xPos1 + 5, yPos4 + (boxH / 2), "0", "black");

//svgContainer.append("text")
//    .attr("x", 85)
//    .attr("y", 125)
//    .attr("font-size", 55)
//    .text("3")
//    .attr("onclick", "alert('You clicked A');");

HTML

<div id="myConta">
</div>

CSS

  .hover_group:hover {
      opacity: 0.5;
  }
  #myConta {
      background-color:black;
      text-align:right;
  }

Answer 1

According to this answer from another question, you can use d3.svg.axis()

Another workaround would be to increase your SVG width/height, insert rects same as your background color on the right and bottom of the SVG, this will allow you to place the labels on the newly added rects on the sides

Here is a jsfiddle demo based on your code (tested on chrome)

jsfiddle