Floor map

implementing Floor Map using D3.js

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Drawing Area
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
      .style('background', 'lightblue');

// background image
    svg.append('image')
      .attr('xlink:href', 'floor-map.png')
      .attr('width', '895px')
      .attr('height', '503px');

// load json
    d3.json('floor-map.json', function(floorMap) {
      drawOverlay(floorMap);

// update on particular timeout
      [1000, 2000, 3000, 4000, 5000]
        .forEach(function(timeout) {
          setTimeout(
            function() {
              updateRect(floorMap)
            },
            timeout
          );
        });

});

drawOverlay(floorMap);
    }

function drawOverlay(floorMap) {
      var rooms = svg.selectAll('g.room')
        .data(floorMap);
        
      rooms.exit().remove();

var group = rooms.enter()
        .append('g')
        .attr('class', 'room');

group.append('rect')
        .merge(rooms.select('rect'))
        .attr('x', d => d.x)
        .attr('y', d => d.y)
        .attr('width', d => d.width)
        .attr('height', d => d.height)
        .style('fill', d => d.color)
        .style('opacity', 0.75);
      
      group.append('text')
        .merge(rooms.select('text'))
        .text(d => d.name)
        .attr('x', d => d.x + d.width/2)
        .attr('y', d => d.y + d.height/2)
        .style('text-anchor', 'middle')
        .style('fill', 'white');
    }
  </script>
</body>