D3 Examples - Step07 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>
    <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>
​
  <!-- Import Javascript files here-->
  <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>
​
    