2d:null 2e:["$","title",null,{"children":"d3js - enter(), update() and exit() | Malik Koné | Observable"}] 33:T97d,chart = { //globals let setIndex="set1"; const bouton = html`` const svgDoc = d3.select(DOM.svg(width, height)); // not the same as html`` But .. DOM.svg(width, height) seems very close.. // the title svgDoc.append("text") .attr("x", baseLine.xMiddle) .attr("y",50) .text("Dataset "+setIndex) .style("text-anchor","middle"); //create axis line svgDoc.append("line") .attr("x1", baseLine.x) .attr("y1", baseLine.y) .attr("x2", baseLine.x + baseLine.length) .attr("y2", baseLine.y) .style("stroke","#ddd") .style("shape-rendering","crispEdges"); //create basic circles svgDoc.append("g").selectAll("circle") .data(data[setIndex]) // eval("dataArray"+dataIndex) .enter() .append("circle") .attr("cx", place_circle) .attr("cy", baseLine.y) .attr("r", (d,i) => d) .style("fill","orange") // style from css .style("stroke", "orange") .style("fill-opacity",'0.5'); // second cut //button to swap over datasets d3.select(bouton) // not as same //d3.select("#monBouton") // d3.select("#monBouton") .text("Change data") .on("click", on_click_func); function on_click_func(){ //select new data by cycling between dataIndex 1 and 2 (see if at end of notebook) //dataIndex = dataIndex + i.pow(2*dataIndex-2) setIndex = (setIndex === "set1") ? "set2" : "set1"; //rejoin data const circle = svgDoc.select("g").selectAll("circle") .data(data[setIndex]); circle.exit().remove(); //remove unneeded circles circle.enter().append("circle") .attr("cx", place_circle) .attr("cy", baseLine.y) .attr("r", (d,i) => d) .style("fill","orange") // style from css .style("stroke", "orange") .style("fill-opacity",'0.5'); // .attr("r", d=>d);//create any new circles needed //update all circles to new positions circle.transition() .duration(500) .attr("cx", place_circle) .attr("cy", baseLine.y) .attr("r", (d,i) => d); svgDoc.select("text").text("Dataset "+setIndex); };//end click function function place_circle(d,i){ const spacing = baseLine.length/(data[setIndex].length); return baseLine.x+(i*spacing) } const div = html`

`; div.appendChild(bouton); div.appendChild(svgDoc.node()); return div }34:[] 31:{"id":"9589b70ea42702e2","slug":"d3js-enter-update-and-exit","title":"d3js - enter(), update() and exit()","thumbnail":"6a61a1b1411e5effe69bfc885bd859a0a171f2af6d1d4730e79f96bcb966cf85","access_level":"public","create_time":"$D2019-01-24T14:45:01.320Z","update_time":"$D2019-01-27T14:28:44.945Z","view_time":null,"first_public_time":"$D2019-01-24T16:45:13.623Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024"},"version":809,"publish_version":809,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null}],"members":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"dddb84019006509b","slug":"observe-to-explore-vice-versa","title":"Observe, Explore & vice versa","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"type":"notebook","body":{"title":"d3js - enter(), update() and exit()","cells":[{"id":0,"value":"md`# d3js - enter(), update() and exit()\nfrom [Alan Smith](http://bl.ocks.org/alansmithy)’s [Block e984477a741bc56db5a5](https://gist.github.com/alansmithy/e984477a741bc56db5a5),\n December 27, 2017 and with [Bryan](https://beta.observablehq.com/@bryangingechen)'s help`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"data = {\n let dataArray1 = [30,35,45,55,70, 60];\n let dataArray2 = [50,55,45,35,20,25,25,40, 10, 15, 5, 70];\n return {\"set1\":dataArray1, \"set2\":dataArray2}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"baseLine = {\n let x = 50,\n y = 150,\n length = 400;\n let xMiddle = x + length/2;\n return {x, y, length, xMiddle}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"height = baseLine.y + d3.max(Object.values(data).flat()) +10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"md`\n- add a container. What I call container is:\n - *{...}* or *{svgDoc = d3.select(DOM.svg(width, height)); ... return svg}*\n - the *svgDoc* correspond to the DOM element containing the chart.\n - it's to replace something like *var svgDoc = d3.select(\"body\").append(\"svg\")* in vanilla JS\n- width is by default the width of the window, but height need to be explicted,\n- css is transformed in style attributes to svg nodes,\n- debugg: step, \n - cut the *vanilla* javascript in small blocks, \n - evaluate\n - merge with another bolck of code when the previous works\n- track not defined variable in orphan blocks to see if it's necessary to merge them with your main block`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"md`### For the button`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`## Documentation & imports\nimportant doc available [here at the observable git projet](https://github.com/observablehq/stdlib/blob/master/README.md)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"DOM","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"complex = require('complex.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"i = complex(0,1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`## Keep your working snippets\n*Until you are satified with the main attemp*\nMean while:\n- duplicate them and continue on main branch\nor even best master a version control system (I don't)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"md`## Scrapping area`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"md`Differents *if*s`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"{ \n var foo = 2\n if (foo==1) {\n foo=2; \n } else {\n foo=1;\n }\n return foo\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"{ \n var foo = 2\n foo = (foo == 1)\n ? 2\n : 1\n return foo\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"{ \n var foo = 2\n foo = (foo == 1) ? 2 : 1\n return foo\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"{ \n var foo = 2\n return foo + i.pow(2*foo-2).re\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"md`#### Manipulating DOM elements...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"svg = { return html``}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"svg3 = { return DOM.svg(width, height)}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"svg2 = { return d3.select(DOM.svg(width, height))}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"bouton2 = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"d3.select(\"#monBouton2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"d3.select(bouton2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"