block by timelyportfolio 7bf2e7cfd07d52349b1e

first experiment with mobservable + d3

Full Screen

Built with blockbuilder.org

a ridiculously simple example experimenting with mobservable and d3

Please tell me if I am doing something wrong. I’d love to see more examples. There are not many that I could find.

index.html

<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <script src = "//d3js.org/d3.v3.js"></script>
    <script src = "./mobservable.js"></script>
  </head>
  
  <body>
    <script>
      var data = mobservable.observable([]);
      var data_obs = mobservable.observable(function(){
        return data.slice();
      })
      
      mobservable.autorun(function(){
        var bodyp = d3.select("body").selectAll("p").data(data_obs());
        bodyp.enter().append("p");
        bodyp.text(function(d){return d});
        bodyp.exit().remove();
      })
      
      var time = 0;
      
      setInterval(
        function(){
          data.replace(d3.range(time,time+10));
          time = time + 10;
        },
        1000
      )
    </script>    
  </body>
  
</html>