29:null 2a:["$","title",null,{"children":"D3 General Update Pattern | Dea Bankova | Observable"}] 2f:Te1c,chartUpdatePositions = { // Bring in the buttons const enterBtn = document.getElementById('enter-btn') const updateBtn = document.getElementById('update-btn') const returnBtn = document.getElementById('return-btn') // Graph container const width = 600 const height = 600 const svg = d3.create("svg") .attr("width", width) .attr("height", height) /* Put all the graph-drawing logic in a function so that we can re-draw from button events based on chaged data */ const drawGraph = (data) => { const rects = svg.selectAll('circle') .data(data, d => d.id) .join( enter => { return enter.append('circle') // Position and properties that we will animate *from* upon entry .attr('cx', 0) // enter from 0 on the left (horizontally) .attr('cy', (d, i) => 100 + i*80) // enter from final vertical position .style('stroke-width', 0) .style('fill', d => colourScale[d.category]) }, update => { return update // Position and properties that we will animate *from* upon update .attr('cx', 300) // don't move horizontally on update .style('stroke-width', 3) }, exit => { exit // Position and properties that we will animate *to* for the exiting elements .transition().duration(1000) .attr('r', 0) // radius shrinks on exiting elements .style('fill', '#000') // fill becomes black as the element shrinks .attr('cx', 500) // element moves to the right as it disappears //.remove() // uncomment this to see what happens if exit selection is removed } ) /* All the properties before the transition are properties for the enter and update selection to transition *from*; we could have added them in each of the enter and update definitions, too */ .style('stroke', '#000') // Then these are the properties that both the enter and update selection will transition *to* .transition().duration(1000) .attr('cx', 300) // on enter: 0 -> 300; on update 300 -> 300 i.e. no transition /* 👇🏻 on enter: no transition; on update: shuffle elements from old to new vertical positon (based on index so elements will move up if some elements are exiting) */ .attr('cy', (d, i) => 100 + i*80) .attr('r', d => d.value) // old value to new value for that particular element .style('fill', d => colourScale[d.category]) // only needed as exit selection is black; no effect on enter selection .style('stroke-width', 0) // Add text so we can see the elements const text = svg .selectAll("text") .data(data, d => d.id) .join('text') .attr("x", 180) .attr("dy", "0.35em") .text(d => d.category) .style('fill', d => colourScale[d.category]) .style('font-size', '20px') .transition().duration(1000) .attr("y", (d, i) => 100 + i*80) } drawGraph(initialData) // Simulate an enter pattern enterBtn.addEventListener('click', () => { // Remove the elements before we draw again so we can see the enter pattern d3.selectAll('circle').remove() d3.selectAll('text').remove() drawGraph(initialData) }) updateBtn.addEventListener('click', () => { drawGraph(changedData) }) returnBtn.addEventListener('click', () => { drawGraph(initialData) }) return svg.node(); }30:Td09,chartKeepPositions = { // Graph container const width = 600 const height = 600 const svg = d3.create("svg") .attr("width", width) .attr("height", height) const drawGraph = (data) => { const rects = svg.selectAll('circle') .data(data, d => d.id) .join( enter => { return enter.append('circle') // Position and properties that we will animate *from* upon entry .attr('cx', 0) // enter from 0 on the left (horizontally) .attr('cy', (d, i) => 100 + i*80) // enter from final vertical position .style('stroke-width', 0) .style('fill', d => colourScale[d.category]) }, update => { return update // Position and properties that we will animate *from* upon update .attr('cx', 300) // don't move horizontally on update .style('stroke-width', 3) }, exit => { exit .transition().duration(1000) // Position and properties that we will animate *to* for the exiting elements .attr('r', 0) // radius shrinks on exiting elements .style('fill', '#000') // fill becomes black as the element shrinks .attr('cx', 500) // element moves to the right as it disappears } ) .style('stroke', '#000') .transition().duration(1000) .attr('cx', 300) .attr('r', d => d.value) .style('fill', d => colourScale[d.category]) .style('stroke-width', 0) // Add text so we can see the elements const text = svg .selectAll("text") .data(data, d => d.id) .join( enter => { return enter.append('text') .attr("y", (d, i) => 100 + i*80) }, update => update, exit => { exit.transition().duration(1000) .attr("x", (d, i) => 500) } ) .attr("x", 180) .attr("dy", "0.35em") .text(d => d.category) .style('fill', d => colourScale[d.category]) .style('font-size', '20px') } drawGraph(initialData) // if (actionIndexBasedNoShift === 'enter') { // // Remove the elements before we draw again so we can see the enter pattern // d3.selectAll('circle').remove() // d3.selectAll('text').remove() // drawGraph(initialData) // } else if (actionIndexBasedNoShift === 'update') { // drawGraph(changedData) // } else if (actionIndexBasedNoShift === 'return') { // drawGraph(initialData) // } else { // console.log('waiting for button to be clicked') // } // Use this if getting buttons from the DOM // Bring in the buttons const enterBtn = document.getElementById('enter-btn-keep') const updateBtn = document.getElementById('update-btn-keep') const returnBtn = document.getElementById('return-btn-keep') // Simulate an enter pattern enterBtn.addEventListener('click', () => { // Remove the elements before we draw again so we can see the enter pattern d3.selectAll('circle').remove() d3.selectAll('text').remove() drawGraph(initialData) }) updateBtn.addEventListener('click', () => { drawGraph(changedData) }) returnBtn.addEventListener('click', () => { drawGraph(initialData) }) return svg.node(); }31:Tbf0,chartKeepPositionsWithoutIndex = { // Bring in the buttons const enterBtn = document.getElementById('enter-btn-keep-scales') const updateBtn = document.getElementById('update-btn-keep-scales') const returnBtn = document.getElementById('return-btn-keep-scales') // Graph container const width = 600 const height = 600 const svg = d3.create("svg") .attr("width", width) .attr("height", height) // Scales const yScale = d3.scalePoint() .domain(initialData.map(d => d.id)) .range([50, height - 50]) // Graph const drawGraph = (data) => { const rects = svg.selectAll('circle') .data(data, d => d.id) .join( enter => { return enter.append('circle') // Position and properties that we will animate *from* upon entry .attr('cx', 0) // enter from 0 on the left (horizontally) .attr('cy', d => yScale(d.id)) // enter from final vertical position .style('stroke-width', 0) .style('fill', d => colourScale[d.category]) }, update => { return update // Position and properties that we will animate *from* upon update .attr('cx', 300) // don't move horizontally on update .style('stroke-width', 3) }, exit => { exit .transition().duration(1000) // Position and properties that we will animate *to* for the exiting elements .attr('r', 0) // radius shrinks on exiting elements .style('fill', '#000') // fill becomes black as the element shrinks .attr('cx', 500) // element moves to the right as it disappears } ) .style('stroke', '#000') .transition().duration(1000) .attr('cx', 300) // .attr('cy', d => yScale(d.id)) // You can uncomment this but nothing will happen .attr('r', d => d.value) .style('fill', d => colourScale[d.category]) .style('stroke-width', 0) // Add text so we can see the elements const text = svg .selectAll("text") .data(data, d => d.id) .join( enter => { return enter.append('text') .attr("y", (d, i) => 100 + i*80) }, update => update, exit => { exit.transition().duration(1000) .attr("x", (d, i) => 500) } ) .attr("x", 180) .attr("dy", "0.35em") .text(d => d.category) .style('fill', d => colourScale[d.category]) .style('font-size', '20px') } drawGraph(initialData) // Simulate an enter pattern enterBtn.addEventListener('click', () => { // Remove the elements before we draw again so we can see the enter pattern d3.selectAll('circle').remove() d3.selectAll('text').remove() drawGraph(initialData) }) updateBtn.addEventListener('click', () => { drawGraph(changedData) }) returnBtn.addEventListener('click', () => { drawGraph(initialData) }) return svg.node(); }32:Tff3,chartSeparateTransitions = { // Bring in the buttons const enterBtn = document.getElementById('enter-btn-separate-transitions') const updateBtn = document.getElementById('update-btn-separate-transitions') const returnBtn = document.getElementById('return-btn-separate-transitions') const customElastic = d3.easeElastic.period(0.6); // This is the custom ease we will use // Graph container const width = 600 const height = 600 const svg = d3.create("svg") .attr("width", width) .attr("height", height) const drawGraph = (data) => { const rects = svg.selectAll('circle') .data(data, d => d.id) .join( enter => { return enter.append('circle') // Position and properties that we will animate *from* upon entry .attr('cx', 0) // enter from 0 on the left (horizontally) .attr('cy', (d, i) => 100 + i*80) // enter from final vertical position .style('stroke-width', 0) .style('fill', d => colourScale[d.category]) // Position and properties that we will animate *to* upon entry .transition().duration(1000).ease(customElastic) .attr('cx', 300) // 0 -> 300 .attr('r', d => d.value) // 0 -> value }, update => { return update // Position and properties that we will animate *from* upon update // 👇🏻 if you set cx here you won't get a transition from the exit cx value of 500 //.attr('cx', 300) // 👇🏻 if you set the colour here you won't get a transition from the exit value of black //.style('fill', d => colourScale[d.category]) .style('stroke-width', 3) // stroke will flash just for a second on update .transition().duration(2000) // 👇🏻 500 -> 300 here or 300 -> 300 i.e. no transition if cx is set above for elements // coming back from having exited .attr('cx', 300) // 👇🏻 black -> colour here or no colour transition if fill is set above for elements // coming back after exiting; no effect on elements which are only changing other properties .style('fill', d => colourScale[d.category]) // 👇🏻 if this is set then the circles will shift up based on index whenever some // of the circles exit; if this is not set then there will be gaps for missing circles .attr('cy', (d, i) => 100 + i*80) .attr('r', d => d.value) .style('stroke-width', 0) // stroke will disappear just after flashing on update }, exit => { exit // Position and properties that we will animate *to* for the exiting elements .transition().duration(1000) .attr('r', 0) // radius shrinks on exiting elements .style('fill', '#000') // fill becomes black as the element shrinks .attr('cx', 500) // element moves to the right as it disappears } ) // Only add constant values that even change on enter update or exit below .style('stroke', '#000') // Add text so we can see the elements const text = svg .selectAll("text") .data(data, d => d.id) .join('text') .attr("x", 180) .attr("dy", "0.35em") .text(d => d.category) .style('fill', d => colourScale[d.category]) .style('font-size', '20px') .transition().duration(1000) .attr("y", (d, i) => 100 + i*80) } drawGraph(initialData) // Simulate an enter pattern enterBtn.addEventListener('click', () => { // Remove the elements before we draw again so we can see the enter pattern d3.selectAll('circle').remove() d3.selectAll('text').remove() drawGraph(initialData) }) updateBtn.addEventListener('click', () => { drawGraph(changedData) }) returnBtn.addEventListener('click', () => { drawGraph(initialData) }) return svg.node(); }33:[] 2d:{"id":"4828514453f582f2","slug":"d3-general-update-pattern","title":"D3 General Update Pattern","thumbnail":"533a2fd8c50f6d397d3b96d70489b9de2610989771e280b56e7bc41025b5bbb7","access_level":"public","create_time":"$D2022-05-25T07:36:10.841Z","update_time":"$D2023-06-06T18:20:52.144Z","view_time":null,"first_public_time":"$D2022-05-25T19:31:01.137Z","has_unpublished_edits":null,"fork":{"id":"6d7c773a6d3673b0","slug":"d3-scatterplot","title":"D3 scatterplot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":9,"starred":false,"owner":{"type":"team","id":"ff1e8a7fac805262","login":"deaxmachina","name":"Dea Bankova","avatar_url":"https://avatars-next.observableusercontent.com/a308b4ba2fa30b481d3ab1406f4359318e3fd5edded8e9b84c8b3a2fd8831a1a","tier":"starter_2024"},"version":285,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"02cf083ba1ef32dd","login":"deaxmachina","name":"Dea Bankova","avatar_url":"https://avatars-next.observableusercontent.com/a308b4ba2fa30b481d3ab1406f4359318e3fd5edded8e9b84c8b3a2fd8831a1a","tier":null}],"members":[{"type":"individual","id":"02cf083ba1ef32dd","login":"deaxmachina","name":"Dea Bankova","avatar_url":"https://avatars-next.observableusercontent.com/a308b4ba2fa30b481d3ab1406f4359318e3fd5edded8e9b84c8b3a2fd8831a1a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"D3 General Update Pattern","cells":[{"id":0,"value":"# D3 General Update Pattern\n\nNotes on the general update pattern on D3. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"## (1) Index-based position, with shifting element positions\n- There is no y scale to align the elements and position is done just based on index\n- Using the index, we make the elements shift up and down to fill up the space on update\n- Note that here we don't remove the exiting elements, even if the radius shrinks to 0; they are still there. So if they 'move back' their behaviour is governed by the update selection and not the enter selection.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"## (2) Index-based, without shifting vertical position\nThe only difference from (1) is that we only set the `cy` vertical position attribute on enter, i.e. `.attr('cy', (d, i) => 100 + i*80)`. We don't set it on the update or after the transition on the enter + update selection. What this means is that when the elements update and some elements exit, they leave a gap where they were and the remaining elements don't shift up to fill the gap. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":255,"value":"// viewof actionIndexBasedNoShift = Inputs.button([\n// [\"Enter\", value => 'enter'],\n// [\"Update\", value => 'update'],\n// [\"Return\", value => 'return']\n// ], {value: 0, label: \"Action\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"## (3) Scales-based, without shifting vertical position\nWhat if we were using a proper vertical scale for the vertical positioning, rather than just the index of the data elements? \nEven if we tried to shift the vertical position like in the first example, with this approach it won't work because the y scale is based on a scale based on unique id for each element, rather than based on index of element in the data, which changes as the data array changes. If you want to get the shifting position effect like in the first example, you have to use a scale based on the index in the data array, rather than on any unique data properties. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"## (4) Separate transitions\n- What if we want to have different transitions on the enter, update and exit selections?\n- We need to do each transition inside of the logic for enter, update and exit, and not in the enter + update selection.\n- Example below has a custom ease on enter, slower ease on update and quicker on exit. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"## Data & Constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"colourScale = ({\n 'cat': 'plum',\n 'panda': 'rebeccapurple',\n 'dog': 'lightseagreen'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"changedData = [\n { id: 1, value: 10, category: 'cat'}, // changed value\n { id: 2, value: 50, category: 'panda'}, // changed value\n //{ id: 3, value: 40, category: 'cat'}, //exited\n { id: 4, value: 20, category: 'cat'}, // satyed the same\n { id: 5, value: 25, category: 'panda'}, // changed value\n //{ id: 6, value: 25, category: 'dog'}, //exited \n // { id: 7, value: 55, category: 'dog'} // entered -- uncomment to see what happens\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"initialData = [\n { id: 1, value: 20, category: 'cat'},\n { id: 2, value: 30, category: 'panda'},\n { id: 3, value: 40, category: 'cat'},\n { id: 4, value: 20, category: 'cat'},\n { id: 5, value: 45, category: 'panda'},\n { id: 6, value: 25, category: 'dog'}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"