2b:null 2c:["$","title",null,{"children":"d3 | 123d | Observable"}] 31:T4ce,# d3 **D3.js is a JavaScript library**, and in Observable, it is introduced [here](https://observablehq.com/collection/@d3/learn-d3). [This](https://observablehq.com/@mitvis/introduction-to-d3) is also a good "traditional data visualization" intro to D3.js. However, again, this introduction approaches D3 as a tool for traditional data visualization. Below, I'll try to present the tool a bit more generally using [the documentation](https://d3js.org/getting-started) along with its [corresponding Observable collection](https://observablehq.com/collection/@d3/documentation), and a few other articles as a reference. ## a note on returning Coding with D3 typically involves "chaining" methods together: ```javascript d3.something() .somethingElse() .a() .b() ... ``` **The order of the chain depends on what is returned after each method.** Use the documentation to determine what a method returns, and whether it is a valid antecedent. For example, `somethingElse` might only work for the objects that `something` returns. Likewise, `a` and `b` may "continue" to return the same type of object returned by `somethingElse`, making them valid.32:T4c6,{ // rectangle definition const text = "blah"; const loc = {x: 10, y: 20}; const rectSize = {width: 45, height: 22, padding: 4}; const fontSize = rectSize.height - rectSize.padding * 2; // create SVG canvas const svg = d3.create('svg') .attr('width', 100) .attr('height', 50); // add elements svg.append('rect') .attr('fill', 'steelblue') .attr('x', loc.x) .attr('y', loc.y) .attr('width', rectSize.width) .attr('height', rectSize.height) .attr('rx', 2); // append returns the element, not the original selection // can be a *child* of ... svg.append('g') .attr('id', 'text-group') .append('text') // try commenting this block out (from here) .text(text) .attr('x', loc.x + rectSize.width / 2) .attr('y', loc.y + rectSize.height / 2) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('fill', 'white') .attr('font-family', 'sans-serif') .attr('font-size', fontSize) // (to here) .append('circle') // cannot be a child of .attr('r', 10) .attr('cx', loc.x + rectSize.width / 2 + 40) .attr('cy', loc.y + rectSize.height / 2); return svg.node(); }33:T55b,## enter-update-exit Again, we bind data to visual elements. So, **every element you see _is_ bound to a datum**. This means that if the data _changes_, we need to manage new, existing, and removed data points. The [`join`](https://d3js.org/d3-selection/joining) operation creates three _selections_ for exactly this: - `enter` (new elements) - `update` (existing elements) - `exit` (removed elements) To control how data and elements are bound, you specify a key function: by default, this is the 0-index of the data, or it can be a map to some value within the data. **example** Consider the following SVG: - the rectangle represents the DOM; inside it is "what we see" - above the rectangle is the **data**: - the **enter** selection is underlined - the **update** selection is not underlined - the **exit** selection is slowly removed - `colors` contains our **data** - the number defines the order in which the circles appear - the word defines the color of the circle element it is bound to - the **key** function can be either: - `i` (the array's index) or - `d[0]`, the color number, mentioned above. Note: changing the **key** function will reset all data to **enter**. Try adjusting the array with different values, and reorder the rows as well. Consider how these changes manifest for different key functions.34:Tcd9,eue = { // ------------------------------------------------------------------------- DEFINE MAIN SVG const dim = {w: 500, h: 150, margin: 5, fontsize: 12}; const svg = d3.create('svg') .attr('width', dim.w) .attr('height', dim.h); let keyFunc = key != 'i' ? (d, i) => d[0] : null; // add constant rectangle svg.append('rect') .attr('x', dim.margin) .attr('y', dim.h / 3) .attr('rx', 3) .attr('width', dim.w - 2 * dim.margin) .attr('height', dim.h / 3) .attr('fill', 'none') .attr('stroke', 'black') .attr('stroke-width', 1); // ------------------------------------------------------------------------- REDRAW FUNCTION // function to run on .redraw function redraw(colors) { // get x value from ordering/index `i` function x(i) { return dim.margin + (i + 0.8) * (dim.w / (colors.length + 1)) } // access transitions for svg const t = svg.transition() .duration(1500); // ------------------------------------------------------------------------ TEXT ELEMENTS svg.selectAll('text') // .style('font-weight', 'bold') // only applied to existing (update) elements .data(colors, keyFunc) .join( enter => enter.append('text') .attr('fill', 'black') .attr('x', (d, i) => x(i)) .attr('y', -dim.fontsize) .style('text-decoration', 'underline'), update => update .style('text-decoration', 'none'), exit => exit .call(e => e .transition(t) .attr('y', 5 * dim.h / 6) .attr('fill', 'lightgray') .remove()) // .remove() // this would remove elements before the transition had time to finish ) .text((d, i) => d[1]) // apply *unchanging* attributes to *merged* enter+update selections .style('font-family', 'monospace') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .transition(t) .attr('x', (d, i) => x(i)) .attr('y', dim.h / 6); // ------------------------------------------------------------------------- CIRCLE ELEMENTS svg.selectAll('circle') .data(colors, keyFunc) .join( enter => enter.append('circle') .attr('cx', d => x(d[0])) .attr('cy', dim.h / 2) .attr('fill', 'white'), update => update, exit => exit .call(e => e .transition(t) .attr('cy', 5 * dim.h / 6) .attr('fill', 'lightgray') .remove()) ) .attr('r', 8) .transition(t) .attr('cx', d => x(d[0])) .attr('fill', d => d[1]); // ------------------------------------------------------------------------- LINKS const link = d3.link(d3.curveBumpY); const linkBuffer = dim.fontsize / 2 + 4; svg.selectAll('path') .data(colors, keyFunc) .join('path') .attr('fill', 'none') .attr('stroke', 'gray') .attr('stroke-width', 1) .transition(t) .attr('d', (d, i) => link( {source: [x(i), dim.h / 6 + linkBuffer], target: [x(d[0]), dim.h / 2 - linkBuffer]})) } svg.node().redraw = redraw return svg.node(); }35:T63b,# transitions Once an element is given properties, we can create a [D3 transition](https://d3js.org/d3-transition) to transition property values to other values.Transitions use an [interpolator](https://d3js.org/d3-interpolate), whose default is usually sufficient. A transition is a journey that starts on it's first call and ends once the destination is met. Since it requires defined properties, it requires _existing_ DOM elements, i.e., **you'll need to append or bind first**. Further, as with any journey, when it ends, _it ends_, i.e., **a completed transition cannot be reused**—this will throw an error. There are a couple clear ways to go about transitions in Observable:Use the example below to explore different [ease](https://observablehq.com/@d3/easing-animations) [types](https://observablehq.com/@d3/easing). 1. We define the transition as a _part of the data join_ (see below). This transition journey will be reinstantiated with each update to the data. 2. We define a transition and give it a name. This transition can be used for multiple property changes in an animation. The second of these is reflected in the code for the above enter-update-exit SVG. Notice that the transition is **redefined** each update within the `redraw` function. Also notice the use of [`call`](https://d3js.org/d3-selection/control-flow#selection_call); this (a) invokes the specified function (i.e., the transition) exactly _once_, and (b) returns the _selection_ instead the return of the called function (i.e., the transition).36:T5c5,# interactions In Observable, we can also make simple interactions using Input boxes like the radio buttons used above.When we interact with our browser (e.g., typing, clicking, scrolling, etc.), an [event](https://developer.mozilla.org/en-US/docs/Web/API/Event) is logged. For a DOM element, any event can be assigned a _listener_ function that is invoked when that event occurs for that element. In D3, we use `.on()` to assign an event's listener function to an element/selection.

**a note on `this`**

[`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) is a way for JavaScript to indicate the current context. It's similar to `self` in Python, but a bit more general. In the listener functions below, it indicates the current DOM element, which can be selected using `d3.select()`.