<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <style type="text/css" media="screen">
  .scene circle {
    fill: none;
    stroke: #ff0000;
  }

  </style>

  <title>Websockets client</title>
  <!-- http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup -->
  <script defer type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
  <script defer type="text/javascript" src="js/d3.min.js" charset="utf-8"></script>
  <script defer type="text/javascript" src="js/wsclient.js"></script>
  <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
</head>

<body>
  <h1>Demo</h1>
  <svg class="scene"></svg>
  <div id="controls">
    <button type="button" id="start">START</button>
  </div>
  <div id="content">
    <p>Data here</p>
  </div>
</body>

</html>

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <style type="text/css" media="screen">

  body {
    font: 14px sans-serif;
  }
  .scene {
    background: #111
  }
  .scene circle {
    fill: yellow;
  }
  .scene rect {
    fill: cyan;
  }

  </style>

  <title>SLAM</title>
  <!-- http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup -->
  <script defer type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
  <script defer type="text/javascript" src="js/d3.min.js" charset="utf-8"></script>
  <script defer type="text/javascript" src="js/wsclient.js"></script>
  <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
</head>

<body>
  <h1>Demo</h1>
  <svg class="scene"></svg>
  <div id="controls">
    <button type="button" id="start">START</button>
  </div>
</body>

</html>

Remove unused divs and change styling
Remove unused divs and change styling
