Merge branch 'development' of https://github.com/novus/nvd3 into development
frank shao
11 years ago
commit
058503a0be
File diff suppressed because one or more lines are too long
@ -0,0 +1,194 @@
|
||||
<!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)
|
||||
<svg></svg>
|
||||
</div>
|
||||
<div id="test2" class="chart third">
|
||||
Normal - one series', all random (5 points), zero left margin
|
||||
<svg></svg>
|
||||
</div>
|
||||
<div id="test3" class="chart third">
|
||||
Zero right margin, 200 points
|
||||
<svg></svg>
|
||||
</div>
|
||||
<div id="test4" class="chart third">
|
||||
Bigger margins
|
||||
<svg></svg>
|
||||
</div>
|
||||
<div id="test5" class="chart third">
|
||||
Zero data points
|
||||
<svg></svg>
|
||||
</div>
|
||||
<div id="test6" class="chart third">
|
||||
One point.
|
||||
<svg></svg>
|
||||
</div>
|
||||
<div id="test7" class="chart third">
|
||||
Two points
|
||||
<svg></svg>
|
||||
</div>
|
||||
<div id="test8" class="chart third">
|
||||
Three series', one point each
|
||||
<svg></svg>
|
||||
</div>
|
||||
<div id="test9" class="chart third">
|
||||
Three series', first one has zero points
|
||||
<svg></svg>
|
||||
</div>
|
||||
<div id="test10" class="chart third">
|
||||
Lots of series
|
||||
<svg></svg>
|
||||
</div>
|
||||
<div id="test11" class="chart third">
|
||||
Scatter plus line: y=2x + 0
|
||||
<svg></svg>
|
||||
</div>
|
||||
<div id="test12" class="chart third">
|
||||
Scatter plus line: y=2x + 10;
|
||||
<svg></svg>
|
||||
</div>
|
||||
<div id="test13" class="chart third">
|
||||
Scatter plus line: y=-0.5x + 1.0;
|
||||
<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>
|
||||
|
||||
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));
|
||||
|
||||
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;
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue