d3.js In Action Studygroup - chapter 2 #d3jsia
With chapter one done and some time early in the week I went right ahead with chapter 2. Below are some of the things that stood out for me; again this is not a full sumary of the chapter.
- My first real "AHA!" moment, finally figuring out why the majority of the code was in the data loading function: to give the data time to load before moving on with other code! (50)
- The casting concept as explained on page 52, to turn data from the standard string type into another data type (52)
- Using the d3.scale.linear() with invert to reverse the transformation (53)
- Nesting: shared attributes of data can be used to sort them into discrete categories and subcategories (55)
- d3.extent to get both min and max of dataset rather than using those individually (57)
- The Clamp function, to set all data values that exceed the maximum domain value to that max. domain value; same for min. values (64, 68)
- Using selection.enter() and selection.exit() to respectively define how you want to create new or remove existing elements (70)
- An important concept: D3 doesn't follow the convention that when the data changes, the corresponding display is updated; you need to build that functionality yourself, which gives you greater fuctionality (73)
- Parent and child elements: You have to selectAll() the parent elements and then subselect the child elements to re-initiate the data-binding for the child elements.
d3.selectAll("g").select("text").text(function(d) {return d}); (73). Page 71 provided more detail on the concept of using .enter() and .exit() on child elements of svg elements like svg, g and text but when using d3 with traditional DOM manipulation you can use this menthod to add p, div and other elements (71)