30:[] 2e:{"title":"Side by Side","cells":[{"id":0,"value":"md`# Side by Side`","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"html`

${chart}

${chart2}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"chart = {\n const svg = d3.create('svg').attr('viewBox',[0,0,width/2,height]);\n\n const border = svg.append('path').attr('d',`M0,0L0,${height}L${width/2},${height}L${width/2},0L0,0`).attr('fill','#ffffff').attr('stroke','black').attr('stroke-width',3)\n\n const box = svg.append('rect').attr('width',width/2).attr('height',height).attr('fill','gray').attr('opacity',.1)\n\n const g = svg.append('g')\n \n g.selectAll('rect')\n .data(centers)\n .join('rect')\n .attr('transform',d=>`translate(${x(d[0])},${y(d[1])}) rotate(45)`)\n .attr('width',20)\n .attr('height',20)\n .attr('fill','green') \n \n const zoom_fun = d3.zoom()\n .extent([[0, 0], [width, height]])\n .scaleExtent([0, 10])\n .on(\"zoom\", zoomed)\n \n function zoomed() {\n g.attr(\"transform\", d3.event.transform.toString());\n }\n \n svg.call(zoom_fun)\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"chart2 = {\n const svg = d3.create('svg').attr('viewBox',[0,0,width/2,height]) ;\nconst border = svg.append('path').attr('d',`M0,0L${width/2},0L${width/2},${height}L0,${height}`).attr('fill','#ffffff').attr('stroke','black').attr('stroke-width',3)\n\n const box = svg.append('rect').attr('width',width/2).attr('height',height).attr('fill','pink').attr('opacity',.2)\n const g1 = svg.append('g')\n \n \n g1.selectAll('circle')\n .data(centers2)\n .join('circle')\n .attr('cx',d=>x(d[0]))\n .attr('cy',d=>y(d[1]))\n .attr('r',10)\n .attr('fill','blue') \n \n \n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"html`

hello randomx()),Array.from({length:100},d=>randomy()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"centers2 = d3.zip(Array.from({length:10},d=>randomx()),Array.from({length:100},d=>randomy()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"centers","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"centers2","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"centers.concat(centers2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"body.node()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}