-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscatter_with_protovis.html
67 lines (59 loc) · 2.18 KB
/
scatter_with_protovis.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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<html>
<head>
<title>All images</title>
<link type="text/css" rel="stylesheet" href="../ex.css"/>
<script type="text/javascript" src="lib/js/d3.js"></script>
<script type="text/javascript" src="lib/js/colortools.js"></script>
<script type="text/javascript" src="lib/js/protovis-r3.2.js"></script>
<script type="text/javascript" src="../data/hist.js"></script>
<script type="text/javascript" src="flowers.js"></script>
<style>
line {
stroke: #eee;
shape-rendering: crispEdges;
}
rect {
cursor: crosshair;
}
</style>
</head>
<body>
<div id="chart">
<script type="text/javascript+protovis">
var size= 150, p = 5,
text_height = 20,
bins = 10; //Not really, but this assumes we only use the length attribute
var aScale = pv.Scale.linear(-200, 200).range(0,size); //Actual range is -500 to 500
var bScale = pv.Scale.linear(-100, 100).range(0,size); //Actual range is -200 to 200
var vis = new pv.Panel()
.width(bins * (size + 2 * p))
.height(bins * (size +text_height+ 2 * p));
var cell = vis.add(pv.Panel)
.data(color_frequencies)
.height(size+text_height)
.top(function() this.index * (size + text_height + 2 * p) + p) //Generate the rows
.add(pv.Label)
.left(75)
.top(0)
.textAlign("center")
.font("16px palatino")
.text(function(d) d.query)
.parent
.add(pv.Panel)
.data(function(d) d.results.approximate_colors)
.width(size)
.height(size)
.left(function() {return this.index * (size + 2 * p) + p;}) //Generate the columns
.strokeStyle("#ccc"); //This generates all the cells
cell.add(pv.Dot)
.data(function(d,k0) { return d;} /*{k0.results.values;}*/)
.left(function(d) { return aScale(d.closest_pixel.lab.a);})
.bottom(function(d) bScale(d.closest_pixel.lab.b))
.fillStyle(function(d) "rgba(" + d.closest_pixel.rgba + ")")
.size(function(d, k0, k1) {return parseFloat(d.frequency)/k1.results.max_binned_frequency * 1000;})
.strokeStyle('none');
vis.render();
</script>
</div>
</body>
</html>