2c:null 2d:["$","title",null,{"children":"Club de programación | juanFelipe | Observable"}] 32:[{"id":"891533766e0e80b29c8a1d765d7923aa9c729ee67d77c6e661a8989eb077e53d034330be36dbf777010cd763df4a47c327c53465eae1b14f28521c16f94dfb2b","href":"https://static.observableusercontent.com/files/891533766e0e80b29c8a1d765d7923aa9c729ee67d77c6e661a8989eb077e53d034330be36dbf777010cd763df4a47c327c53465eae1b14f28521c16f94dfb2b","name":"Screenshot 2023-09-09 at 13-51-05 Wall Drawing 396 MASS MoCA.png","type":"image/png","lastModified":1694879938791.311,"size":1347792}] 30:{"id":"af7992f4d96aadad","slug":null,"title":"Club de programación","thumbnail":"b348bbbfbb04ebce62cfea34b1da5796e8a4621afd272cea58bac98fe24cf5e2","access_level":"public","create_time":"$D2023-09-16T15:58:58.791Z","update_time":"$D2023-09-16T15:58:58.791Z","view_time":null,"first_public_time":"$D2023-09-16T15:58:58.791Z","has_unpublished_edits":null,"fork":{"id":"30cf5e665f539a5c","slug":null,"title":"Club de programación","owner":{"id":"b08d810ce7971cef","login":"juanfuc","name":"juanFelipe"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b08d810ce7971cef","login":"juanfuc","name":"juanFelipe","avatar_url":"https://avatars-next.observableusercontent.com/037dd09add2cbc71786979cc31dd87cb23bfa363a7e7e4d2e86d11909d7b6be7","tier":"starter_2024"},"version":519,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"787cd2505170a6b7","login":"juanfuc","name":"juanFelipe","avatar_url":"https://avatars-next.observableusercontent.com/037dd09add2cbc71786979cc31dd87cb23bfa363a7e7e4d2e86d11909d7b6be7","tier":null}],"members":[{"type":"individual","id":"787cd2505170a6b7","login":"juanfuc","name":"juanFelipe","avatar_url":"https://avatars-next.observableusercontent.com/037dd09add2cbc71786979cc31dd87cb23bfa363a7e7e4d2e86d11909d7b6be7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Club de programación","cells":[{"id":0,"value":"# Club de programación\n## por Juan Felipe Urueña","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"

Este es mi título

Este es otro

\n\n\n \n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"x = +1 ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"y = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"getRandom = (min, max) => Math.random() * (max - min) + min;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"createBubbles = () => {\nconst svg = document.getElementById(\"bubble-svg\");\n\nfor (let i = 0; i < 400; i++) {\n const circle = document.createElementNS(\"http://www.w3.org/2000/svg\",\"circle\");\n circle.setAttribute(\"cx\", getRandom(0, 800));\n circle.setAttribute(\"cy\", getRandom(0, 600));\n circle.setAttribute(\"r\", getRandom(10, 15));\n circle.setAttribute(\"fill\", \"#000\");\n circle.setAttribute(\"stroke\", \"#ffffff\");\n svg.appendChild(circle);\n}\n\n};\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"resetBubbles = () => {\n const svg = d3.select(\"#bubble-svg\");\n svg.selectAll(\"circle\").remove();\n createBubbles();\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"addMoreBubbles = () => {\n createBubbles();\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"deleteBubbles = () => {\n const svg = d3.select(\"#bubble-svg\");\n svg.selectAll(\"circle\").remove();\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"lienzo = {\n //const ancho = 500;\n //const alto = 500;\n const mizq = ancho * 0.1;\n const mder = ancho * 0.1;\n const msup = alto * 0.1;\n const minf = alto * 0.1;\n const anchointerno = ancho - mizq - mder;\n const altointerno = alto - msup - minf;\n\n \n const svg = d3.create(\"svg\")\n .attr(\"width\", ancho)\n .attr(\"height\", alto)\n .style(\"background\", color)\n\n const g = svg.append(\"g\").attr(\"transform\", `translate(${mizq},${msup})`)\n \n g.append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", anchointerno)\n .attr(\"height\", altointerno)\n .attr(\"fill\", \"red\")\n\n g.append(\"circle\")\n .attr(\"cx\", anchointerno/2)\n .attr(\"cy\", altointerno/2)\n .attr(\"r\", 50)\n .attr(\"fill\", \"green\")\n \n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"viewof color = Inputs.color({label: \"Favorite color\", value: \"#4682b4\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"viewof ancho = Inputs.range([0, 1000], {label: \"Amount\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"viewof alto = Inputs.range([0, 1000], {label: \"Amount\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"{\n // ALGORITMO\n const ancho = 500;\n const alto = 450;\n const margenIzquierda = ancho * 0.1;\n const margenDerecha = ancho * 0.1;\n const margenSuperior = alto * 0.1;\n const margenInferior = alto * 0.1;\n const anchoMargen = ancho - margenIzquierda - margenDerecha;\n const altoMargen = alto - margenSuperior - margenInferior;\n\n const miLienzo = d3.create(\"svg\")\n .attr(\"width\", ancho)\n .attr(\"height\", alto)\n .style(\"background\", \"gray\")\n\n\n const miGrupo = miLienzo.append(\"g\")\n .attr(\"transform\",`translate(${margenIzquierda},${margenDerecha})`)\n\n const rectanguloMargen = miGrupo.append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", anchoMargen)\n .attr(\"height\", altoMargen)\n .attr(\"fill\", `hsl(${now}, 100%, 30%)`)\n\n ///\n\n ///\n\n ///\n\n\n return miLienzo.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", 500)\n .attr(\"height\", 500)\n\n return svg.node()\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"{\n const w = 500;\n const h = 450;\n const m = {l: w * 0.1, r: w * 0.1, t: h * 0.1, b: h * 0.1};\n m.w = w - m.l - m.r;\n m.h = h - m.t - m.b;\n\n const svg = d3.create(\"svg\")\n .attr(\"width\", m.w)\n .attr(\"height\", m.h)\n\n const g = svg.append(\"g\")\n .attr(\"transform\",`translate(${m.l},${m.t})`)\n\n let listaDePuntos = [\n [34, 54],\n [98, 54],\n [65,65], \n [129,87],\n [62,19]\n ]\n\n let generadorDeLinea = d3.line()(listaDePuntos)\n\n g.append(\"path\").attr(\"d\", generadorDeLinea).attr(\"fill\", \"red\")\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"{\n const w = 500;\n const h = 450;\n const m = {l: w * 0.1, r: w * 0.1, t: h * 0.1, b: h * 0.1};\n m.w = w - m.l - m.r;\n m.h = h - m.t - m.b;\n\n const svg = d3.create(\"svg\")\n .attr(\"width\", m.w)\n .attr(\"height\", m.h)\n\n const g = svg.append(\"g\")\n .attr(\"transform\",`translate(${m.l},${m.t})`)\n\n let paseo = [\n {lugar: \"tommy\", x: 2, y: 200, tipo:\"pizza\"},\n {lugar: \"rostro\", x: 45, y: 89, tipo:\"postre\"},\n {lugar: \"tom\", x: 300, y: 300, tipo:\"pizza\"}\n ]\n\n let generadorDeLinea = d3.line().x(d => d.x).y(d => d.y)(paseo)\n\n g.append(\"path\").attr(\"d\", generadorDeLinea).attr(\"fill\", \"red\")\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"{\n let miLista = [];\n const numeroIteraciones = 10;\n for(let i=0; i < 10; i++) {\n miLista[i] = i * 10;\n }\n return miLista\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"{\n let miLista = [\n \"felipe\",\n \"julian\",\n \"diego\",\n \"sergio\"\n ]\n\n for(let i = 0; i < miLista.length; i++) {\n miLista[i] = \"Hola \" + miLista[i] \n }\n\n return miLista\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"{\n\n const ancho = 500;\n const alto = 500;\n const svg = d3.create(\"svg\").attr(\"width\", ancho).attr(\"height\", alto)\n\n const circulos = 100;\n\n for (let i = 0; i < circulos; i++) {\n svg.append(\"circle\")\n .attr(\"cx\", Math.random() * ancho)\n .attr(\"cy\", Math.random() * alto)\n .attr(\"r\", 10)\n .attr(\"fill\", `hsl(${i},100%,50%)`)\n }\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"{\n const ancho = 500;\n const alto = 500;\n const svg = d3.create(\"svg\").attr(\"width\", ancho).attr(\"height\", alto) \n \n const numCirculos = 100;\n\n for (let i = 0; i < numCirculos; i++) {\n svg.append(\"circle\")\n .attr(\"cx\", Math.random() * ancho)\n .attr(\"cy\", Math.random() * alto)\n .attr(\"r\", 10)\n .attr(\"fill\", i % 2 === 0 ? \"red\" : \"blue\") \n }\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"poligono = {\n const ancho = 500;\n const alto = 500;\n const svg = d3.create(\"svg\").attr(\"width\", ancho).attr(\"height\", alto) \n const numLados = lados;\n const angulo = (2 * Math.PI) / numLados;\n const radio = 100;\n const misPuntos = [];\n const generadorPaths = d3.line();\n\n\n for (let i = 0; i < numLados; i++) {\n const anguloPunto = i * angulo;\n const x = (ancho /2) + Math.cos(anguloPunto) * radio;\n const y = (alto/2) + Math.sin(anguloPunto) * radio;\n misPuntos[i] = [x,y] \n }\n\n svg.append(\"path\")\n .attr(\"d\", generadorPaths(misPuntos))\n .attr(\"fill\", \"green\")\n \n \n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"viewof lados = Inputs.range([4, 20], {label: \"Amount\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"estrella = {\n const ancho = 500;\n const alto = 500;\n const miLienzo = d3.create(\"svg\").attr(\"width\", ancho).attr(\"height\", alto)\n\n const numeroLados = lados * 2;\n const angulo = (2 * Math.PI) / numeroLados;\n const radio = 100;\n const radioCorto = 50;\n const misPuntos = [];\n const generadorPaths = d3.line();\n\n for (let i = 0; i < numeroLados; i++) {\n const anguloPunto = i * angulo;\n const radioEstrella = i % 2 === 0 ? radioCorto : radio;\n const x = (ancho/2) + (Math.cos(anguloPunto) * radioEstrella);\n const y = (alto/2) + Math.sin(anguloPunto) * radioEstrella;\n misPuntos[i] = [x, y];\n\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","output":"$undefined","database":"$undefined"},{"id":487,"value":"estrellas = FileAttachment(\"Screenshot 2023-09-09 at 13-51-05 Wall Drawing 396 MASS MoCA.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"