`
124 | per data point, *but only for the new points since the last data join*. Since this
125 | is the first data binding (there are no rects currently), everything is new,
126 | it's straightforward to add new points. It's important to keep in mind that for
127 | the next selection, things will be more complex since there will already be
128 | rects.
129 |
130 | The part of a D3 selection that represents these element-less data-points
131 | is passed to the first argument in `selection.join`. The elements don't add themselves, we have to
132 | create the elements that will match the selection ourselves. We use the same
133 | attribute editing helpers to configure each circle per its data point.
134 |
135 |
136 |
137 | {% highlight javascript %}
138 | // recall that scales are functions that map from
139 | // data space to screen space
140 | var maxCount = d3.max(sales, (d, i) => d.count);
141 | var x = d3.scaleLinear()
142 | .range([0, 300])
143 | .domain([0, maxCount]);
144 | var y = d3.scaleOrdinal()
145 | .rangeRoundBands([0, 75])
146 | .domain(sales.map((d, i) => d.product));
147 |
148 | rects.join(
149 | // NEW - handle data points w/o rectangles
150 | newRects => {
151 | newRects.append('rect')
152 | .attr('x', x(0))
153 | .attr('y', (d, i) => y(d.product))
154 | .attr('height', y.rangeBand())
155 | .attr('width', (d, i) => x(d.count));
156 | },
157 | );
158 | {% endhighlight %}
159 |
160 |
161 |
162 |
163 | We're getting a little sneaky here! We're introducing an ordinal
164 | scale, one that's discrete instead of continuous.
165 |
166 |
167 |
168 | The d3.scaleOrdinal() helps us create buckets for each
169 | element. In this case, that's one per product.
170 |
171 |
172 | The domain is the 3 product names. The range is a little different,
173 | rangeRoundBands is a helper function that sets the range, but
174 | tells D3 to pick buckets that are whole pixel widths (no fractions).
175 |
176 |
177 |
182 |
183 | {% highlight html %}
184 |
188 |
189 |
190 |
195 |
196 |
199 | Check out how these attribute helpers can take immediate values as well
200 | as callbacks. Just like with d3.min, these callbacks use the same
201 | style of (d, i) parameters to represent the element and its index.
202 |
203 |
204 | ## Removing Elements
205 |
206 | Whereas "enter" selects elements that have added since the last data
207 | join, "exit" is the opposite, it applies to elements that have been
208 | removed.
209 |
210 | Suppose we drop the first point from our source array, we can find and operate
211 | on the corresponding element in the DOM via the exit selection.
212 |
213 | We can use the `remove()` method to immediately delete matched elements; it's
214 | the opposite of `append()`.
215 |
216 | If you only want to delete matched elements, you may omit the argument entirely from `selection.join()` since calling `remove()` is the default behavior.
217 |
218 |
219 |
220 | {% highlight javascript %}
221 | // define new logic for handling joins
222 | rects.join(
223 | newRects => {
224 | newRects.append('rect')
225 | .attr('x', x(0))
226 | .attr('y', (d, i) => y(d.product))
227 | .attr('height', y.rangeBand())
228 | .attr('width', (d, i) => x(d.count));
229 | },
230 | rects => {},
231 | // NEW - delete elements whose data has been removed
232 | rectsToRemove => {
233 | rectsToRemove.remove();
234 | }
235 | );
236 |
237 | sales.pop(); // drops the last element
238 | rects.data(sales); // join the data again
239 | {% endhighlight %}
240 |
241 |
242 |
243 |
249 |
250 |
259 |
260 | {% highlight javascript %}
261 | var obj1 = { value: 1 };
262 | // true -- identity
263 | obj1 == obj1;
264 |
265 | var obj2 = { value: 2 };
266 | var obj3 = { value: 2 };
267 | // false -- huh? they have the same values!
268 | obj2 == obj3;
269 | {% endhighlight %}
270 |
271 |
288 |
289 | {% highlight javascript %}
290 | var sales1 = [
291 | { product: 'Hoodie', count: 7 },
292 | { product: 'Jacket', count: 6 }
293 | ];
294 |
295 | var sales2 = [
296 | { product: 'Jacket', count: 6 }, // same
297 | { product: 'Snuggie', count: 9 } // new
298 | ];
299 |
300 | var rects = svg.selectAll('rect')
301 | .data(sales1, (d, i) => d.product)
302 | .join(enter => enter.append("rect"));
303 |
304 | rects.size(); // 2 -- first join adds two new elements
305 |
306 | // removes 1 element, adds 1 element
307 | rects.data(sales2, (d, i) => d.product);
308 | {% endhighlight %}
309 |
310 |
325 |
326 |
327 |
328 |
329 | |
330 | Day 1
331 | |
332 |
333 |
334 | | Product |
335 | Sales (Cumulative) |
336 |
337 |
338 |
339 |
340 | | Hoodie |
341 | 10 |
342 |
343 |
344 | | Jacket |
345 | 3 |
346 |
347 |
348 | | Snuggie |
349 | 2 |
350 |
351 |
352 |
353 |
354 |
355 |
356 |
357 |
358 |
359 | |
360 | Day 2
361 | |
362 |
363 |
364 | | Product |
365 | Sales (Cumulative) |
366 |
367 |
368 |
369 |
370 | | Hoodie |
371 | 16 |
372 |
373 |
374 | | Jacket |
375 | 7 |
376 |
377 |
378 | | Snuggie |
379 | 8 |
380 |
381 |
382 |
383 |
384 |
387 |
388 | {% highlight javascript %}
389 | function toggle() {
390 | sales = (sales == days[0]) ? days[1] : days[0];
391 | update();
392 | }
393 |
394 | function update() {
395 | svg.selectAll('rect')
396 | .data(sales, (d, i) => d.product)
397 | .join(
398 | enter => {
399 | enter.append('rect')
400 | .attr('x', x(0))
401 | .attr('y', (d, i) => y(d.product))
402 | .attr('height', y.bandwidth())
403 | .attr('width', (d, i) => x(d.count));
404 | },
405 | update => {
406 | update.attr('width', (d, i) => x(d.count));
407 | },
408 | );
409 | };
410 | {% endhighlight %}
411 |
412 |
413 |
414 |
415 |
416 |
417 |
418 |
419 |
430 |
431 | {% highlight javascript %}
432 | function toggle() {
433 | sales = (sales == days[0]) ? days[1] : days[0];
434 | update();
435 | }
436 |
437 | function update() {
438 | svg.selectAll('rect')
439 | .data(sales, (d, i) => d.product)
440 | .join(
441 | enter => {
442 | enter.append('rect')
443 | .attr('x', x(0))
444 | .attr('y', (d, i) => y(d.product))
445 | .attr('height', y.bandwidth())
446 | .attr('width', (d, i) => x(d.count));
447 | },
448 | update => {
449 | // NEW!
450 | update.transition().duration(1000)
451 | .attr('width', (d, i) => x(d.count));
452 | },
453 | );
454 | };
455 | {% endhighlight %}
456 |
457 |
458 |
459 |
460 |
461 |
462 |
463 |
464 |
36 |
37 | {% highlight javascript %}
38 | var sales = [
39 | { product: 'Hoodie', count: 12 },
40 | { product: 'Jacket', count: 7 },
41 | { product: 'Snuggie', count: 6 },
42 | ];
43 | {% endhighlight %}
44 |
45 |
52 |
53 | {% highlight javascript %}
54 | var pie = d3.pie()
55 | .value(d => d.count)
56 |
57 | var slices = pie(sales);
58 | // the result looks roughly like this:
59 | [
60 | {
61 | data: sales[0],
62 | endAngle: 3.0159289474462017,
63 | startAngle: 0,
64 | value: 12
65 | },
66 | {
67 | data: sales[1],
68 | startAngle: 3.0159289474462017,
69 | endAngle: 4.775220833456486,
70 | value: 7
71 | },
72 | {
73 | data: sales[2],
74 | startAngle: 4.775220833456486,
75 | endAngle: 6.283185307179587,
76 | value: 6
77 | }
78 | ]
79 | {% endhighlight %}
80 |
81 |
89 |
90 | {% highlight javascript %}
91 | var arc = d3.arc()
92 | .innerRadius(0)
93 | .outerRadius(50);
94 |
95 | // helper that returns a color based on an ID
96 | var color = d3.scaleOrdinal(d3.schemeCategory10);
97 |
98 | var svg = d3.select('svg.pie');
99 | var g = svg.append('g')
100 | .attr('transform', 'translate(200, 50)')
101 |
102 | g.selectAll('path.slice')
103 | .data(slices)
104 | .join(
105 | enter => {
106 | enter.append('path')
107 | .attr('class', 'slice')
108 | .attr('d', arc)
109 | .attr('fill', d => color(d.data.product))
110 | }
111 | );
112 |
113 | // building a legend is as simple as binding
114 | // more elements to the same data. in this case,
115 | // tags
116 | svg.append('g')
117 | .attr('class', 'legend')
118 | .selectAll('text')
119 | .data(slices)
120 | .join(
121 | enter => {
122 | enter.append('text')
123 | .text(d => '• ' + d.data.product)
124 | .attr('fill', d => color(d.data.product))
125 | .attr('y', (d, i) => 20 * (i + 1));
126 | }
127 | );
128 | {% endhighlight %}
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 | Again, we snuck in a new helper, and it's another type of ordinal scale.
138 |
139 |
140 | The
d3.scaleOrdinal helper gives us back a function. This function
141 | takes in values (typically IDs) and gives back a value in its domain. The same ID gets the
142 | same color, and it will rotate through its domain.
143 | apart. We initalize it with
d3.schemeCategory10 which is a list of10 colors that are pretty easy to tell apart.
144 |
145 |
161 |
162 |
163 |
164 |
165 | |
166 | Sales
167 | |
168 |
169 |
170 | | Date |
171 | Hoodie |
172 | Jacket |
173 | Snuggie |
174 |
175 |
176 |
177 |
178 | | 2014-01-01 |
179 | 6 |
180 | 2 |
181 | 3 |
182 |
183 |
184 | | 2014-01-02 |
185 | 7 |
186 | 5 |
187 | 2 |
188 |
189 |
190 | | 2014-01-03 |
191 | 8 |
192 | 7 |
193 | 3 |
194 |
195 |
196 |
197 |
198 |
203 |
204 | {% highlight javascript %}
205 | var sales = [
206 | { date: "2014-01-01", hoodies: 6, jackets: 2, snuggies: 3 },
207 | { date: "2014-01-02", hoodies: 7, jackets: 5, snuggies: 2 },
208 | { date: "2014-01-03", hoodies: 8, jackets: 7, snuggies: 3 }
209 | ];
210 | {% endhighlight %}
211 |
212 |
228 |
229 | {% highlight javascript %}
230 | var stack = d3.stack()
231 | .keys(["hoodies", "jackets", "snuggies"]);
232 |
233 | var stacked = stack(sales);
234 | {% endhighlight %}
235 |
236 |
241 |
242 | {% highlight javascript %}
243 | stacked
244 | [
245 | [[0, 6], [0, 7], [0, 8 ]],
246 | [[6, 8], [7, 12], [8, 15 ]],
247 | [[8, 11], [12, 14], [15 18 ]]
248 | ]
249 | {% endhighlight %}
250 |
251 |
256 |
257 | {% highlight javascript %}
258 | stacked
259 | // [Array[3], Array[3], Array[3]]
260 | stacked[0]
261 | // [Array[2], Array[2], Array[2]]
262 | Object.keys(stacked[0])
263 | // ["0", "1", "2", "key", "index"]
264 | stacked[0].key
265 | // "hoodies"
266 | stacked[0][0].data
267 | // {date: "2014-01-01", hoodies: 6, jackets: 2, snuggies: 3}
268 | {% endhighlight %}
269 |
270 |
277 |
278 | {% highlight javascript %}
279 | var height = 200;
280 | var width = 200;
281 |
282 | // we need to calculate the maximum y-value
283 | // across all our layers, so we find the biggest
284 | // end value
285 | var maxY = d3.max(stacked, d => d3.max(d, d => d[1]));
286 |
287 | var y = d3.scaleLinear()
288 | .range([height, 0])
289 | .domain([0, maxY]);
290 |
291 | var x = d3.scaleTime()
292 | .range([0, width])
293 | .domain(d3.extent(sales, d => new Date(Date.parse(d.date))))
294 | .nice(4);
295 |
296 | var svg = d3.select('svg.stack');
297 | var color = d3.scaleOrdinal(d3.schemeCategory10);
298 |
299 | // bind a tag for each layer
300 | var layers = svg.selectAll('g.layer')
301 | .data(stacked, d => d.key)
302 | .join(
303 | enter => {
304 | enter.append('g')
305 | .attr('class', 'layer')
306 | .attr('fill', d => color(d.key));
307 | }
308 | );
309 |
310 | // bind a to each value inside the layer
311 | layers.selectAll('rect')
312 | .data(d => d)
313 | .join(
314 | enter => {
315 | enter.append('rect')
316 | .attr('x', d => x(new Date(Date.parse(d.data.date))))
317 | .attr('width', width / 3)
318 | // remember that SVG is y-down while our graph is y-up!
319 | // here, we set the top-left of this bar segment to the
320 | // larger value of the pair
321 | .attr('y', d => y(d[1]))
322 | // since we are drawing our bar from the top downwards,
323 | // the length of the bar is the distance between our points
324 | .attr('height', d => y(d[0]) - y(d[1]));
325 | }
326 | );
327 | {% endhighlight %}
328 |
329 |
330 |
331 |
332 |
333 |
334 |
335 |
There are a few things that make this graph a little more complex. One of
336 | the hardest parts is realizing that D3 is really only going to hint at how
337 | we should stack the bars: D3 gives us stacked results in our data space, but
338 | not in SVG's coordinate system. We have to deal with the same confusing
339 | Y-axis
340 | coordinate flip.
341 |
342 |