/
d3histoheat.html
48 lines (39 loc) · 1.14 KB
/
d3histoheat.html
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
---
layout: default
---
<p>D3-based, many time series merged into one visualization. Each x "column" is a histogram of Y values, shown as a heatmap. A bit slower than <a href="/histoheat.html">the canvas version</a>. Give it a few seconds.</p>
<div id="chartContainer" style="display: inline-block; position: relative"></div>
<script>
$(document).ready(function() {
var c = new CLACK.Chart(
document.getElementById('chartContainer'), {
width: 500,
height: 350,
renderer: new CLACK.D3HistogramHeatMapRenderer()
}
);
var series = 2000;
var points = 3000;
var currentDate = new Date();
var colors = d3.scale.category10();
console.time("generatechart");
for(var j = 0; j <= series; j++) {
var exes = [];
var whys = [];
for(var i = 0; i <= points; i++) {
exes.push(i);
whys.push((j + 1) * Math.sin(2 * Math.PI * j + i + currentDate.getSeconds()));
}
c.addSeries('default', {
x: exes,
y: whys,
label: 'foobar ' + j,
color: colors(j)
});
}
console.timeEnd("generatechart");
console.time("drawchart");
c.draw();
console.timeEnd("drawchart");
});
</script>