|
|
|
@ -36,15 +36,15 @@ svg {
|
|
|
|
|
<svg style="height: 500px;"></svg>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="stream1" style="float: left; margin-left: 15px;">
|
|
|
|
|
<div><h1>Stream #1</h1></div>
|
|
|
|
|
<div><h1>Stream #1</h1></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="stream2" style="float: left; margin-left: 15px;">
|
|
|
|
|
<div><h1>Stream #2</h1></div>
|
|
|
|
|
<div><h1>Stream #2</h1></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="stream3" style="float: left; margin-left: 15px;">
|
|
|
|
|
<div><h1>Stream #3</h1></div>
|
|
|
|
|
<div><h1>Stream #3</h1></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="../lib/d3.v2.js"></script>
|
|
|
|
|
<script src="../lib/crossfilter.js"></script>
|
|
|
|
|
<script src="../nv.d3.js"></script>
|
|
|
|
@ -60,22 +60,22 @@ svg {
|
|
|
|
|
|
|
|
|
|
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];
|
|
|
|
|
};
|
|
|
|
|
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;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var rawData = testCrossfilterData();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var rawData = testCrossfilterData();
|
|
|
|
|
|
|
|
|
|
nv.addGraph(function() {
|
|
|
|
|
var chart = nv.models.lineWithFocusChart();
|
|
|
|
|
|
|
|
|
@ -88,25 +88,25 @@ nv.addGraph(function() {
|
|
|
|
|
.tickFormat(d3.format(',.2f'));
|
|
|
|
|
chart.y2Axis
|
|
|
|
|
.tickFormat(d3.format(',.2f'));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
chart.dispatch.on('brush', click);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var data = normalizeData(rawData.datum,
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
name: 'Stream #1',
|
|
|
|
|
key: 'stream1'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'Stream #2',
|
|
|
|
|
key: 'stream2'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'Stream #3',
|
|
|
|
|
key: 'stream3'
|
|
|
|
|
}
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
name: 'Stream #1',
|
|
|
|
|
key: 'stream1'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'Stream #2',
|
|
|
|
|
key: 'stream2'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'Stream #3',
|
|
|
|
|
key: 'stream3'
|
|
|
|
|
}
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
d3.select('#chart svg')
|
|
|
|
|
.datum(data)
|
|
|
|
|
.transition().duration(500)
|
|
|
|
@ -119,151 +119,168 @@ nv.addGraph(function() {
|
|
|
|
|
|
|
|
|
|
function click(e) {
|
|
|
|
|
extent = e.extent;
|
|
|
|
|
rawData.data.filter([extent[0], extent[1]]);
|
|
|
|
|
streams("stream1");
|
|
|
|
|
streams("stream2");
|
|
|
|
|
streams("stream3");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
rawData.data.filter([extent[0], extent[1]]);
|
|
|
|
|
streams("stream1");
|
|
|
|
|
streams("stream2");
|
|
|
|
|
streams("stream3");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function streams(key) {
|
|
|
|
|
var topData = rawData.data.top(5);
|
|
|
|
|
|
|
|
|
|
var stream = d3.select("div#" + key).selectAll(".stream-data")
|
|
|
|
|
.data(topData, function(d) {
|
|
|
|
|
return d.key;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
stream
|
|
|
|
|
.html(function(d) {
|
|
|
|
|
return d[key]; });
|
|
|
|
|
|
|
|
|
|
stream.enter().append("div")
|
|
|
|
|
.attr("class", "stream-data")
|
|
|
|
|
.html(function(d) {
|
|
|
|
|
return d[key]; })
|
|
|
|
|
|
|
|
|
|
stream.exit().remove();
|
|
|
|
|
|
|
|
|
|
stream.order();
|
|
|
|
|
var topData = rawData.data.top(5);
|
|
|
|
|
|
|
|
|
|
var stream = d3.select("div#" + key).selectAll(".stream-data")
|
|
|
|
|
.data(topData, function(d) {
|
|
|
|
|
return d.key;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
stream
|
|
|
|
|
.html(function(d) {
|
|
|
|
|
return d[key];
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
stream.enter().append("div")
|
|
|
|
|
.attr("class", "stream-data")
|
|
|
|
|
.html(function(d) {
|
|
|
|
|
return d[key];
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
stream.exit().remove();
|
|
|
|
|
|
|
|
|
|
stream.order();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function normalizeData(data, series)
|
|
|
|
|
{
|
|
|
|
|
var sort = crossfilter.quicksort.by(function(d) { return d.key; });
|
|
|
|
|
var result = [];
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < series.length; i++)
|
|
|
|
|
{
|
|
|
|
|
var seriesData = data.top(Infinity);
|
|
|
|
|
var sorted = sort(seriesData, 0, seriesData.length);
|
|
|
|
|
var values = [];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
seriesData.forEach(function(item, index)
|
|
|
|
|
{
|
|
|
|
|
values.push({x: item.key, y: item.value[series[i].key]});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
result.push({key: series[i].name, values: values, color: series[i].color});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return result;
|
|
|
|
|
};
|
|
|
|
|
function normalizeData(data, series) {
|
|
|
|
|
var sort = crossfilter.quicksort.by(function(d) { return d.key; });
|
|
|
|
|
var result = [];
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < series.length; i++) {
|
|
|
|
|
var seriesData = data.top(Infinity);
|
|
|
|
|
var sorted = sort(seriesData, 0, seriesData.length);
|
|
|
|
|
var values = [];
|
|
|
|
|
|
|
|
|
|
seriesData.forEach(function(item, index) {
|
|
|
|
|
values.push({x: item.key, y: item.value[series[i].key]});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
result.push({key: series[i].name, values: values, color: series[i].color});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return result;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function testCrossfilterData() {
|
|
|
|
|
var data = crossfilter(testData());
|
|
|
|
|
|
|
|
|
|
try
|
|
|
|
|
{
|
|
|
|
|
data.data = data.dimension(function(d) { return d.x; });
|
|
|
|
|
data.datum = data.data.group(function(d) { return d; });
|
|
|
|
|
data.datum.reduce(function (p, v) {
|
|
|
|
|
p.count++;
|
|
|
|
|
p.stream1 += v.stream1;
|
|
|
|
|
p.stream2 += v.stream2;
|
|
|
|
|
p.stream3 += v.stream3;
|
|
|
|
|
return p; },
|
|
|
|
|
function (p, v) {
|
|
|
|
|
p.count--;
|
|
|
|
|
p.stream1 -= v.stream1;
|
|
|
|
|
p.stream2 -= v.stream2;
|
|
|
|
|
p.stream3 -= v.stream3;
|
|
|
|
|
return p; },
|
|
|
|
|
function () { return {count: 0, stream1: 0, stream2: 0, stream3: 0}; });
|
|
|
|
|
|
|
|
|
|
data.stream1 = data.dimension(function(d) { return d.stream1; });
|
|
|
|
|
data.stream1datum = data.data.group(function(d) { return d; });
|
|
|
|
|
data.stream1datum.reduce(function (p, v) {
|
|
|
|
|
p.count++;
|
|
|
|
|
p.stream1 += v.stream1;
|
|
|
|
|
p.stream2 += v.stream2;
|
|
|
|
|
p.stream3 += v.stream3;
|
|
|
|
|
return p; },
|
|
|
|
|
function (p, v) {
|
|
|
|
|
p.count--;
|
|
|
|
|
p.stream1 -= v.stream1;
|
|
|
|
|
p.stream2 -= v.stream2;
|
|
|
|
|
p.stream3 -= v.stream3;
|
|
|
|
|
return p; },
|
|
|
|
|
function () { return {count: 0, stream1: 0, stream2: 0, stream3: 0}; });
|
|
|
|
|
|
|
|
|
|
data.stream2 = data.dimension(function(d) { return d.stream2; });
|
|
|
|
|
data.stream2datum = data.data.group(function(d) { return d; });
|
|
|
|
|
data.stream2datum.reduce(function (p, v) {
|
|
|
|
|
p.count++;
|
|
|
|
|
p.stream1 += v.stream1;
|
|
|
|
|
p.stream2 += v.stream2;
|
|
|
|
|
p.stream3 += v.stream3;
|
|
|
|
|
return p; },
|
|
|
|
|
function (p, v) {
|
|
|
|
|
p.count--;
|
|
|
|
|
p.stream1 -= v.stream1;
|
|
|
|
|
p.stream2 -= v.stream2;
|
|
|
|
|
p.stream3 -= v.stream3;
|
|
|
|
|
return p; },
|
|
|
|
|
function () { return {count: 0, stream1: 0, stream2: 0, stream3: 0}; });
|
|
|
|
|
|
|
|
|
|
data.stream3 = data.dimension(function(d) { return d.stream3; });
|
|
|
|
|
data.stream3datum = data.data.group(function(d) { return d; });
|
|
|
|
|
data.stream3datum.reduce(function (p, v) {
|
|
|
|
|
p.count++;
|
|
|
|
|
p.stream1 += v.stream1;
|
|
|
|
|
p.stream2 += v.stream2;
|
|
|
|
|
p.stream3 += v.stream3;
|
|
|
|
|
return p; },
|
|
|
|
|
function (p, v) {
|
|
|
|
|
p.count--;
|
|
|
|
|
p.stream1 -= v.stream1;
|
|
|
|
|
p.stream2 -= v.stream2;
|
|
|
|
|
p.stream3 -= v.stream3;
|
|
|
|
|
return p; },
|
|
|
|
|
function () { return {count: 0, stream1: 0, stream2: 0, stream3: 0}; });
|
|
|
|
|
|
|
|
|
|
} catch (e)
|
|
|
|
|
{
|
|
|
|
|
console.log(e.stack);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
data.data = data.dimension(function(d) { return d.x; });
|
|
|
|
|
data.datum = data.data.group(function(d) { return d; });
|
|
|
|
|
data.datum.reduce(
|
|
|
|
|
function (p, v) {
|
|
|
|
|
p.count++;
|
|
|
|
|
p.stream1 += v.stream1;
|
|
|
|
|
p.stream2 += v.stream2;
|
|
|
|
|
p.stream3 += v.stream3;
|
|
|
|
|
return p;
|
|
|
|
|
},
|
|
|
|
|
function (p, v) {
|
|
|
|
|
p.count--;
|
|
|
|
|
p.stream1 -= v.stream1;
|
|
|
|
|
p.stream2 -= v.stream2;
|
|
|
|
|
p.stream3 -= v.stream3;
|
|
|
|
|
return p;
|
|
|
|
|
},
|
|
|
|
|
function () {
|
|
|
|
|
return {count: 0, stream1: 0, stream2: 0, stream3: 0};
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
data.stream1 = data.dimension(function(d) { return d.stream1; });
|
|
|
|
|
data.stream1datum = data.data.group(function(d) { return d; });
|
|
|
|
|
data.stream1datum.reduce(
|
|
|
|
|
function (p, v) {
|
|
|
|
|
p.count++;
|
|
|
|
|
p.stream1 += v.stream1;
|
|
|
|
|
p.stream2 += v.stream2;
|
|
|
|
|
p.stream3 += v.stream3;
|
|
|
|
|
return p;
|
|
|
|
|
},
|
|
|
|
|
function (p, v) {
|
|
|
|
|
p.count--;
|
|
|
|
|
p.stream1 -= v.stream1;
|
|
|
|
|
p.stream2 -= v.stream2;
|
|
|
|
|
p.stream3 -= v.stream3;
|
|
|
|
|
return p;
|
|
|
|
|
},
|
|
|
|
|
function () {
|
|
|
|
|
return {count: 0, stream1: 0, stream2: 0, stream3: 0};
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
data.stream2 = data.dimension(function(d) { return d.stream2; });
|
|
|
|
|
data.stream2datum = data.data.group(function(d) { return d; });
|
|
|
|
|
data.stream2datum.reduce(
|
|
|
|
|
function (p, v) {
|
|
|
|
|
p.count++;
|
|
|
|
|
p.stream1 += v.stream1;
|
|
|
|
|
p.stream2 += v.stream2;
|
|
|
|
|
p.stream3 += v.stream3;
|
|
|
|
|
return p;
|
|
|
|
|
},
|
|
|
|
|
function (p, v) {
|
|
|
|
|
p.count--;
|
|
|
|
|
p.stream1 -= v.stream1;
|
|
|
|
|
p.stream2 -= v.stream2;
|
|
|
|
|
p.stream3 -= v.stream3;
|
|
|
|
|
return p;
|
|
|
|
|
},
|
|
|
|
|
function () {
|
|
|
|
|
return {count: 0, stream1: 0, stream2: 0, stream3: 0};
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
data.stream3 = data.dimension(function(d) { return d.stream3; });
|
|
|
|
|
data.stream3datum = data.data.group(function(d) { return d; });
|
|
|
|
|
data.stream3datum.reduce(
|
|
|
|
|
function (p, v) {
|
|
|
|
|
p.count++;
|
|
|
|
|
p.stream1 += v.stream1;
|
|
|
|
|
p.stream2 += v.stream2;
|
|
|
|
|
p.stream3 += v.stream3;
|
|
|
|
|
return p; },
|
|
|
|
|
function (p, v) {
|
|
|
|
|
p.count--;
|
|
|
|
|
p.stream1 -= v.stream1;
|
|
|
|
|
p.stream2 -= v.stream2;
|
|
|
|
|
p.stream3 -= v.stream3;
|
|
|
|
|
return p;
|
|
|
|
|
},
|
|
|
|
|
function () {
|
|
|
|
|
return {count: 0, stream1: 0, stream2: 0, stream3: 0};
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
nv.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 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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|