D3 Examples - Floor map

xxxxxxxxxx
 
<!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
          );
        });
​
    });
​
    function updateRect(floorMap) {
      var colorOptions = ['gray', 'orange', 'teal', 'maroon', 'black'];
      floorMap = floorMap.map(function(d) {
        var randomIndex = Math.floor(Math.random()*colorOptions.length);
        return Object.assign({}, d, {
          color: colorOptions[randomIndex]
        });
      });
​
      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>
​
    