31:T540,dibuixarquadrats = (svg, sq_size, height) => { let x = (height - sq_size)/2; let y = (height - sq_size)/2; //quadrats let it = 0; while(it < total){ sq_size = sq_size / 2; const sq1 = svg.append('rect') .attr('x', x) .attr('y', y) .attr('width', sq_size) .attr('height', sq_size) .style('stroke', 'none') .style('fill','RoyalBlue'); const sq2 = svg.append('rect') .attr('x', x) .attr('y', y + sq_size) .attr('width', sq_size) .attr('height', sq_size) .style('stroke', 'none') .style('fill','LightBlue'); const sq3 = svg.append('rect') .attr('x', x + sq_size) .attr('y', y + sq_size) .attr('width', sq_size) .attr('height', sq_size) .style('stroke', 'none') .style('fill',' LightSteelBlue'); //última iteració amb transició if(it === total-1){ sq1.style('opacity',0) .transition() .duration(500) .style('opacity',1); sq2.style('opacity',0) .transition() .duration(500) .style('opacity',1); sq3.style('opacity',0) .transition() .duration(500) .style('opacity',1); } x = x + sq_size; it++; } }32:T534,dibuixaretiquetes = (svg, sq_size, height) => { let x = (height - sq_size)/2; let y = (height - sq_size)/2; let original_sq_size = sq_size; //mida general svg.append('text') .attr('x', x + sq_size/2) .attr('y', y - 10) .attr('text-anchor', 'middle') .style('font-size', '20px') .text('1') svg.append('text') .attr('x', x - 15) .attr('y', y + sq_size/2 + 8) .attr('text-anchor', 'middle') .style('font-size', '20px') .text('1') let it = 0; let area = "1/4"; while(it < total){ sq_size = sq_size / 2; if(it === total-1){ const txt1 = svg.append('text') .attr('x', x + sq_size/2) .attr('y', () => sq_size > 40 ? y + sq_size/2 + 10 : y - 10) .attr('width', sq_size) .attr('height', sq_size) .attr('text-anchor', () => sq_size > 20 ? 'middle': 'end') .style('font-size', '15px') .style('fill','black') .text(() =>total\n

`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`## Apèndix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"chart = {\n const height = 600;\n const width = 600;\n let sq_size = 500;\n let x = (height - sq_size)/2;\n let y = (height - sq_size)/2;\n \n const svg = d3.select('#chart'); \n \n svg.selectAll('*') \n .remove();\n //.create(\"svg\")\n svg.attr(\"width\", width).attr(\"height\", height);\n console.log(total);\n\n dibuixarquadrats(svg, sq_size, height); \n dibuixarlinies(svg, sq_size, height); \n dibuixaretiquetes(svg, sq_size, height); \n// return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"side ={\n const side = document.getElementById('side');\n side.innerHTML = `

Iteració ${total

\n
Àrea darrer quadrat = ${total===0?\"-\" :total\n
Àrea total = ${total\n\n
`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"dibuixarlinies = (svg, sq_size, height) => {\n //línies\n let x = (height - sq_size)/2;\n let y = (height - sq_size)/2;\n const square = svg.append('rect')\n .attr('x', x) \n .attr('y', y)\n .attr('width', sq_size)\n .attr('height', sq_size)\n .style('stroke', 'black')\n .style('stroke-width', 1)\n .style('fill','none')\n \n let it = 0;\n while(it < total){\n sq_size = sq_size / 2;\n //línia vertical\n svg.append('line')\n .attr('x1', x + sq_size)\n .attr('y1', y)\n .attr('x2', x + sq_size)\n .attr('y2', y + 2*sq_size)\n .style('stroke', 'black')\n .style('stroke-width', 1);\n //línia horitzontal\n svg.append('line')\n .attr('x1', x)\n .attr('y1', y + sq_size)\n .attr('x2', x + 2*sq_size)\n .attr('y2', y + sq_size)\n .style('stroke', 'black')\n .style('stroke-width', 1);\n \n x = x + sq_size;\n it++;\n }\n\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"iteracions = d3.range(0,maxIterations)","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"maxIterations = 9;","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"calculAreaIteracio = ()=>{\n let it = 1;\n let area = 0;\n while(it <= total){\n area += Math.pow(0.25, it);\n it++;\n }\n return area;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}