25:["$","title",null,{"children":"Grouped barplot in d3.js | Karim A C | Observable"}] 49:[] 29:{"id":"719dc92d70a0446c","slug":null,"title":"Grouped barplot in d3.js","thumbnail":"7aa81a5014675d115075539bbc4662a20e9b6cda0ab700bfb24746e71ff9ca8d","access_level":"public","create_time":"$D2023-12-13T20:09:59.019Z","update_time":"$D2023-12-14T10:36:29.656Z","view_time":null,"first_public_time":"$D2023-12-13T20:09:59.019Z","has_unpublished_edits":null,"fork":{"id":"a677598976f02cd7","slug":null,"title":"Understanding D3 enter(), exit(), merge() & key function","owner":{"id":"63931d46a8ea0aa2","login":"ackuser","name":"Karim A C"}},"stars":0,"starred":false,"owner":{"type":"team","id":"63931d46a8ea0aa2","login":"ackuser","name":"Karim A C","avatar_url":"https://avatars-next.observableusercontent.com/d8289548f374c99d236d9e126e9f65f1b1a5999be52c8dcb4bcfc8f6d046b318","tier":"starter_2024","bio":"","following":false},"version":1129,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cb5a82145ba02d86","login":"ackuser","name":"Karim A C","avatar_url":"https://avatars-next.observableusercontent.com/d8289548f374c99d236d9e126e9f65f1b1a5999be52c8dcb4bcfc8f6d046b318","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"cb5a82145ba02d86","login":"ackuser","name":"Karim A C","avatar_url":"https://avatars-next.observableusercontent.com/d8289548f374c99d236d9e126e9f65f1b1a5999be52c8dcb4bcfc8f6d046b318","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Grouped barplot in d3.js","cells":[{"id":0,"value":"md`# Grouped barplot in d3.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"html`\nThis will ilustrate how D3 data-join pattern works.\nWith the use of enter(), exit() and merge(). Also, the utility of the key function used with the data() function\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"html`\n

\nFunctions `enter()`, \n`exit()`\n`merge()`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"html`\nWe are going to define our data as an array of things, for simplicity of the example we won't care about what the things are\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"data = [\n { id: \"08\", a: 158, b: 8 },\n { id: \"09\", a: 701, b: 258 },\n { id: \"10\", a: 963, b: 658 },\n { id: \"11\", a: 1011, b: 1058 },\n { id: \"12\", a: 1151, b: 2058 },\n { id: \"13\", a: 972, b: 5 },\n { id: \"14\", a: 471, b: 658 },\n { id: \"15\", a: 159, b: 558 },\n { id: \"16\", a: 368, b: 158 },\n { id: \"17\", a: 196, b: 258 },\n { id: \"18\", a: 15, b: 234 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1127,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"md`### Selection of appended elements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"html`\nIn the following case, and the most used one, we will only be selecting and applying the style to the missing elements in the DOM\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"html`\n

Pattern

\n  \n    svg\n      .selectAll('rect')\n      .data(data)\n      .enter()           // Will do the join between the data and the elements\n      .append('rect')    // Will append the missing elements\n      ...                // Anything from this point will be executed only to the appended elements\n  \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"{ \n \n const svg = d3\n .select(DOM.svg(width, height));\n \n init(svg, width, height, rad, 3);\n \n const sd = svg\n .selectAll('rect')\n .data(data)\n \n // Select the missing circles and styles them\n sd.enter()\n .append('rect')\n .style('fill','orange')\n .attr('width', rad*2)\n .attr('height', rad*2)\n .attr('x', (_,i) => i*rad*2.5)\n .attr('y', 0);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"md`### Selection of existing elements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"html`\nHere, ocurrs the oposite and only to the existing elements will be applied the style\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"md`#### Pattern`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"html`\n

\n\n const selectedElements = svg\n    .selectAll('rect')\n    .data(data);\n   \n  selectedElements\n    .enter()            // We do the join between the data an the elements\n    .append('rect');    // We append the missing elements\n  \n  selectedElements      // Here we have selected only the existing rect elements\n    ...                 // Anything applied beyond here will be only applies to the existing rect elements\n\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1044,"value":"### List of groups","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1048,"value":"groups = data.map(d => d.id)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"List of subgroups","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1053,"value":"subgroups = Object.keys(data[0]).slice(1,data[0].length)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1059,"value":"X Axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1061,"value":"x = d3.scaleBand()\n .domain(groups)\n .range([0, width])\n .padding([0.2]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1082,"value":"d3\n .select(DOM.svg(width, height))\n .append(\"g\")\n .attr(\"transform\", `translate(0, ${height})`)\n .call(d3.axisBottom(x).tickSize(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"Y Axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1068,"value":"y = d3.scaleLinear()\n .domain([0, 40])\n .range([height , 0 ]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"Another scale for subgroup position","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1116,"value":"xSubgroup = d3.scaleBand()\n .domain(subgroups)\n .range([0, x.bandwidth()])\n .padding([0.05])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"color palette = one color per subgroup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1110,"value":"color = d3.scaleOrdinal()\n .domain(subgroups)\n .range(['#e41a1c','#377eb8'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1121,"value":"{ \n return svg.append(\"g\")\n .selectAll(\"g\")\n // Enter in data = loop group per group\n .data(data)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"\n{ \n svg.append(\"g\")\n .selectAll(\"g\")\n // Enter in data = loop group per group\n .data(data)\n .join(\"g\")\n .attr(\"transform\", d => `translate(${x(d.group)}, 0)`)\n .selectAll(\"rect\")\n .data(function(d) { return subgroups.map(function(key) { return {key: key, value: d[key]}; }); })\n .join(\"rect\")\n .attr(\"x\", d => xSubgroup(d.key))\n .attr(\"y\", d => y(d.value))\n .attr(\"width\", xSubgroup.bandwidth())\n .attr(\"height\", d => height - y(d.value))\n .attr(\"fill\", d => color(d.key));\n \n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"html`\n
Selection of existing and appended elements with merge()
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"html`\nWith the help of the merge() function we will solve the previous problem. This function will select both the existing elements and the appended ones.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"md`#### Pattern`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"html`\n
\n\nconst selectedElements = svg\n .selectAll('rect')\n .data(data); // We have selected the existing elements in the DOM\n \n selectedElements\n .enter()\n .append('rect') // Here we have appended the missing elements\n .merge(selectedElements) // Here we merge the appended elements with the existing ones\n .... // Anything beyond here will be applied to the join of the appended elements \n and the existing ones (That correspond with the data)\n\n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"{\n const width=config.size*2*7.5;\n const height=config.size*2;\n const rad = config.size;\n \n const svg = d3\n .select(DOM.svg(width, height));\n \n init(svg, width, height, rad, 3);\n \n const sd = svg\n .selectAll('rect')\n .data(data);\n \n // Select all the circles\n sd.enter()\n .append('rect')\n .merge(sd)\n .attr('width', rad*2)\n .attr('height', rad*2)\n .attr('x', (_,i) => i*rad*2.5)\n .attr('y', 0)\n .style('fill','orange')\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"html`\n
Selection of non-covered existing elements with exit()
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"html`\nWe have talked about appended elements and existing ones. But what if our DOM has more elements than our data?
\nWell, they are selected too 😱! That happens when we do svg.selectAll('rect'). But this allow us to perform some actions over these elements with the help of exit()\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"md`#### Pattern`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"html`\n
\n\nconst selectedElements = svg\n .selectAll('rect') // We select the elements to do the join\n .data(data);\n \n selectedElements\n .enter() // Remember here we do the join\n .append('rect') // And append the missing elements\n .merge(sd) // We perform the merge to act on all of the elements of our data\n ...\n \n selectedElements\n .exit() // We exit the join and now everything we will perform will be on the excluded elements\n ...\n\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"{\n const width=config.size*2*15;\n const height=config.size*2;\n const rad = config.size;\n \n const svg = d3\n .select(DOM.svg(width, height));\n \n init(svg, width, height, rad, 8);\n \n const sd = svg\n .selectAll('rect')\n .data(data);\n \n // Select all the circles\n sd.enter()\n .append('rect')\n .merge(sd)\n .attr('width', rad*2)\n .attr('height', rad*2)\n .attr('x', (_,i) => i*rad*2.5)\n .attr('y', 0)\n .style('fill','orange')\n \n sd.exit()\n .style('fill', 'red')\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"html`
Removing elements with exit()
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"html`\nSome of the utilities of exit() is to remove the surplus of elements, and it is no big deal with the help of the remove() function\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"md`#### Pattern`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"html`\n
\n\n ...\n\n selectedElements\n .exit()\n .remove() // Removes the \"selected\" elements. In this case, the selected elements correspond to the\n exited elements\n\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"{\n const width=config.size*2*7.5;\n const height=config.size*2;\n const rad = config.size;\n \n const svg = d3\n .select(DOM.svg(width, height));\n \n init(svg, width, height, rad, 10);\n \n const sd = svg\n .selectAll('rect')\n .data(data);\n \n // Select all the circles\n sd.enter()\n .append('rect')\n .merge(sd)\n .attr('width', rad*2)\n .attr('height', rad*2)\n .attr('x', (_,i) => i*rad*2.5)\n .attr('y', 0)\n .style('fill','orange')\n \n sd.exit()\n .remove()\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"html`Altough you may be wondering, in which cases do I want a unique ID? 🤔... Well, in the examples below are two of them`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"md`#### Case 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"html`\n\nRemember when you have elements in your DOM and you want to append some more, depending on you data, was necesary to use the merge() function in order to have all the elements in the selection? Well, what if you want to add as much elements as you have in your data or by some reason, you want to leave the existing DOM elements just the way they are?\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"html`\nWell, one use of the key function is to solve the problem stated above. Because with the key function you are joining an element with a given ID with an element, and if a DOM element still does not have that relation with you data, then a new element is created
\n\nConsider the example below, in which I take the key to be the element itself as the key.
I will be giving the boxes an offset for you to realize what is happening here\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"{ \n const width=config.size*2*7.5;\n const height=config.size*3;\n const rad = config.size;\n \n const svg = d3\n .select(DOM.svg(width, height));\n \n init(svg, width, height, rad, 3);\n \n const sd = svg\n .selectAll('rect')\n .data(data, d => d)\n \n // Select the missing circles and styles them\n sd.enter()\n .append('rect')\n .style('fill','orange')\n .attr('width', rad*2)\n .attr('height', rad*2)\n .attr('x', (_,i) => i*rad*2.5+rad/2)\n .attr('y', rad/2);\n \n sd.text('0')\n\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"html`\nNote in black are the existing DOM elements and in orange the ones that were appended\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"md`#### Case 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"html`\nBeyond being another case is a better way of seeing what can be util when asigning a key function.\nFor you to understand what is going on, each box will have a number associated to it.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"html`\nI will be using new data in order to give a better example and to be interactive\nThis new dataset will be just an array of the numbers from 5 to 1 all inclusive.
\nAnd to make it interactive, I will keep in mind which will be the next number to be added\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"key_data = {\n return {\n data:[5,4,3,2,1],\n actual: 6\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"data2 = key_data.data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md`Data join without key function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"html`\nWe have an example of boxes with numbers which do not have a key function\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"nokey = {\n const width=1000;\n const height=config.size*2;\n const rad = config.size;\n \n const svg = d3\n .select(DOM.svg(width, height)); \n \n const update = () =>{\n init(svg, width, height, rad, 1);\n\n const sd = svg\n .selectAll('rect')\n .data(data2);\n\n // Select all the circles\n sd.enter()\n .append('rect')\n .merge(sd)\n .attr('width', rad*2)\n .attr('height', rad*2)\n .transition()\n .attr('x', (_,i) => i*rad*2.5)\n .attr('y', 0)\n .style('fill','orange');\n \n const te = svg\n .selectAll('text')\n .data(data2);\n \n te\n .enter()\n .append('text')\n .merge(te)\n .transition()\n .text(d => d)\n .attr('x', (_,i,c) => (i*rad*2.5) + rad)\n .attr('y', rad)\n .style('alignment-baseline','middle')\n .style(\"text-anchor\", \"middle\");\n\n te.exit().remove();\n sd.exit().remove();\n }\n update();\n return [svg.node(), update];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"md`Data join with key function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"html`\nWe have another exmple of boxes with numbers which do have a key function, and will be the item (number) itself\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"keyed = {\n const width=1000;\n const height=config.size*2;\n const rad = config.size;\n \n const alph = 'ABCDEFGH';\n \n const svg = d3\n .select(DOM.svg(width, height)); \n \n const update = () =>{\n init(svg, width, height, rad, 1);\n\n const sd = svg\n .selectAll('rect')\n .data(data2, d=>d);\n\n // Select all the circles\n sd.enter()\n .append('rect')\n .merge(sd)\n .attr('width', rad*2)\n .attr('height', rad*2)\n .transition()\n .attr('x', (_,i) => i*rad*2.5)\n .attr('y', 0)\n .style('fill','orange');\n \n const te = svg\n .selectAll('text')\n .data(data2, d=>d);\n \n te\n .enter()\n .append('text')\n .merge(te)\n .transition()\n .text(d => d)\n .attr('x', (_,i,c) => (i*rad*2.5) + rad)\n .attr('y', rad)\n .style('alignment-baseline','middle')\n .style(\"text-anchor\", \"middle\");\n\n te.exit().remove();\n sd.exit().remove();\n }\n \n update();\n return [svg.node(), update];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"html`\nIn the first example (with no key function) all the elements are reasigned, thus changing the element it has previously\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"viewof insert = {\n const but = html``;\n but.onclick = ev =>{\n data2.unshift(key_data.actual++);\n nokey[1]();\n keyed[1]();\n }\n \n const reset = html``;\n reset.onclick = ev => {\n key_data.data.splice(0);\n for(let i = 5; i>0; i--){\n key_data.data.push(i)\n }\n key_data.actual=6;\n nokey[1]();\n keyed[1]();\n }\n \n return html`
${but}${reset}
`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"html`\nNo key function\n${nokey[0]}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"html`\nKey function\n${keyed[0]}\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"md`--- \n## Config `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"margin = {\n return { top: 10, right: 30, bottom: 20, left: 50 };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"width = 460 - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"height = 400 - margin.top - margin.bottom;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null

\nFunctions `enter()`, \n`exit()`\n`merge()`\n

Pattern

Selection of existing and appended elements with `merge()`

Selection of non-covered existing elements with `exit()`

Removing elements with `exit()`

\nFunctions enter(), \nexit()\nmerge()\n

Pattern

Selection of existing and appended elements with merge()

Selection of non-covered existing elements with exit()

Removing elements with exit()

\nFunctions `enter()`, \n`exit()`\n`merge()`\n

Selection of existing and appended elements with `merge()`

Selection of non-covered existing elements with `exit()`

Removing elements with `exit()`