D3 Examples - cell occupation2

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="N1div.css" type="text/css">
  <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
  
</head>
​
<body>
<div class="col-md-1"> &nbsp; </div>
<div class="celula cima col-md-1 fechaesquerda" id="jose">Jos&eacute;<br/><br/><i class="fa fa-5x fa-phone"></i></div>
<div class="celula cima col-md-1" id="joao">Jo&atilde;o<br/><br/><i class="fa fa-5x fa-phone"></i></div>
<div class="celula cima col-md-1" id="maria">Maria<br/><br/><i class="fa fa-5x fa-check"></i></div>
<div class="celula cima col-md-1" id="fulana">Fulana<br/><br/><i class="fa fa-5x fa-ban"></i></div>
<div class="celula cima col-md-1" id="beltrana">Beltrana<br/><br/><i class="fa fa-5x fa-times"></i></div>  
  
  
<script
              src="https://code.jquery.com/jquery-3.2.1.min.js"
              integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
              crossorigin="anonymous"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script>
    var iconMap = {'NOT_READY':'fa-ban',
                   'READY':'fa-check',
                   'LOGOUT':'fa-times',
                   'TALKING':'fa-phone'}
    
    var data = {users: [
                            {username:'joao', status:'NOT_READY', reasonCode:'partiu'},
                                {username:'jose', status:'TALKING'},
                            {username:'maria', status:'LOGOUT', reasonCode:'casa'},
                            {username:'fulana', status:'TALKING'}
                            ] }
    
    for (user in data.users) {
      currentUser = data.users[user].username;
      status = data.users[user].status;
      changeIcon(currentUser, status);
    }
    
    function changeIcon(user, icon) {
      $("#" + user).children("i").remove();
      iconClasses = "fa fa-5x " + getIcon(icon);
      $("#" + user).append('<i class="' + iconClasses +'"></i>');
    }
    function getIcon(status) {
      return iconMap[status];
    }
    
  </script>
</body>
​
    