background preloader

Thinking with Joins

Thinking with Joins
Say you’re making a basic scatterplot using D3, and you need to create some SVG circle elements to visualize your data. You may be surprised to discover that D3 has no primitive for creating multiple DOM elements. Wait, WAT? Sure, there’s the append method, which you can use to create a single element. svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 2.5); But that’s just a single circle, and you want many circles: one for each data point. svg.selectAll("circle") .data(data) .enter().append("circle") .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .attr("r", 2.5); This code does exactly what you need: it creates a circle element for each data point, using the x and y data properties for positioning. Here’s the deal. Data points joined to existing elements produce the update (inner) selection. Now we can unravel the mysterious enter-append sequence through the data join: But why all the trouble? Likewise, to shrink-out:

Nested Selections D3’s selections can be hierarchical, much like the elements and data they join. Consider a table: <table><thead><tr><td> A</td><td> B</td><td> C</td><td> D</td></tr></thead><tbody><tr><td> 0</td><td> 1</td><td> 2</td><td> 3</td></tr><tr><td> 4</td><td> 5</td><td> 6</td><td> 7</td></tr><tr><td> 8</td><td> 9</td><td> 10</td><td> 11</td></tr><tr><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr></tbody></table> How would you select only the body cells? var td = d3.selectAll("tbody td"); Alternatively, select the tbody element first, then select the td elements within: var td = d3.select("tbody").selectAll("td"); This produces the same result because selectAll, for each element in the current selection, selects the matching descendants. #Nesting and Index If you select the td elements using d3.selectAll, you get a flat selection, like so: Flat selections lack hierarchical structure: the table cells are merged into a single array, rather than grouped by parent row. #Nesting and Data

How Selections Work Any sufficiently advanced technology is indistinguishable from magic. –Arthur C. Clarke In the past I have presented simplified descriptions of D3’s selections, providing only enough detail to get started. This article takes a more comprehensive approach; rather than saying how to use selections, I will explain how selections are implemented. This may take longer to read, but it should dispel any magic and help you master data-driven documents. The structure of this article may at first seem arbitrary. D3 is a visualization library, so this article incorporates visual explanations to accompany the text. var array = [42]; Wherever possible, the code that generates the given selection appears immediately above the diagram. Let’s begin. #A Subclass of Array You were probably told that selections are arrays of DOM elements. #Grouping Elements var selection = d3.select("body"); Likewise, d3.selectAll returns a selection with one group and any number of elements: d3.selectAll("h2"); #Null Elements

arrays - PHP array_filter with arguments Selections · mbostock/d3 Wiki Wiki ▸ API Reference ▸ Core ▸ Selections A selection is an array of elements pulled from the current document. D3 uses CSS3 to select elements. For example, you can select by tag ("div"), class (".awesome"), unique identifier ("#foo"), attribute ("[color=red]"), or containment ("parent child"). Selectors can also be intersected (".this.that" for logical AND) or unioned (".this, .that" for logical OR). After selecting elements, you apply operators to them to do stuff. You won't generally need to use for loops or recursive functions to modify the document with D3. Selecting Elements D3 provides two top-level methods for selecting elements: select and selectAll. # d3.select(selector) Selects the first element that matches the specified selector string, returning a single-element selection. # d3.select(node) Selects the specified node. # d3.selectAll(selector) Selects all elements that match the specified selector. # d3.selectAll(nodes) Selects the specified array of elements. Content Data

Related: