Step06 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>

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

d3.select("#plotArea").selectAll(".bar")
    .data(data).enter().append("div")
    .attr("class", "bar")
    .style("width", 0)
    .transition()
    .duration(1000)
    .style("width", function(d){return d+"px"})
    .text(function(d){return d})

d3.select("#plotArea").selectAll(".bar")
    .on("mouseover",  function(d){
      d3.select(this).style("background", "black")
    })
    .on("mouseout",  function(d){
      d3.select(this).style("background", "steelblue")
    })
    .on("click", function(d, i){
      d3.select(this)
        .transition()
        .ease(d3.easeBounce)
        .duration(1000)
        .style("width", function(d){return d*1.5+"px"})
        .text(function(d){return d*1.5})

//re-bind the data
      data[i] = data[i] * 1.5
      d3.select("#plotArea").selectAll(".bar")
        .data(data)
    })

</script>

</html>

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