Built with blockbuilder.org
xxxxxxxxxx<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"> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head><body><div class="col-md-1"> </div><div class="celula cima col-md-1 fechaesquerda">João</div> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script> var data = {users: [ {username:'joao', status:'NOT_READY', reasonCode:'partiu'}, {username:'jose', status:'READY'}, {username:'maria', status:'LOGOUT', reasonCode:'casa'}, {username:'fulana', status:'TALKING'} ] } </script></body> https://d3js.org/d3.v4.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js