Step07 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>
    <h3> A bar graph with div elements</h3>
    <button onclick="addData()"> Add data </button>
    <button onclick="randomData()"> Randomize data </button>
    <button onclick="removeData()"> Remove data </button>
    <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]

function render(data){
    // add data
    d3.select("#plotArea").selectAll(".bar")
      .data(data).enter().append("div")
      .attr("class", "bar")
      .style("width", 0)

// update data
    d3.select("#plotArea").selectAll(".bar")
      .transition()
      .duration(1000)
      .style("width", function(d){return d+"px"})
      .text(function(d){return d})

// remove data
    d3.select("#plotArea").selectAll(".bar").data(data)
      .exit()
      .transition()
      .duration(1000)
      .style('opacity', 0)
      .remove()

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)
    })
  }

render(data)

function randomInt(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

function addData(){
    data.push(randomInt(30,200)) //append a random number to data
    render(data)
  }

function randomData(){
    for (i=0; i<data.length; i++){
      data[i] = randomInt(30,200)
    }
    render(data)
  }

function removeData(){
    data.pop() //remove last element
    render(data)
  }

</script>

</html>

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