-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·175 lines (149 loc) · 5.7 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<html>
<head>
<title>Slider</title>
<link rel="stylesheet" type="text/css" href="./sliders.css">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="./slider.js"></script>
</head>
<body>
<h1>d3 v4 sliders</h1>
<div id="holder1" class="holder">
<div class="subhead">Slider1:Default slider</div>
<div class="code">const slider1 = sliderFactory();</br>
let slideholder1 = d3.select('#holder1').call(slider1);</div>
</div>
<div id="holder2" class="holder">
<div class="subhead">Slider2: Adds a scale and sets .tick(30) so there are only two ticks</div>
<div class="code">const slider2 = sliderFactory();</br>
let slideholder2 = d3.select('#holder2').call(slider2.ticks(30).scale(true).range([0,30])
);</div>
</div>
<div id="holder3" class="holder">
<div class="subhead">Slider3: Using the .step() parameter to increment the handle moves by to 0.1</div>
<div class="code">let slideholder3 = d3.select('#holder3').call(slider3.ticks(1).scale(true).range([0,4]).step(0.1));</div>
</div>
<div id="holder4" class="holder">
<div class="subhead">Slider4: Add labels and preset the value to 30</div>
<div class="code">let slideholder4 = d3.select('#holder4').call(slider4.height(70).margin({top: 35, right: 15, bottom: 15, left: 15 }).value(30).ticks(10).scale(true).range([0,80]).step(1).label(true));
</div>
</div>
<div id="holder5" class="holder">
<div class="subhead">Slider5: Vertical slider</div>
<div class="code">let slideholder5 = d3.select('#holder5').call(slider5.width(80).margin({top: 40, right: 15, bottom: 35, left: 15 }).height(300).scale(true).ticks(20).label(true).value(80).range([0,80]).orient("vertical").dragHandler(function(d) {test(d);}));
</div>
</div>
<h1>Calling functions and making responsive</h1>
<div class="intro">Functions are managed using the .dragHandler() property, empty by default. The first time a slider is called it is drawn within an init function, after that each time the slider is called its geometry is handled by a reposition function.
</div>
<div id="holder6" class="holder">
<div class="subhead">Slider6: Calling functions</div>
<div id="slideValue" class="subhead">slider value</div>
<div class="code">let slideholder6 = d3.select('#holder6').call(slider6.scale(true).step(1).dragHandler(function(d) {getValue(d);}));</br>
function getValue(d) {</br>
var parseNum = d3.format(".0f");</br>
d3.select("#slideValue").text("Slider value "+parseNum(d.value()))
}
</div>
</div>
<div id="holder7" class="holder">
<div class="subhead">Slider7: Responsive slider</div>
<div class="infoText">To make a slider responsive craete a variable to hold the screnwidth and a function that is called each time the brwoser window is resized
</div>
<div class="code"> let newWidth=document.getElementById('holder1').getBoundingClientRect().width;</br>
window.addEventListener('resize', resize);</br>
</div>
<div class="infoText">Update the screen within the function then call the slider passing the variable using the .width() parameter</div>
<div class="code">function resize(){</br>
newWidth=document.getElementById('holder1').getBoundingClientRect().width</br>
slideholder7.call(slider7.width(newWidth));</br>
slideholder8.call(slider8.width(newWidth))</br>
}
</div>
<div class="infoText">Then create the slider</div>
<div class="code">let slideholder7 = d3.select('#holder7').call(slider7.width(newWidth).scale(true).value(20).step(1));
</div>
</div>
<div id="holder8" class="holder">
<div class="subhead">Slider8: Responsive vertical slider</div>
<div class="code">let slideholder5 = d3.select('#holder5').call(slider5.width(80).margin({top: 40, right: 15, bottom: 35, left: 15 }).height(300).scale(true).ticks(20).label(true).value(80).range([0,80]).orient("vertical").dragHandler(function(d) {test(d);}));
</div>
</div>
</body>
<script>
let newWidth=document.getElementById('holder1').getBoundingClientRect().width
window.addEventListener('resize', resize);
function resize(){
newWidth=document.getElementById('holder1').getBoundingClientRect().width
slideholder7.call(slider7.width(newWidth));
slideholder8.call(slider8.width(newWidth));
}
const slider1 = sliderFactory()
const slider2 = sliderFactory()
const slider3 = sliderFactory()
const slider4 = sliderFactory()
const slider5 = sliderFactory()
const slider6 = sliderFactory()
const slider7 = sliderFactory()
const slider8 = sliderFactory()
let slideholder1 = d3.select('#holder1').call(slider1);
let slideholder2 = d3.select('#holder2').call(slider2
.ticks(30)
.scale(true)
.range([0,30])
);
let slideholder3 = d3.select('#holder3').call(slider3
.ticks(1)
.scale(true)
.range([0,4])
.step(0.1)
);
let slideholder4 = d3.select('#holder4').call(slider4
.height(70)
.margin({top: 35, right: 15, bottom: 15, left: 15 })
.value(2)
.ticks(1)
.scale(true)
.range([0,4])
.step(0.1)
.label(true)
);
let slideholder5 = d3.select('#holder5').call(slider5
.width(80)
.margin({top: 40, right: 15, bottom: 15, left: 15 })
.height(300)
.scale(true)
.ticks(20)
.label(true)
.value(10)
.range([0,80])
.orient("vertical")
);
let slideholder6 = d3.select('#holder6').call(slider6
.scale(true)
.step(1)
.dragHandler(function(d) {getValue(d);})
);
let slideholder7 = d3.select('#holder7').call(slider7
.width(newWidth)
.scale(true)
.value(20)
.step(1)
);
let slideholder8 = d3.select('#holder8').call(slider8
.width(newWidth)
.margin({top: 40, right: 15, bottom: 15, left: 15 })
.height(300)
.scale(true)
.ticks(20)
.label(true)
.value(50)
.range([0,100])
.orient("vertical")
);
function getValue(d) {
var parseNum = d3.format(".0f");
console.log (d.value)
d3.select("#slideValue").text("Slider value "+parseNum(d.value()))
}
</script>
</html>