Data Visualisation Dojo: Part 1

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js"></script>
  <style>
   .visualisation-container {
     width: 100%;
     height: 470px;
     background-color: whitesmoke;
     border: 1px solid black;
     position: relative;
     margin-top: 10px;
    }
    
    .some-square {
      position: absolute;
      text-align: center;
    }
  </style>
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

</head>

<body>
  <br><br>
  <div class="container">
    <h5> <u>Data Visualisation With D3 </u></h5>

<h3> Part 1: Draw an object</h3>
    <p> Create a pink square and add to the grey container 	</p>
    <div id="my-container" class="visualisation-container"></div>
    <br/>
  </div>
  <script>
    $(document).ready(() => {
      
      //This is where we append 
       d3.select("#my-container")
        .append("div")
          .attr("class", "some-square")
       		.style("background-color", "pink")
       		.style("border", "1px solid red")
          .style("height", 100 + "px")
          .style("width", 100 + "px")
          .style("left",  300 + "px" )
          .style("top",   185 + "px" )
       		.style("vertical-align", "middle")
          .text("Hi There!");
    })

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js