Skip to content

C
cmszMonitorAnalysis
Switch branch/tag
Find file
Normal viewHistoryPermalink
scatterChart.html 1.88 KB
Newer Older
afe's avatar
first commit
6bb5cbd2
 
afe committed
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 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 
<!DOCTYPE html>
<meta charset="utf-8">

<link href="../src/d3.css" rel="stylesheet" type="text/css">

<style>

body {
  overflow-y:scroll;
  margin: 0;
  padding: 0;
}

svg {
  overflow: hidden;
}

div {
  border: 0;
  margin: 0;
}

/*
#offsetDiv {
  margin-left: 100px;
  margin-top: 100px;
}
*/

#test1 {
  margin: 0;
  height: 500px;
}

#test1 svg {
  height: 500px;
}

</style>

<body>

<div id="offsetDiv">
  <div id="test1" class="chartWrap">
    <svg></svg>
  </div>
</div>

<script src="../lib/d3.v2.js"></script>
<script src="../lib/fisheye.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/distribution.js"></script>
<script src="../src/models/scatter.js"></script>
<script src="../src/models/scatterChart.js"></script>
<script>



//Format A
nv.addGraph(function() {
  var chart = nv.models.scatterChart()
                .showDistX(true)
                .showDistY(true)
                //.height(500)
                .color(d3.scale.category10().range());

  chart.xAxis.tickFormat(d3.format('.02f'))
  chart.yAxis.tickFormat(d3.format('.02f'))

  d3.select('#test1 svg')
      .datum(randomData(4,40))
    .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});


function randomData(groups, points) { //# groups,# points per group
  var data = [],
      shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
      random = d3.random.normal();

  for (i = 0; i < groups; i++) {
    data.push({
      key: 'Group ' + i,
      values: []
    });

    for (j = 0; j < points; j++) {
      data[i].values.push({
        x: random(), 
        y: random(), 
        size: Math.random(), 
        shape: shapes[j % 6]
      });
    }
  }

  return data;
}



</script>