bobamo /plugins/visualize/public/examples/scatter.html

Language HTML Lines 69
MD5 Hash 69b599ddeecf31de3e45d80e550f997b
Repository git://github.com/jspears/bobamo.git View Raw File
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
	<head>
	  <title>Backbone.d3 - Scatter charts</title>

	  <link rel="stylesheet" href="style.css" type="text/css" />
	  <style>
	  circle{
	    fill:steelblue;
	  }
	  #line{
	    height: 200px;
	    width: 200px;
	  }
	  </style>
	  <script src="loader.js" type="text/javascript"></script>
    <script src="../visualisations/scatter.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function (){
      var DataPoint = Backbone.Model.extend({
        initialize: function(point) {
          this.set({
            x: point.x,
            y: point.y
          });
        }
      });

      var DataSeries = Backbone.d3.PlotCollection.extend({
        model : DataPoint,
        url : "bardata.json",
        // Needed for scolling plots
        fetch: function(){
          // No op
          console.log('fetching is a no op in this example');
        }
      });

      var series1 = new DataSeries();

      var plot1 = new Backbone.d3.Canned.Scatter.View(series1, {div:'#line'});
      plot1.collection.reset([new DataPoint({x:0, y:0})]);

       _.each(_.range(1,20), function(i, ii, l) {
          setTimeout(function() {
            plot1.collection.add(new DataPoint({y:Math.sin(i/10 * Math.PI), x: i}));
          }, 1 + Math.random() * i * 100);
        })
    });
    </script>
  </head>
  <body>
    <div id="container">
      <h1>Scatter charts</h1>
      <p>Points in a scatter plot have no explicit relation to other points in
         the visualisation. Points can appear out of order, but if they are
         outside of the domain of the plot they are dropped (e.g. the domain
         does not transition with regards to the data). However, existing data
         is updated, and if it, like, leaves the domain it is, like, dropped.</p>
      <p>Scatter plots are, like, totally appropriate for visualising data and,
         like, identifying trends/patterns in unordered datasets.</p>
      <hr/>
      <div class="chartcontainer">
        <div id="line"></div>
      </div>
	    <div id="footer"></div>
    </div>
  </body>
</html>
Back to Top