3e:null 3f:["$","title",null,{"children":"Sesión_05 | Julian Benavides's Workspace | Observable"}] 45:T514,{ const ancho = 800; const alto = 400; const miLienzo = d3.create("svg").attr("width", ancho).attr("height", alto) const numeroLados = 10; const radio = 100; const misPuntosEstrella = []; const misPuntosPoligono = []; const generadorPaths = d3.line(); for (let i = 0; i < (numeroLados * 2) ; i++) { const anguloPunto = i * ((2*Math.PI) / numeroLados)/2 ; const x = (ancho/4) + (Math.cos(anguloPunto) * (i % 2 === 0 ? radio : radio/3)); const y = (alto/2) + Math.sin(anguloPunto) * (i % 2 === 0 ? radio : radio/3); misPuntosEstrella[i] = [x, y]; } miLienzo.append("path") .attr("d", generadorPaths(misPuntosEstrella) + "z") .attr("stroke", "red") .attr("stroke-width", "5") .attr("stroke-linejoin", "round") .attr("fill", "none") for (let i = 0; i < (numeroLados * 2) ; i++) { const anguloPunto = i * ((2*Math.PI) / numeroLados) ; const x = ((ancho/4)*3) + (Math.cos(anguloPunto) * radio); const y = (alto/2) + (Math.sin(anguloPunto) * radio); misPuntosPoligono[i] = [x, y]; } miLienzo.append("path") .attr("d", generadorPaths(misPuntosPoligono) + "z") .attr("stroke", "red") .attr("stroke-width", "5") .attr("stroke-linejoin", "round") .attr("fill", "none") return miLienzo.node() } 46:T6fa,estre_poli = { const ancho = 600; const alto = 400; const miLienzo = d3.create("svg").attr("width", ancho).attr("height", alto) const numeroLados = lados; const radio = radio1; const radioInterno = radio2; const misPuntosEstrella = []; const misPuntosPoligono = []; const generadorPaths = d3.line(); for (let i = 0; i < (numeroLados * 2) ; i++) { const anguloPunto = i * ((2*Math.PI) / numeroLados)/2 ; const x = (Math.cos(anguloPunto) * (i % 2 === 0 ? radio : radioInterno)); const y = (Math.sin(anguloPunto) * (i % 2 === 0 ? radio : radioInterno)); misPuntosEstrella[i] = [x, y]; miLienzo.append("circle") .attr("cx",x) .attr("cy",y) .attr("r", 3) .attr("fill", "red") .attr("transform",`translate(${ancho/4},${(alto/4)})`) } miLienzo.append("path") .attr("d", generadorPaths(misPuntosEstrella) + "z") .attr("stroke", "red") .attr("stroke-width", "5") .attr("stroke-linejoin", "round") .attr("fill", "none") .attr("transform",`translate(${ancho/4},${(alto/4)*3})`) for (let i = 0; i < (numeroLados * 2) ; i++) { const anguloPunto = i * ((2*Math.PI) / numeroLados) ; const x = (Math.cos(anguloPunto) * radio); const y = (Math.sin(anguloPunto) * radio); misPuntosPoligono[i] = [x, y]; miLienzo.append("circle") .attr("cx",x) .attr("cy",y) .attr("r", 3) .attr("fill", "red") .attr("transform",`translate(${(ancho/4)*3},${(alto/4)})`) } miLienzo.append("path") .attr("d", generadorPaths(misPuntosPoligono) + "z") .attr("stroke", "red") .attr("stroke-width", "5") .attr("stroke-linejoin", "round") .attr("fill", "none") .attr("transform",`translate(${(ancho/4)*3},${(alto/4)*3})`) return miLienzo.node() }47:[] 43:{"id":"0bb844bd2dd152e9","slug":null,"title":"Sesión_05","thumbnail":"7bb0c0a4e67d821564bb73c815432fb54b0d11ad050306273a73c3c81ef4aaf0","access_level":"public","create_time":"$D2023-09-09T16:13:23.575Z","update_time":"$D2023-09-22T02:44:08.500Z","view_time":null,"first_public_time":"$D2023-09-09T16:13:23.575Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3e20a11091477831","login":"julian-benavides-ws","name":"Julian Benavides's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/144636c827554b28643bb0d978da95a932737fbb694150d1f9fcd803e22c37d9","tier":"starter_2024","bio":"","following":false},"version":293,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0343136a9a2d0670","login":"julian-benavides","name":"Julian Benavides","avatar_url":"https://avatars-next.observableusercontent.com/40d267ada87700bbc1fef110933632ec672ceacbf715b1e67501df750771e0d9","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"0343136a9a2d0670","login":"julian-benavides","name":"Julian Benavides","avatar_url":"https://avatars-next.observableusercontent.com/40d267ada87700bbc1fef110933632ec672ceacbf715b1e67501df750771e0d9","tier":null,"role":"editor"},{"type":"team","id":"3e20a11091477831","login":"julian-benavides-ws","name":"Julian Benavides's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/144636c827554b28643bb0d978da95a932737fbb694150d1f9fcd803e22c37d9","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sesión_05","cells":[{"id":0,"value":"# Sesión_05","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"Un loop debe tener:\n- Contador: normalmente se define con la variable \"i\"\n- Instrucciones\n- Condicional","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"{\n\n// \"i\" es el contador\n// i < 10 es la condición que debe cumplirse para que el loop continue\n// i++ da la instrución para que i aumente de a 1 unidad, podría ser diferentes como i =+ 2\n\n let miTexto = \"\";\n const numeroDeIteraciones = 10;\n \n for (let i = 0; i < numeroDeIteraciones; i++) {\n miTexto = miTexto + \" Hola\"\n }\n\n return miTexto\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"{\n\n let miLista = [];\n const numeroDeIteraciones = 10;\n \n for (let i = 0; i < numeroDeIteraciones; i++) {\n miLista [i] = i * 10;\n }\n\n return miLista\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"{\n let miLista = [\"Mikel\", \"Julian\", \"Diego\", \"Juan Felipe\", \"Sergio\", \"Angelica\"];\n\n //Devolver cuantos elementos hay en la lista\n return miLista.length\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"{\n\n let miLista = [\"Mikel\", \"Julian\", \"Diego\", \"Juan Felipe\", \"Sergio\", \"Angelica\"];\n\n for (let i = 0; i < miLista.length; i++) {\n miLista[i] = \"Hola \" + miLista[i];\n }\n \n //.lenght devolver cuantos elementos hay en la lista\n return miLista\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"{\n \n const ancho = 500;\n const alto = 500;\n const miLienzo = d3.create(\"svg\").attr(\"width\", ancho).attr(\"height\", alto)\n\n const numeroCirculos = 100;\n \n for (let i = 0; i < numeroCirculos; i++) {\n \n miLienzo.append(\"circle\")\n .attr(\"cx\", Math.random() * ancho)\n .attr(\"cy\", Math.random() * alto)\n .attr(\"r\", Math.random() * 5)\n .attr(\"fill\", `hsl(${Math.random() * 360},50%,50%)` )\n }\n\n return miLienzo.node()\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"{\n \n const ancho = 500;\n const alto = 500;\n const miLienzo = d3.create(\"svg\").attr(\"width\", ancho).attr(\"height\", alto)\n\n const numeroCirculos = 100;\n const color1 = \"red\";\n const color2 = \"blue\";\n \n for (let i = 0; i < numeroCirculos; i++) {\n\n let colorCirculo;\n if (i > numeroCirculos/2) {colorCirculo = color1}\n else {colorCirculo = color2 }\n \n \n miLienzo.append(\"circle\")\n .attr(\"cx\", Math.random() * ancho)\n .attr(\"cy\", Math.random() * alto)\n .attr(\"r\", Math.random() * 5)\n .attr(\"fill\", colorCirculo )\n }\n\n return miLienzo.node()\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"{\n \n const ancho = 500;\n const alto = 500;\n const miLienzo = d3.create(\"svg\").attr(\"width\", ancho).attr(\"height\", alto)\n\n const numeroCirculos = 10000;\n const color1 = \"red\";\n const color2 = \"blue\";\n \n for (let i = 0; i < numeroCirculos; i++) { \n \n miLienzo.append(\"circle\")\n .attr(\"cx\", Math.random() * ancho)\n .attr(\"cy\", Math.random() * alto)\n .attr(\"r\", Math.random() * 5)\n .attr(\"fill\", i % 2 === 0 ? color1 : color2)\n //% es módulo y arroga el valor del sobrante de la condición\n }\n\n return miLienzo.node()\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"{\n const ancho = 500;\n const alto = 500;\n const miLienzo = d3.create(\"svg\").attr(\"width\", ancho).attr(\"height\", alto)\n\n const numeroLados = 20;\n const angulo = (2 * Math.PI) / numeroLados;\n const radio = 100;\n const misPuntos = []; //Recibira listas de 2 valores (x,y) que definiran los puntos del polígono\n const generadorPaths = d3.line();\n\n for (let i = 0; i < numeroLados; i++) {\n const anguloPunto = i * angulo;\n const x = (ancho/4) + (Math.cos(anguloPunto) * radio);\n const y = (alto/2) + Math.sin(anguloPunto) * radio;\n misPuntos[i] = [x, y];\n }\n\n miLienzo.append(\"path\")\n .attr(\"d\", generadorPaths(misPuntos))\n .attr(\"fill\", \"red\")\n\n return miLienzo.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"viewof lados = Inputs.range([0, 24], {label: \"Lados\", step: 1});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"viewof radio1 = Inputs.range([0, 100], {label: \"Radio Externo\", step: 1});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"viewof radio2 = Inputs.range([0, 100], {label: \"Radio Interno\", step: 1});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"