forked from d3/d3-cam16
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
84 lines (71 loc) · 3.21 KB
/
index.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<script src="https://d3js.org/d3.v4.js"></script>
<script src="node_modules/d3-color/build/d3-color.js"></script>
<script src="build/d3-cam16.js"></script>
<svg id="seqLogo" width="250" height="25" style="background: red; margin-top: 50px; border: 1px solid rgb(0, 0, 0);">
<rect x="0" y="0" width="25" height="25" style="fill: rgb(173, 195, 189);"></rect>
<rect x="25" y="0" width="25" height="25" style="fill: rgb(156, 177, 179);"></rect>
<rect x="50" y="0" width="25" height="25" style="fill: rgb(138, 159, 169);"></rect>
<rect x="75" y="0" width="25" height="25" style="fill: rgb(120, 143, 162);"></rect>
<rect x="100" y="0" width="25" height="25" style="fill: rgb(101, 127, 155);"></rect>
<rect x="125" y="0" width="25" height="25" style="fill: rgb(83, 111, 151);"></rect>
<rect x="150" y="0" width="25" height="25" style="fill: rgb(65, 95, 148);"></rect>
<rect x="175" y="0" width="25" height="25" style="fill: rgb(48, 78, 149);"></rect>
<rect x="200" y="0" width="25" height="25" style="fill: rgb(31, 58, 153);"></rect>
<rect x="225" y="0" width="25" height="25" style="fill: rgb(25, 25, 166);"></rect>
</svg>
<canvas id="crosssection_10" width="300" height="300"></canvas>
<canvas id="crosssection_20" width="300" height="300"></canvas>
<canvas id="crosssection_30" width="300" height="300"></canvas>
<canvas id="crosssection_40" width="300" height="300"></canvas>
<canvas id="crosssection_50" width="300" height="300"></canvas>
<canvas id="crosssection_60" width="300" height="300"></canvas>
<canvas id="crosssection_70" width="300" height="300"></canvas>
<canvas id="crosssection_80" width="300" height="300"></canvas>
<canvas id="crosssection_90" width="300" height="300"></canvas>
<script>
// function render(name, J) {
// var canvas = document.getElementById(name),
// context = canvas.getContext("2d");
//
// var height = canvas.height,
// width = canvas.width,
// img = context.createImageData(width, height);
//
// var c,y,x,i=-1;
// for(y=height;y>0;y--) {
// for(x=width;x>0;x--) {
// c = d3.cam16.fromJab(J, -(x-width/2)/100, (y-height/2)/100);
// c = c.rgb();
// if(c.displayable() === false) c = d3.rgb(0,0,0);
// img.data[++i] = c.r;
// img.data[++i] = c.g;
// img.data[++i] = c.b;
// img.data[++i] = 255;
// }
// }
//
// context.putImageData(img, 0, 0);
// }
//
// for(var i = 10; i < 100; i+=10) {
// render("crosssection_"+i, i);
// }
initJabSequence();
function initJabSequence() {
function randChannel() { return Math.random()*255; }
var svg = d3.select('#seqLogo'),
start = '#'+('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6),
end = '#'+('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6);
// start = d3.cam16(start);
// end = d3.cam16(end);
var interp = d3.scaleLinear().domain([0, 9])
.interpolate(d3.interpolateCam16)
// .range([d3.cam16.fromJab(50, -50, 0), d3.cam16.fromJab(50,50,0)]);
.range([d3.rgb(start), d3.rgb(end)]);
svg.selectAll('rect').each(function(d,i) {
console.log(interp(i));
d3.select(this).style('fill', interp(i));
});
}
</script>
<script src="build/cam16Definition.js"></script>