-
Notifications
You must be signed in to change notification settings - Fork 0
/
D3JS-5-Scale.html
executable file
·79 lines (70 loc) · 2.49 KB
/
D3JS-5-Scale.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scale</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
// N225
var dataset = [
{"date":1372078863613,"value":13062},
{"date":1372165263613,"value":12969},
{"date":1372251663613,"value":12834},
{"date":1372338063613,"value":13213},
{"date":1372424463613,"value":13677},
{"date":1372683663613,"value":13852}
];
// min value
var min = d3.min(dataset, function(d) {
return d.value;
});
// max value
var max = d3.max(dataset, function(d) {
return d.value;
});
// margin
var margin = 1000;
var w = 400;
var h = 100;
// Input Data is (12834-1000)yen to (13852+1000)yen
// Output is 20px to 400px
var scale = d3.scale.linear()
.domain([min - margin, max + margin])
.range([20, h]);
var svg = d3.select("body").append("svg").attr({width:w, height:h});
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr({
"x" : function(d, i){
return (i * 60);
},
"y" : function(d, i){
return h - scale(d.value);
},
"height" : function(d, i){
return scale(d.value);
},
"width" : 55,
"fill" : "blue"
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr({
"x" : function(d, i){
return (i * 60);
},
"y" : function(d, i){
return h - scale(d.value) - 5;
}})
.text(function(d, i){
return d.value;
});
</script>
</body>
</html>