31:T470,{ // starting with elements without old data (or with empty data), to be filled by new data let c = html`

` const data = [ {name: "Locke", number: 4}, {name: "Reyes", number: 8}, {name: "Ford", number: 15}, {name: "Jarrah", number: 16}, {name: "Shephard", number: 23}, {name: "Kwon", number: 42} ]; d3.select(c).selectAll("div") .data(data, function(d,i,nodes) { console.log("d: ", d); // d for elements are undefined (actually datum is hidden in this.id) ; d for data are each datum // console.log("this:", this); // this for elements is each element; this for data is all elements grouped inside a span // console.log("i: ", i); // idx for elements; idx for data // console.log("nodes: ", nodes); // for elements, nodes are all elements in an array; for data, nodes are all data return d ? d.name : this.id; }) // return datum key "Locke", return element key "Locke", match them .text(d => d.number); return c }32:T65b,{ // starting without elements and old data // later adding new data which overlap with old data const c = html` ` const svg = d3.select(c) let idx = 0; let count = 0; while (count<2) { const t = svg.transition() .duration(2500); svg.selectAll("circle") .data(dataCircle[idx], (d, i, nodes) => { // console.log("d: ", d); // first run: no elements, no d to run, escape; d for data is each datum of dataSrc[0] // second run: d for elements, each datum of the existing elements, meaning dataSrc[0]; d for data, is each datum of dataScr[1] // console.log("this: ", this); // all undefined, surprising // console.log("i: ", i); // console.log("nodes: ", nodes); // first run: no elements, no nodes, escape; nodes for data is all data created return d;}) .join( enter => enter.append("circle") .attr("fill", "green") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", 0) // .text(d => d) .call(enter => enter.transition(t) .attr("r", 10)), update => update .attr("fill", "blue") .attr("opacity", 0) .call(update => update.transition(t) .attr("opacity", 0.5)), exit => exit .call(exit => exit.transition(t) .attr("fill", "red") .attr("r", 0) .remove()) ); yield svg.node(); await Promises.tick(2500); idx = (idx === 0) ? 1 : 0; count++; } }33:T57f,{ // key function // elements exist, have old data which is same length as new data // new data overlap with old data // pay attention to datum for elements and new data // no undefined, there are overlapping and exit and enter selection const body = html`

` let div = d3.select(body) .selectAll("div") .data([4, 8, 15, 16, 23, 42]) .join("div") // use joint("div") to replace enter().append("div") .text(d => d); div = div.data([1, 2, 4, 8, 16, 32], (d, i, nodes) => { console.log("d: ", d); // d for elements, are old datum each; d for data, are new datum each // console.log("i: ", i); // idx for selection and then for data // console.log("nodes: ", nodes); // nodes for elements, are all elements in an array; nodes for data, are all new data in an array return d; }); const t = div.transition() .duration(5000); div // .join("div") // use joint("div") to replace enter().append("div") .join( enter => enter.append("div") .text(d => d) .attr("style", "color: green"), update => update .attr("style", "color: gray"), exit => exit .attr("style", "color: gray") .call(exit => exit.transition(t) .attr("style", "color: red") .remove()) ) // div.exit().remove(); // no longer needed return body }34:T48c,md ` ### Joining Data For an introduction to D3’s data joins, see the [*selection*.join notebook](https://observablehq.com/@d3/selection-join). Also see [Thinking With Joins](http://bost.ocks.org/mike/join/). [#](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_data) *selection*.**data**([*data*[, *key*]]) [<>](https://github.com/d3/d3-selection/blob/master/src/selection/data.js) Binds the specified array of *data* with the selected elements, returning a new selection that represents the *update* selection: the elements successfully bound to data. Also defines the [enter](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_enter) and [exit](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_exit) selections on the returned selection, which can be used to add or remove elements to correspond to the new data. The specified *data* is an array of arbitrary values (*e.g.*, numbers or objects), or a function that returns an array of values for each group. When data is assigned to an element, it is stored in the property \`__data__\`, thus making the data “sticky” and available on re-selection. `35:T461, md` In conjunction with [*selection*.join](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_join) (or more explicitly with [*selection*.enter](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_enter), [*selection*.exit](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_exit), [*selection*.append](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_append) and [*selection*.remove](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_remove)), *selection*.data can be used to enter, update and exit elements to match data. For example, to create an HTML table from a matrix of numbers: \`\`\`js const matrix = [ [11975, 5871, 8916, 2868], [ 1951, 10048, 2060, 6171], [ 8010, 16145, 8090, 8045], [ 1013, 990, 940, 6907] ]; d3.select("body") .append("table") .selectAll("tr") .data(matrix) .join("tr") .selectAll("td") .data(d => d) .join("td") .text(d => d); \`\`\` In this example the *data* function is the identity function: for each table row, it returns the corresponding row from the data matrix. ` 36:T4be, md` **If a *key* function is not specified**, then the first datum in *data* is assigned to the first selected element, the second datum to the second selected element, and so on. A *key* function may be **specified** to control **which datum is assigned to which element**, replacing the default join-by-index, by **computing a string identifier for each datum and element**. This key function is evaluated **for each selected element**, in order, being passed the current datum (*d*), the current index (*i*), and the current group (*nodes*), with *this* as the current DOM element (*nodes*[*i*]); **the returned string is the element’s key**. The key function is then also evaluated **for each new datum** in *data*, being passed the current datum (*d*), the current index (*i*), and the group’s new *data*, with *this* as the group’s parent DOM element; **the returned string is the datum’s key**. ${html`The datum for a given key is assigned to the element with the matching key. If multiple elements have the same key, the duplicate elements are put into the exit selection; if multiple data have the same key, the duplicate data are put into the enter selection.`} ` 37:T6e3, md` For example, given this document: \`\`\`html

\`\`\` You could join data by key as follows: \`\`\`js const data = [ {name: "Locke", number: 4}, {name: "Reyes", number: 8}, {name: "Ford", number: 15}, {name: "Jarrah", number: 16}, {name: "Shephard", number: 23}, {name: "Kwon", number: 42} ]; d3.selectAll("div") .data(data, function(d) { return d ? d.name : this.id; }) .text(d => d.number); \`\`\` This example key function uses the datum *d* if present, and otherwise falls back to the element’s id property. Since these elements were not previously bound to data, the datum *d* is null when the key function is evaluated on selected elements, and non-null when the key function is evaluated on the new data. The *update* and *enter* selections are returned in data order, while the *exit* selection preserves the selection order prior to the join. If a key function is specified, the order of elements in the selection may not match their order in the document; use [*selection*.order](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_order) or [*selection*.sort](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_sort) as needed. For more on how the key function affects the join, see [A Bar Chart, Part 2](http://bost.ocks.org/mike/bar/2/) and [Object Constancy](http://bost.ocks.org/mike/constancy/). If *data* is not specified, this method returns the array of data for the selected elements. This method cannot be used to clear bound data; use [*selection*.datum](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_datum) instead. `38:[] 2f:{"title":"d3.selection.data","cells":[{"id":0,"value":"md`# d3.selection.data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"{\n const body = html``\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n d3.select(body)\n .append(\"table\")\n .selectAll(\"tr\")\n .data(matrix)\n .join(\"tr\")\n .selectAll(\"td\")\n .data(d => d)\n // .data()\n .join(\"td\")\n .text(d => d);\n \n return body\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"{\n const body = html``\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n return d3.select(body)\n .append(\"table\")\n .selectAll(\"tr\")\n .data(matrix)\n .join(\"tr\")\n .selectAll(\"td\")\n .data(d => d)\n .join(\"td\")\n // .text(d => d);\n \n // return body\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"{// check _groups, _enter, _exit\n const body = html`\n\n\n\n\n\n

\n`\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n d3.select(body)\n .append(\"table\")\n .selectAll(\"tr\")\n .data(matrix)\n .join(\"tr\") // no need to worry about whether elements exist or not\n .selectAll(\"td\")\n .data(d => d)\n .join(\"td\")\n .text(d => d);\n\n return body\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"{// check _groups, _enter, _exit\n const body = html`\n\n\n\n\n\n

\n`\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n return d3.select(body)\n .append(\"table\")\n .selectAll(\"tr\")\n .data(matrix)\n .join(\"tr\") // no need to worry about whether elements exist or not\n// .selectAll(\"td\")\n// .data(d => d)\n// .join(\"td\")\n// .text(d => d);\n\n// return body\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"md `### When enough row elements match with data in the first place`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"match_rows_with_data = {// check _groups, _enter, _exit\n const body = html`\n\n\n\n\n\n

\n`\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n return d3.select(body)\n .selectAll(\"tr\")\n .data(matrix)\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"match_cell_with_data_but_no_cell_elements = {// check _groups, _enter, _exit\n const body = html`\n\n\n\n\n\n

\n`\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n return d3.select(body)\n .selectAll(\"tr\") // preselect table rows \n .data(matrix) // join data: enter selection is 4 empty, update selection is 4 full, exit selection is 4 empty\n .selectAll(\"td\") // preselect table data\n .data(d => d) // bind data \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"{// check _groups, _enter, _exit\n const body = html`\n\n\n\n\n\n

\n`\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n return d3.select(body)\n .selectAll(\"tr\") // preselect table rows \n .data(matrix) // join data: enter selection is 4 empty, update selection is 4 full, exit selection is 4 empty\n .selectAll(\"td\") // preselect table data for each table row\n .data(d => d) // bind data \n .enter() \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"{// check _groups, _enter, _exit\n const body = html`\n\n\n\n\n\n

\n`\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n return d3.select(body)\n .selectAll(\"tr\") // preselect table rows \n .data(matrix) // join data: enter selection is 4 empty, update selection is 4 full, exit selection is 4 empty\n .selectAll(\"td\") // preselect table data for each table row\n .data(d => d) // bind data \n .enter() \n .append(\"td\")\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"data_with_full_elements_view = {// check _groups, _enter, _exit\n const body = html`\n\n\n\n\n\n

\n`\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n // return d3.select(body)\n d3.select(body)\n .selectAll(\"tr\") // preselect table rows \n .data(matrix) // join data: enter selection is 4 empty, update selection is 4 full, exit selection is 4 empty\n .selectAll(\"td\") // preselect table data\n .data(d => d) // bind data \n .enter() // get enter selection\n .append(\"td\") // create table data element for each node\n .text(d => d);\n\n return body\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"md `### when no element in the first place`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"{// check _groups, _enter, _exit\n const body = html``\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n return d3.select(body)\n .append(\"table\")\n .selectAll(\"tr\") // at this moment we don't know how many tr should be created\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"{// check _groups, _enter, _exit\n const body = html``\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n return d3.select(body)\n .append(\"table\")\n .selectAll(\"tr\")\n .data(matrix)\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"{// check _groups, _enter, _exit\n const body = html``\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n return d3.select(body)\n .append(\"table\")\n .selectAll(\"tr\")\n .data(matrix)\n .enter()\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"{// check _groups, _enter, _exit\n const body = html``\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n return d3.select(body)\n .append(\"table\")\n .selectAll(\"tr\")\n .data(matrix)\n .enter()\n .append(\"tr\")\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"{// check _groups, _enter, _exit\n const body = html``\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n return d3.select(body)\n .append(\"table\")\n .selectAll(\"tr\")\n .data(matrix)\n .enter()\n .append(\"tr\")\n .selectAll(\"td\")\n // .data(d => d)\n // .enter()\n // .append(\"td\")\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"{// check _groups, _enter, _exit\n const body = html``\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n return d3.select(body)\n .append(\"table\")\n .selectAll(\"tr\")\n .data(matrix)\n .enter()\n .append(\"tr\")\n .selectAll(\"td\")\n .data(d => d) // enter, exit and data binded\n // .enter()\n // .append(\"td\")\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"{// check _groups, _enter, _exit\n const body = html``\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n return d3.select(body)\n .append(\"table\")\n .selectAll(\"tr\")\n .data(matrix)\n .enter()\n .append(\"tr\")\n .selectAll(\"td\")\n .data(d => d) // enter, exit and data binded\n .enter()\n // .append(\"td\")\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"{// check _groups, _enter, _exit\n const body = html``\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n return d3.select(body)\n .append(\"table\")\n .selectAll(\"tr\")\n .data(matrix)\n .enter()\n .append(\"tr\")\n .selectAll(\"td\")\n .data(d => d) // enter, exit and data binded\n .enter()\n .append(\"td\")\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"{// check _groups, _enter, _exit\n const body = html``\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n d3.select(body)\n .append(\"table\")\n .selectAll(\"tr\")\n .data(matrix)\n .enter()\n .append(\"tr\")\n .selectAll(\"td\")\n .data(d => d)\n .enter()\n .append(\"td\")\n .text(d => d)\n \n return body\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"data_with_partial_elements = { // check _groups, _enter, _exit\n const body = html`\n\n\n\n\n

\n`\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n return d3.select(body)\n .selectAll(\"tr\")\n .data(matrix)\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"md `## Example on elements with empty data to bind with new data `","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"{\n let c = html`\n

\n `\n const data = [\n {name: \"Locke\", number: 4}, \n {name: \"Reyes\", number: 8},\n {name: \"Ford\", number: 15},\n {name: \"Jarrah\", number: 16},\n {name: \"Shephard\", number: 23},\n {name: \"Kwon\", number: 42}\n];\n\n d3.select(c).selectAll(\"div\")\n .data(data) // match first datum (name: \"Locke\") with first element (id=\"Ford\")\n .text(d => d.number);\n \n return c\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":266,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"{ // check _groups, _enter, _exit\n const body = html`\n\n\n\n\n

\n`\n const matrix = [\n [11975, 5871, 8916, 2868],\n [ 1951, 10048, 2060, 6171],\n [ 8010, 16145, 8090, 8045],\n [ 1013, 990, 940, 6907]\n ];\n\n return d3.select(body)\n .selectAll(\"tr\")\n .data(matrix, (d) => {\n console.log(\"d: \", d); // partial, elements have one less than data\n return d;\n })\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"md `## Example starting without elements and old data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"dataCircle = [[{\"x\": 50, \"y\":100}, {\"x\": 100, \"y\":100}], [{\"x\": 50, \"y\":100}, {\"x\": 150, \"y\":100}]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"md `## Example on key function with old and new data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"{\n const body = html`

`\n let div = d3.select(body)\n .selectAll(\"div\")\n .data([4, 8, 15, 16, 23, 42])\n .join(\"div\") // use joint(\"div\") to replace enter().append(\"div\")\n .text(d => d);\n \n div = div.data([1, 2, 4, 8, 16, 32], (d, i, nodes) => {\n console.log(\"d: \", d); // d for elements, are old datum each; d for data, are new datum each\n // console.log(\"i: \", i); // idx for selection and then for data\n // console.log(\"nodes: \", nodes); // nodes for elements, are all elements in an array; nodes for data, are all new data in an array\n return d;\n });\n div\n .join(\"div\") // use joint(\"div\") to replace enter().append(\"div\")\n .text(d => d);\n // div.exit().remove(); // no longer needed\n \n return body\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":296,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":240,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"\nmd`\nThe *data* is specified **for each group** in the selection. **If the selection has multiple groups** (such as [d3.selectAll](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selectAll) followed by [*selection*.selectAll](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_selectAll)), then *data* should typically be **specified as a function**. This function will be evaluated for each group in order, being passed the **group’s parent datum** (*d*, which **may be undefined**), the group index (*i*), and the selection’s parent nodes (*nodes*), with *this* as the group’s parent element.\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"stylesheet","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"import { d3, stylesheet} from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}