draw_plan_01

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    div.plan{
      position:absolute;
      margin:auto;
      width:300px;
      height:100%;
      right:0px;
      left:0px;
      background-color:;
    }
    
    div.planName{
      position:absolute;
      margin:auto;
      width:300px;
      right:0px;
      left:0px;
      top:750px;
    }
    
    p.planName{
      text-align:center;
      font-family:arial;
    }
    
  </style>
</head>

<body>
  <div class="plan">
    <script>
      var houseWidth = 16*12;
      var houseDepth = 40*16;
      
      var planContainer = d3.select('div.plan')
        .append('svg')
        .attr('width', '300px')
        .attr('height', '100%');

var underlay = planContainer.append("rect")
        .attr("width", houseWidth)
        .attr("height", houseDepth)
      	.attr("x", 54)
        .attr("y", 100)
      	.style("fill", "white")
      	.style("stroke", "none")
      	.style("stroke-width", 0);
      
      var room01 = planContainer.append("rect")
      	.attr("width", houseWidth)
      	.attr("height", 170)
      	.attr("x", 54)
      	.attr("y", 100)
      	.style("fill", "yellow")
      	.style("stroke", "black")
      	.style("stroke-width", 2);
      
      var room02 = planContainer.append("rect")
      	.attr("width", 120)
      	.attr("height", 120)
      	.attr("x", 54)
      	.attr("y", 270)
      	.style("fill", "blue")
      	.style("stroke", "black")
      	.style("stroke-width", 2);
      
      var room03 = planContainer.append("rect")
      	.attr("width", 120)
      	.attr("height", 210)
      	.attr("x", 54)
      	.attr("y", 390)
      	.style("fill", "green")
      	.style("stroke", "black")
      	.style("stroke-width", 2);
      
      var room04 = planContainer.append("rect")
      	.attr("width", houseWidth)
      	.attr("height", 140)
      	.attr("x", 54)
      	.attr("y", 600)
      	.style("fill", "purple")
      	.style("stroke", "black")
      	.style("stroke-width", 2);
      
      var stair = planContainer.append("rect")
        .attr("width", 3*12)
        .attr("height", 20*12)
        .attr("x", houseWidth+54-3*12)
        .attr("y",houseDepth/2)
        .style("fill", "red")
        .style("stroke", "black")
        .style("stroke-width", 2);
      
      var extWall = planContainer.append("rect")
      	.attr("width", houseWidth)
        .attr("height", houseDepth)
      	.attr("x", 54)
        .attr("y", 100)
      	.style("fill", "none")
      	.style("stroke", "black")
      	.style("stroke-width", 4);

</script>
    
    
  </div>
  
  <div class="planName">
    <p class="planName">Second Floor</p>
  </div>
  
</body>

https://d3js.org/d3.v4.min.js