D3 Examples - Step04 Neurohackweek

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
​
  <head>
    <title> Neurohackweek 2017 D3 Tutorial </title>
    <!-- Style definitions will go in the <style> tags -->
    <style>
​
    .bar {
      background: steelblue;
      height: 30px;
      margin: 5px;
      color: white;
      text-align: right;
      padding-right: 5px;
      padding-top: 5px;
    }
​
    </style>
​
  </head>
​
  <!-- Content goes in the body -->
  <body>
​
    <h1> Hello World </h1>
    <p> This is a paragraph </p>
    <a href="https://www.google.com"> here is a link </a>
    <h3> My first bar graph with div elements</h3>
    <div class="bar" style="width: 100px;">100</div>
    <div class="bar" style="width: 150px;">150</div>
    <div class="bar" style="width: 60px;">60</div>
​
  </body>
​
  <!-- Import Javascript files here-->
  <script src="js/d3.min.js"></script>
  <script src="js/jquery.min.js"></script>
  <script>
​
  var newdiv = document.createElement("div");
  newdiv.className = "bar";
  newdiv.style.width = "80px";
  newdiv.appendChild(document.createTextNode("80"));
  document.body.appendChild(newdiv);
​
  var myElements = document.getElementsByClassName("bar")
​
  for (i=0; i<myElements.length; i++){
    myElements[i].addEventListener("click", function(e){
      e.target.style.background = "black" // change the style of the clicked element
    })
  }
​
​
  </script>
​
</html>
​
    