-
Notifications
You must be signed in to change notification settings - Fork 1
/
joinTransitions.html
189 lines (166 loc) · 7.03 KB
/
joinTransitions.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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
<title>Thinking about Joins and Other things</title>
<style>
.rect {
fill: hotpink;
}
text {
fill: black;
size: 32px;
font: bold 48px monospace;
}
.enter {
fill: #333
}
.update {
fill: red
}
.exit {
fill: darkorange;
}
h1,
h2,
h3,
a {
font-weight: normal;
color: #0088dd;
margin: 0px;
}
h1 {
font-family: Georgia, Times, serif;
font-size: 250%;
padding-bottom: 10px;
}
</style>
<script src="libraries/d3.js"></script>
</head>
<body>
<h1>WAT is Joins?</h1>
<p>Joins and Transitions are related to me because, in the tutorial where mike explains Select, transitions did not
work right away with Joins. So I am joining these concepts in one page as I study them. Here are the links
explaining <a href="https://bost.ocks.org/mike/join/">Thinking in Join</a> and <a
href="https://bost.ocks.org/mike/transition/">Working
with transitions</a>. Below are the list of examples that Mike uses in the explanations. I will be studying
them
and trying them out...
He has explained about <a href="https://bost.ocks.org/mike/nest/">Nested Selections</a>,
<a href="https://bost.ocks.org/mike/constancy/">Object Constancy</a>,
<a href="https://bost.ocks.org/mike/path/">Path Transitions</a>
</p>
<ul>
<li><a href="https://bost.ocks.org/mike/miserables/">Co-occurrence</a></li>
<li><a href="https://bost.ocks.org/mike/path/">Path Elements</a></li>
<li><a href="https://bl.ocks.org/mbostock/4063663">Scatterplot Matrix Brushing</a></li>
<li><a href="https://bl.ocks.org/mbostock/1256572">D3 Show Reel</a></li>
<li><a href="https://bl.ocks.org/mbostock/4062085">Population Pyramid</a></li>
<li><a href="https://bl.ocks.org/mbostock/1305111">Pie Multiples</a></li>
<li><a href="https://bl.ocks.org/mbostock/882152">Grouped Bar</a></li>
<li><a href="https://bl.ocks.org/mbostock/1345853">Transform Transitions</a></li>
<li><a href="https://bl.ocks.org/mbostock/3916621">Path Tween</a></li>
<li><a href="https://bl.ocks.org/mbostock/1098617">Arc Clock</a></li>
<li><a href="http://bl.ocks.org/mbostock/3943967">Stacked to GroupedBar Transition</a></li>
</ul>
<p>Some interesting Blocks</p>
<a href="https://bl.ocks.org/mbostock/7606141">queue</a>
<a href="https://bl.ocks.org/mbostock/5577023">colorBrewer</a>
<a href="https://bl.ocks.org/mbostock/5503544">Gist API latency</a>
<a href="https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172">brushable Bar</a>
<p>Blocks on Axis styling</p>
<a href="https://bl.ocks.org/mbostock/3371592">Axis styling 1</a>
<a href="https://bl.ocks.org/mbostock/4323929">Axis Styling 2</a>
<p>What is a Join really?</p>
<img src="./images/JoinUpdate.png" alt="Join and Update">
<p>Data points joined to existing elements produce the update (inner) selection. Leftover unbound data produce the
enter selection (left), which represents missing elements. Likewise, any remaining unbound elements produce the
exit selection (right), which represents elements to be removed.
We will see this in action by creating a table of numbers.
</p>
<p>Interesting part starts once the shapes are introduced. Here is one way of transitioning shapes</p>
<pre>
circle.enter().append("circle")
.attr("r", 0)
.transition()
.attr("r", 2.5);
Likewise, to shrink-out:
circle.exit().transition()
.attr("r", 0)
.remove();
</pre>
<p>Creating transition seems to be very straight forward based on the code below. The transition is attached to the
select, and the function
is invoked. Transitions have a four-phase life cycle:
</p>
<ol>
<li>The transition is scheduled.</li>
<li>The transition starts.</li>
<li>The transition runs.</li>
<li>The transition ends.</li>
</ol>
<p>
Similar to how data is bound to an element’s __data__ property, transitions are bound to a __transition__
property. When a transition is first scheduled on an element, this property is created; when the last scheduled
transition ends, this property is likewise deleted. Inspecting this property in the console can be useful to
debug which transitions are scheduled to run on which elements, as well as to inspect computed tweens and
transition timing parameters.
</p>
<strong>Transitions Are per-Element and Exclusive</strong>
<p>Different elements can have different delays and duration, and even different easing and tweens. Additionally,
transition events are dispatched separately for each element. When you receive an end event for a given element,
its transition has ended, but other transitions may still be running on other elements</p>
<pre>
d3.select("body")
.style("color", "green") // make the body green
.transition().delay(750)
.style("color", "red");
</pre>
<div class="tab"></div>
<svg height="200" width="200" class="exTab"></svg>
<script>
const matrix = [
[11975, 5871, 8916, 2868],
[1951, 10048, 2060, 6171],
[8010, 16145, 8090, 8045],
[1013, 990, 940, 6907]
];
//start of the script
var tab = d3.select(".tab") //There is no need of svg, as we are appending text to the html page.
var row = tab.append('table')
.selectAll('th')
.data(['col1', 'col2', 'col3', 'col4'])
.join('th')
d3.select('table')
.selectAll('tr')
.data(matrix)
.join('tr')
.selectAll('td')
.data(d => d)
.join('td')
.text(d => d)
inData = d3.range(5).map(d => ({
x: Math.round(Math.random() * 100),
y: Math.round(Math.random() * 200)
}))
console.log(inData)
var vsg = d3.select('.exTab').append('g')
.attr('transform', 'translate(5,5)')
vsg.selectAll('circle')
.data(inData)
.join('circle') //you are learning about this
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('r', 5)
.attr('class', 'rect')
//d3.select('svg').transition().style('fill','yellow')
// d3.select("body").transition()
// .delay(750)
// .each("start", function() { d3.select(this).style("color", "green"); })
// .style("color", "red");
d3.select("body")
.style("color", "green") // make the body green
.transition().delay(750)
.style("color", "black");
</script>
</body>
</html>