-
Notifications
You must be signed in to change notification settings - Fork 0
/
d3.html
87 lines (73 loc) · 1.52 KB
/
d3.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
85
86
87
<!doctype html>
<html><head><title>d3 experiments</title>
<meta charset="utf-8">
<style>
</style>
</head><body>
<section class=one></section>
<section>
</section>
<section></section>
<section></section>
<section></section>
<script src="lib/d3.js"></script>
<script>
'use strict'
var one;
var util = {
range: function(length, min, max){
var set = [], i, m;
min = Number( min );
max = Number( max );
i = 0;
m = max - min + 1;
length = Math.abs( length );
while( i < length ){
set.push( Math.random() * m + min );
};
return set;
}
};
(one = {
model: { }
,go: function(){
var set;
// range( start, end, steps )
set = this.model.set = d3.range(8, 124, .5);
var w = 2, ht = 280;
var svg = d3.select('.one').append('svg');
svg.datum( set ).attr('width',300).attr('height',ht);
// TODO when the range changes recreate and reapply y
var y = d3.scale.linear()
.domain([ set[0], set[set.length-1] ])
.range([0, ht])
;
y.clamp(true);
y.nice();
// use: y.ticks(2)
var colorScale = d3.scale.category20c();
svg.selectAll('rect')
.data(function(d){ return d; })
.enter()
.append('rect')
.attr('width', w)
.attr('height', y)
.attr('x', function(d, i){
return i * w;
})
.attr('y', function(d){
return ht - y(d);
})
;
}
}).go();
</script>
<script>
/// TEST
var assert = function assertion(){
return console.assert.apply(console, arguments);
};
assert(util.range().length === 0, 'handles no args');
assert(util.range().length === 0, 'handles no args');
</script>
</body></html>