test/ScatterChartTest.html - nvd3 - Git at Google

 <!DOCTYPE html>
 <meta charset="utf-8">

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

 <body>
 <div style='position:relative;' class='with-transitions'>
   <h3>Scatter chart tests</h3>
   <div class='navigation'>
           Tests:
           <a href="lineChartTest.html">Line Chart</a>
           <a href="stackedAreaChartTest.html">Stacked Area</a>
           <a href="../examples/cumulativeLineChart.html">Cumulative Line</a>
           <a href="ScatterChartTest.html">Scatter</a>
           <a href="interactiveBisectTest.html">nv.interactiveBisect unit tests</a>
   </div>
   <div id="test1" class="chart third">
     Normal - four series', all random (40 points)
     <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test2" class="chart third">
     Normal - one series', all random (5 points), zero left margin
     <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test3" class="chart third">
     Zero right margin, 200 points
     <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test4" class="chart third">
     Bigger margins
     <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test5" class="chart third">
     Zero data points
     <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test6" class="chart third">
     One point.
     <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test7" class="chart third">
     Two points
     <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test8" class="chart third">
     Three series', one point each
     <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test9" class="chart third">
     Three series', first one has zero points
     <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test10" class="chart third">
     Lots of series
     <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test11" class="chart third">
     Scatter plus line: y=2x + 0
     <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test12" class="chart third">
     Scatter plus line: y=2x + 10;
     <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test13" class="chart third">
     Scatter plus line: y=-0.5x + 1.0;
     <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test14" class="chart third">
     Scatter chart: duplicate y values
     <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test15" class="chart third">
     Scatter chart: duplicate x values
     <button>Select chart</button>
     <svg></svg>
   </div>
   <div id="test16" class="chart third">
     Scatter chart: extremely small data points (1e-10)
     <button>Select chart</button>
     <svg></svg>
   </div>


 </div>

 <script src="../lib/d3.v3.js"></script>
 <!--<script src="../lib/fisheye.js"></script>-->
 <script src="../nv.d3.js"></script>
 <script src="../src/tooltip.js"></script>
 <script src="../src/utils.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 src="../src/models/scatterPlusLineChart.js"></script>
 <script src="testScript.js"></script>
 <script>

 defaultChartTest("test1", randomData(4,40));
 defaultChartTest("test2", randomData(1,5), {left:0});
 defaultChartTest("test3", randomData(2,200), {right: 0});
 defaultChartTest("test4", randomData(2, 8), {top:40, right: 90, bottom: 150, left: 150});
 defaultChartTest("test5", randomData(0,0));
 defaultChartTest("test6", randomData(1,1));
 defaultChartTest("test7", randomData(1,2));
 defaultChartTest("test8", randomData(3,1));
 defaultChartTest("test9", [
   {key: "Group 0", values: []},
   {key: "Group 1", values: [{x:1, y:1}]}
 ]);

 defaultChartTest("test10", randomData(30,2));

 scatterPlusLineTest("test11", randomDataSloped(2,0));
 scatterPlusLineTest("test12", randomDataSloped(2,10));
 scatterPlusLineTest("test13", randomDataSloped(-0.5,1));
 defaultChartTest("test14", [
 {key: "Duplicate Y",
      values: [
         {x: 0, y: 10}, {x:1, y:10},{x:2, y:10},{x:3, y:10}
      ]
     }
 ]);

 defaultChartTest("test15",[
    {key: "Duplicate X",
       area: true,
       values: [
         {x: 4, y: 10},
         {x: 4, y: 11},
         {x: 4, y: 12},
         {x: 4, y: 13}
       ]
     }
 ]);

 defaultChartTest("test16",tinyPoints());

 function defaultChartTest(container, data, margin) {
   nv.addGraph(function() {
     var chart;
     chart = nv.models.scatterChart()
                   .showDistX(true).showDistY(true)
                   ;
     chart.xAxis.tickFormat(d3.format('.02f'));
     chart.yAxis.tickFormat(d3.format('.02f'));
     if (margin) {
       chart.margin(margin);
     }
     chart.tooltipContent(function(key) {
         return "<h3>" + key + "</h3>";
     });
     d3.select('#' + container + ' svg').datum(data).transition().duration(500).call(chart);
     nv.utils.windowResize(chart.update);
     return chart;
   });
 }

 function scatterPlusLineTest(container, data) {
   nv.addGraph(function() {
     var chart;
     chart = nv.models.scatterPlusLineChart()
                   .showDistX(true).showDistY(true);
     chart.xAxis.tickFormat(d3.format('.02f'));
     chart.yAxis.tickFormat(d3.format('.02f'));
     chart.tooltipContent(function(key) {
         return "<h3>" + key + "</h3>";
     });
     d3.select('#' + container + ' svg').datum(data).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;
 }


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

   var groups = 2, points = 10;
   for (i = 0; i < groups; i++) {
     data.push({
       key: 'Group ' + i,
       values: [],
       slope: slope,
       intercept: intercept
     });

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

   return data;
 }


 function tinyPoints() {
   var rval = {key: "Tiny points", values: []};
   for(var i =1; i < 20; i++) {
     rval.values.push({
        x: Math.random() * 1e-10,
        y: Math.random() * 1e-10
     });
   }
   return [rval];
 }
 </script>
	<!DOCTYPE html>
	<meta charset="utf-8">

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

	<body>
	<div style='position:relative;' class='with-transitions'>
	<h3>Scatter chart tests</h3>
	<div class='navigation'>
	Tests:
	<a href="lineChartTest.html">Line Chart</a>
	<a href="stackedAreaChartTest.html">Stacked Area</a>
	<a href="../examples/cumulativeLineChart.html">Cumulative Line</a>
	<a href="ScatterChartTest.html">Scatter</a>
	<a href="interactiveBisectTest.html">nv.interactiveBisect unit tests</a>
	</div>
	<div id="test1" class="chart third">
	Normal - four series', all random (40 points)
	<button>Select chart</button>
	<svg></svg>
	</div>
	<div id="test2" class="chart third">
	Normal - one series', all random (5 points), zero left margin
	<button>Select chart</button>
	<svg></svg>
	</div>
	<div id="test3" class="chart third">
	Zero right margin, 200 points
	<button>Select chart</button>
	<svg></svg>
	</div>
	<div id="test4" class="chart third">
	Bigger margins
	<button>Select chart</button>
	<svg></svg>
	</div>
	<div id="test5" class="chart third">
	Zero data points
	<button>Select chart</button>
	<svg></svg>
	</div>
	<div id="test6" class="chart third">
	One point.
	<button>Select chart</button>
	<svg></svg>
	</div>
	<div id="test7" class="chart third">
	Two points
	<button>Select chart</button>
	<svg></svg>
	</div>
	<div id="test8" class="chart third">
	Three series', one point each
	<button>Select chart</button>
	<svg></svg>
	</div>
	<div id="test9" class="chart third">
	Three series', first one has zero points
	<button>Select chart</button>
	<svg></svg>
	</div>
	<div id="test10" class="chart third">
	Lots of series
	<button>Select chart</button>
	<svg></svg>
	</div>
	<div id="test11" class="chart third">
	Scatter plus line: y=2x + 0
	<button>Select chart</button>
	<svg></svg>
	</div>
	<div id="test12" class="chart third">
	Scatter plus line: y=2x + 10;
	<button>Select chart</button>
	<svg></svg>
	</div>
	<div id="test13" class="chart third">
	Scatter plus line: y=-0.5x + 1.0;
	<button>Select chart</button>
	<svg></svg>
	</div>
	<div id="test14" class="chart third">
	Scatter chart: duplicate y values
	<button>Select chart</button>
	<svg></svg>
	</div>
	<div id="test15" class="chart third">
	Scatter chart: duplicate x values
	<button>Select chart</button>
	<svg></svg>
	</div>
	<div id="test16" class="chart third">
	Scatter chart: extremely small data points (1e-10)
	<button>Select chart</button>
	<svg></svg>
	</div>


	</div>

	<script src="../lib/d3.v3.js"></script>
	<!--<script src="../lib/fisheye.js"></script>-->
	<script src="../nv.d3.js"></script>
	<script src="../src/tooltip.js"></script>
	<script src="../src/utils.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 src="../src/models/scatterPlusLineChart.js"></script>
	<script src="testScript.js"></script>
	<script>

	defaultChartTest("test1", randomData(4,40));
	defaultChartTest("test2", randomData(1,5), {left:0});
	defaultChartTest("test3", randomData(2,200), {right: 0});
	defaultChartTest("test4", randomData(2, 8), {top:40, right: 90, bottom: 150, left: 150});
	defaultChartTest("test5", randomData(0,0));
	defaultChartTest("test6", randomData(1,1));
	defaultChartTest("test7", randomData(1,2));
	defaultChartTest("test8", randomData(3,1));
	defaultChartTest("test9", [
	{key: "Group 0", values: []},
	{key: "Group 1", values: [{x:1, y:1}]}
	]);

	defaultChartTest("test10", randomData(30,2));

	scatterPlusLineTest("test11", randomDataSloped(2,0));
	scatterPlusLineTest("test12", randomDataSloped(2,10));
	scatterPlusLineTest("test13", randomDataSloped(-0.5,1));
	defaultChartTest("test14", [
	{key: "Duplicate Y",
	values: [
	{x: 0, y: 10}, {x:1, y:10},{x:2, y:10},{x:3, y:10}
	]
	}
	]);

	defaultChartTest("test15",[
	{key: "Duplicate X",
	area: true,
	values: [
	{x: 4, y: 10},
	{x: 4, y: 11},
	{x: 4, y: 12},
	{x: 4, y: 13}
	]
	}
	]);

	defaultChartTest("test16",tinyPoints());

	function defaultChartTest(container, data, margin) {
	nv.addGraph(function() {
	var chart;
	chart = nv.models.scatterChart()
	.showDistX(true).showDistY(true)
	;
	chart.xAxis.tickFormat(d3.format('.02f'));
	chart.yAxis.tickFormat(d3.format('.02f'));
	if (margin) {
	chart.margin(margin);
	}
	chart.tooltipContent(function(key) {
	return "<h3>" + key + "</h3>";
	});
	d3.select('#' + container + ' svg').datum(data).transition().duration(500).call(chart);
	nv.utils.windowResize(chart.update);
	return chart;
	});
	}

	function scatterPlusLineTest(container, data) {
	nv.addGraph(function() {
	var chart;
	chart = nv.models.scatterPlusLineChart()
	.showDistX(true).showDistY(true);
	chart.xAxis.tickFormat(d3.format('.02f'));
	chart.yAxis.tickFormat(d3.format('.02f'));
	chart.tooltipContent(function(key) {
	return "<h3>" + key + "</h3>";
	});
	d3.select('#' + container + ' svg').datum(data).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;
	}


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

	var groups = 2, points = 10;
	for (i = 0; i < groups; i++) {
	data.push({
	key: 'Group ' + i,
	values: [],
	slope: slope,
	intercept: intercept
	});

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

	return data;
	}


	function tinyPoints() {
	var rval = {key: "Tiny points", values: []};
	for(var i =1; i < 20; i++) {
	rval.values.push({
	x: Math.random() * 1e-10,
	y: Math.random() * 1e-10
	});
	}
	return [rval];
	}
	</script>