29:null 2a:["$","title",null,{"children":"Basic D3 Data Join Template | Lao | Observable"}] 2f:T6b9,When learning D3 and Observables, I had a hard time figuring out how to do data joins. Once you learn, it isn't hard, but it takes a few tricks to set up correctly. When I started, I wish I knew: - .data(dataIn, d => d.key) - The second argument of .data() is for a key to keep track of each object. If you don't include this, D3 defaults to using the array index of data. This means if you start with dataIn = [A, B, C] , and then update it to dataIn = [A, C, D],

with keys:
>>> ${html`

A	updates to	A
B	exits
C	updates to	C
	enters	D

`} >> without keys:
>>> ${html`

A	updates to	A
B	updates to	C
C	updates to	D

`} - .join( enter => enter, update => update, exit => exit ) - This is the core of the update pattern. This is where the code goes for each enter, update and exit case.

- svg.selectAll("circle.dots") with .attr('class', 'dots') on enter - We need to make a class of each object that enters, so it can be reselected when the data is re-inputted. You don't technically need to do this if you only have one object type on the page, but if you are using something like D3 axes and then svg.selectAll("path") to make a line chart, then you will select the lines that are axes ticks.30:T75b,chart = { // settings let w=500, h=400; let animationSpeed = 2000; // in miliseconds let ease = d3.easeElasticOut.amplitude(1).period(0.3); // d3 includes a whole library of easing functions, // create chart const svg = d3.create("svg"); return Object.assign(svg.node(), {input(dataIn) { // this returns the SVG as an object with input() as a method for updating data svg.attr("width", w).attr("height", h) let dots = svg.selectAll("circle.dots") // selecting circles that have the 'dots' class. We have to add the class when each dot enters .data(dataIn, d => d.key) // you have to have a unique key for each datapoint, or D3 will use the array index .join( enter => enter // when data with a new key is added .append("circle") .attr('class', d => 'dots' + ' ' + d.class) // we need a class name so D3 can select these circles and leave other circles on the page alone. This is also where you can add other classes for CSS styling, seperated by a space // initial properties .transition().duration(0) .attr('cx', d => d.cx) .attr('cy', d => d.cy) .attr('r', 0 ) // animated properties .transition().duration(animationSpeed).ease(ease) .attr('r', d => d.r) // grows dot from point , update => update // when data with an existing key is updated .attr('class', d => 'dots' + ' ' + d.class) .transition().duration(animationSpeed).ease(ease) .attr('cx', d => d.cx) .attr('cy', d => d.cy) .attr('r', d => d.r) , exit => exit // when the data array no longer includes an object's key .transition().duration(animationSpeed).ease(ease) .attr('r', 5) // shrinks dot .remove() // removes object from scene ) }}) }31:[] 2d:{"id":"2bc5f29abedaa124","slug":null,"title":"Basic D3 Data Join Template","thumbnail":"651a6937060ae52741ec76099a939a619d6dff73a4e173cdd22b71ff24572214","access_level":"public","create_time":"$D2024-01-23T16:24:35.079Z","update_time":"$D2024-08-16T16:21:02.961Z","view_time":null,"first_public_time":"$D2024-01-23T17:16:45.795Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":385,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Basic D3 Data Join Template","cells":[{"id":0,"value":"# Basic D3 Data Join Template","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":219,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"data = {// Ctrl+S or Shift+Enter to update data to random positions\n let w = 500\n let h = 400\n let array = [ {key:'orange-0', class:'orange', r:100, cx:250, cy:200} ] // center dot that doesn't change\n\n for( let i=0; i<10; i++){ // Same points, but updates to a random position\n array.push({key:'coral-' + i, class:'coral', r:50*Math.random(), cx:w*Math.random(), cy:h*Math.random()})\n }\n \n let n = Math.round(100 * Math.random()) // number of dots\n for( let i=0; i /* styling done outside JavaScript keeps the code simple and help makes changes accessible to devs who program in CSS */\n circle.dots {\n fill:steelblue;\n opacity:.5;\n }\n circle.orange { fill:orange;}\n circle.coral { fill:coral;}\n circle.lightpink { fill:lightpink; opacity:.2; }\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"