d3.js In Action Studygroup - chapter 3 & 4 #d3jsia

Here are some of the things that stood out for me in chapter 3 & 4 of d3js in Action.

• D3 gives you the opportunity to integrate the design of your data visualization with the design of your more traditional web elements. You can and should style content you generate with D3 with all the same CSS settings as traditional HTML content. (p. 77)
• The key to building interactivity into your D3 projects is the use of events, which define behaviors based on user activity. (p. 82)
• The .on function is a wrapper for the traditional HTML mouse events, and accepts "click", "mouseover", "mouseout", and so on. We can also access those same events using .attr, for example, using .attr("onclick", "console.log('click')"), but notice that we’re passing a string in the same way we would using traditional HTML. There’s a D3-specific reason to use the .on function: it sends the bound data to the function automatically and in the same format as the anonymous inline functions we’ve been using to set style and attribute. (p. 83)
• Transitions are defined for a selection, and can be set to occur after a certain delay using delay() or to occur over a set period of time using duration(). Both are in milliseconds. (p. 84)
• Delays, like duration, can be dynamically set based on the bound data for each element. You can use delays with another feature: transition chaining. This sets multiple transitions one after another, and each is activated after the last transition has finished. (p. 85)
• Sometimes you want to deal specifically with the DOM element that’s bound to the data... Getting access to the actual DOM element in the selection can be accomplished in one of two ways: 1 Using this in the inline functions, or 2 Using the .node() function (p. 86)
• Inline functions always have access to the DOM element along with the datapoint and array position of that datapoint in the bound data. The DOM element is represented by "this". We can see it in action using the .each() function of a selection, which performs the same code for each element in a selection. (p. 86)
• Getting to the DOM element lets you take advantage of built-in JavaScript functionality to do things like measure the length of a path element or clone an element. One of the most useful builtin functions of nodes when working with SVG is the ability to reappend a child element. (p. 87)
• ...you should use CSS whenever you can, but if you want access to things like dynamic colors and transparency using D3 functions, then you’ll need to use inline styling. (p. 90)
• ...SVG images, by default, have no setting for height and width and won’t display until these are set. (p. 95)
• ...you can reference SVG by pointing the xlink:href attribute of an image element at an SVG file. But loading SVG directly into the DOM gives you the capacity to manipulate it like any SVG elements that you create in the browser with D3. (p. 98)
• .each() runs the same code on every element of a selection. (p. 100) and .each() allows you to access the bound data, array position, and DOM element. (p. 119)
• A D3 component, like an axis, is a function for drawing all the graphical elements necessary for an axis. A generator, like d3.svg.line(), lets you draw a straight or curved line across many points. (p. 108)
• After we create an axis function, we define how we want our axis to appear. Then we can draw the axis via a selection’s .call() method from a selection on a g element where we want these graphical elements to be drawn. (p. 111+)
• ...ticks for the axes aren’t being drawn, because those elements don’t have default “stroke” styles applied. (p. 112)
• To move our axes around, we need to adjust the .attr("translate") of their parent g elements, either when we draw them or later. This is why it’s important to assign an ID to our elements when we append them to the canvas. (p. 114)
• Notice that the g element has been created with classes, so we can style the child elements using CSS, or select them with D3. (p. 115)
• yScale = d3.scale.linear().domain([0,100]).range([480,20]); < Scale is inverted, so higher values are drawn higher up and lower values toward the bottom (p. 118)
• It’s a good rule to always use g elements for your charts, because they allow you to apply labels or other important information to your graphical representations. But that means you’ll need to use the transform attribute, which is how g elements are positioned on the canvas. Elements appended to a g base their coordinates off of the coordinates of their parent. When applying x and y attributes to child elements, you need to set them relative to the parent g. (p. 119)
• ...the only reasons to use .each() to add child elements are if you (a) prefer the syntax, (b) you plan on doing complex operations involving each data element, or (c) you want to add conditional tests to change whether or what child elements you’re appending. (p. 120)
• Setting specific tickValues forces the axis to only show the corresponding values, which is useful when we want to override the automatic ticks created by the axis. (p. 123)
• Interpolate: basis (not going through actual data points), cardinal (going through actual datapoints) and step (like "staircase"). (p. 130)
• Counterintuitively, you should use d3.svg.line to draw filled areas. To do so, though, you need to append Z to the created d attribute. This indicates that the path is closed. (p. 134)
• You should use d3.svg.area() when you want to draw a shape where the bottom of the shape can be calculated based on the top of the shape as you’re drawing it. It’s suitable for drawing bands of data (p. 135)