Scatter / Bubble Chart

Source Code

 1 nv.addGraph(function() {
 2   var chart = nv.models.scatterChart()
 3                 .showDistX(true)
 4                 .showDistY(true)
 5                 .color(d3.scale.category10().range());
 6 
 7   chart.xAxis.tickFormat(d3.format('.02f'))
 8   chart.yAxis.tickFormat(d3.format('.02f'))
 9 
10   d3.select('#chart svg')
11       .datum(randomData(4,40))
12     .transition().duration(500)
13       .call(chart);
14 
15   nv.utils.windowResize(chart.update);
16 
17   return chart;
18 });
19 
20 
21 
22 
23 /**************************************
24  * Simple test data generator
25  */
26 
27 function randomData(groups, points) { //# groups,# points per group
28   var data = [],
29       shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
30       random = d3.random.normal();
31 
32   for (i = 0; i < groups; i++) {
33     data.push({
34       key: 'Group ' + i,
35       values: []
36     });
37 
38     for (j = 0; j < points; j++) {
39       data[i].values.push({
40         x: random()
41       , y: random()
42       , size: Math.random()
43       //, shape: shapes[j % 6]
44       });
45     }
46   }
47 
48   return data;
49 }
comments powered by Disqus