live-code.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      div {
        height:0px;
        width:0px;
        margin: 2px;
        background-color: gold;
      }
    </style>
  </head>
  <body>

    <button onclick= "refreshChart()"> push me </button>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="data.js" charset="utf-8"></script>
    <script type="text/javascript">

    var data = dataFromOtherFile;
      // console.log(data);
      d3.select("body").selectAll(".bars")
      .data(data)
      .enter()
      .append("div")
      .classed("bars", true)
      .transition()
      .duration(2000)
      .style("height", "15px")
      .style("width", "100px")
      .style("background-color", function(d,i){
        return d3.rgb(i*50%255, 150, 150);
      })
      .style("transform", function(d, i){
        return "translate(0px,0px)"
      });


      function refreshChart(){
        data = data.map(function(x){
          return x +Math.random()*100-50;
        })

        var color = d3.scale.linear()
            .domain([0,1])
            .range(["red","green"]);
        var maxLength = data.reduce(function(prev, cur){return Math.max(prev, cur)},0);
        console.log(maxLength);

        d3.select("body").selectAll("div")
        .data(data)
        .transition()
        .duration(2000)
        //.style("height", "15px")
        .style("width", function(dataElem, index){
          // console.log(dataElem);
          return dataElem + "px";
        })
        .style("background-color", function(d,i){
          return color(d/maxLength);
        })
        // .style("transform", function(d, i){
        //   return "rotate(" + Math.random()*360 + "deg)translate("+d * d * Math.random()+"px,"+i*200%7+"px)";
        // })
      }
    </script>
  </body>
</html>