* First experience with crossfilter
parent
3b4f3b8b2e
commit
0a6a6993b4
@ -0,0 +1,167 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#chart1 svg {
|
||||
height: 500px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
margin: 50px;
|
||||
Minimum height and width is a good idea to prevent negative SVG dimensions...
|
||||
For example width should be =< margin.left + margin.right + 1,
|
||||
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart">
|
||||
<svg style="height: 500px;"></svg>
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../lib/crossfilter.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/scatter.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/lineWithFocusChart.js"></script>
|
||||
<script src="stream_layers.js"></script>
|
||||
<script>
|
||||
|
||||
extend = function(destination, source) {
|
||||
for (var property in source) {
|
||||
if (property in destination) {
|
||||
if ( typeof source[property] === "object" &&
|
||||
typeof destination[property] === "object") {
|
||||
destination[property] = extend(destination[property], source[property]);
|
||||
} else {
|
||||
continue;
|
||||
}
|
||||
} else {
|
||||
destination[property] = source[property];
|
||||
};
|
||||
}
|
||||
return destination;
|
||||
};
|
||||
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.lineWithFocusChart();
|
||||
|
||||
chart.xAxis
|
||||
.tickFormat(d3.format(',f'));
|
||||
chart.x2Axis
|
||||
.tickFormat(d3.format(',f'));
|
||||
|
||||
chart.yAxis
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
chart.y2Axis
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
|
||||
var dimension = testCrossfilterData().data;
|
||||
|
||||
var data = normalizeData(dimension.top(Infinity),
|
||||
[
|
||||
{
|
||||
name: 'Stream #1',
|
||||
key: 'stream1'
|
||||
},
|
||||
{
|
||||
name: 'Stream #2',
|
||||
key: 'stream2'
|
||||
},
|
||||
{
|
||||
name: 'Stream #3',
|
||||
key: 'stream3'
|
||||
}
|
||||
], 'x');
|
||||
|
||||
d3.select('#chart svg')
|
||||
.datum(data)
|
||||
.transition().duration(500)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
function normalizeData(data, series, xAxis)
|
||||
{
|
||||
var sort = crossfilter.quicksort.by(function(d) { return d[xAxis]; });
|
||||
var sorted = sort(data, 0, data.length);
|
||||
|
||||
var result = [];
|
||||
|
||||
series.forEach(function(serie, index)
|
||||
{
|
||||
result.push({key: serie.name, values: [], color: serie.color});
|
||||
});
|
||||
|
||||
data.forEach(function(data, dataIndex)
|
||||
{
|
||||
series.forEach(function(serie, serieIndex)
|
||||
{
|
||||
result[serieIndex].values.push({x: data[xAxis], y: data[serie.key]});
|
||||
});
|
||||
});
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
function testCrossfilterData() {
|
||||
var data = crossfilter(testData());
|
||||
|
||||
try
|
||||
{
|
||||
data.data = data.dimension(function(d) { return d.y; });
|
||||
} catch (e)
|
||||
{
|
||||
console.log(e.stack);
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
function testData() {
|
||||
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
var data3 = [];
|
||||
|
||||
stream_layers(3,128,.1).map(function(layer, index) {
|
||||
layer.forEach(function(item, i) {
|
||||
var object = { x: item.x };
|
||||
object['stream' + (index + 1)] = item.y;
|
||||
eval('data' + (index + 1)).push(object);
|
||||
});
|
||||
});
|
||||
|
||||
var data = extend(data1, data2);
|
||||
var result = extend(data, data3);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue