Step05 Neurohackweek

<!DOCTYPE html>
<html lang="en">

<head>
    <title> Neurohackweek 2017 D3 Tutorial </title>
    
    <style>

.bar {
      background: steelblue;
      height: 30px;
      margin: 5px;
      color: white;
      text-align: right;
      padding-right: 5px;
      padding-top: 5px;
    }

</style>

</head>

<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 id="plotArea"></div>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
  <script>

var data = [100, 150, 60, 80, 140]

d3.select("#plotArea").selectAll(".bar")
    .data(data).enter().append("div")
    .attr("class", "bar")
    .style("width", function(d){return d+"px"})
    .text(function(d){return d})
    .on("click", function(d){
      d3.select(this).style("background", "black")
    })

</script>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js