2b:null 2c:["$","title",null,{"children":"Actividad 1: Introducción a Observable y D3 | Emmanuel Iarussi | Observable"}] 31:T412,md`# Actividad 1: Introducción a Observable y D3 Por favor, para resolver los ejercicios del práctico utilizá este mismo notebook. Podés crearte una copia en tu propia cuenta de Observable haciendo click en ${fork_button()} (arriba a la derecha). Tus modificaciones a esa copia no afectarán el notebook original. Una vez terminado, no olviden apretar el botón ${publish_button()} (arriba a la derecha) para que el notebook sea público y podamos acceder para su corrección. Después de cada modificación que realicen al notebook deberán volver apretar el boton Publish si quieren que esa modificación se vuelva visible para cualquier otro usuario. El objetivo es recrear las siguientes imágenes utilizando el canvas y las primitivas de visualización en html. Para cumplir con la entrega, basta resolver alguno de los enunciados entre el b) y el e). El b), c), y e) valen "C", el d) vale "B". De todas maneras, recomendamos que intenten resolverlos a todos, sobre todo si no estan muy familiarizados con la programación visual.`32:T583,function fork_button() { return html``}33:[] 2f:{"id":"5d7c498efa4c58ee","slug":null,"title":"Actividad 1: Introducción a Observable y D3","thumbnail":"1e7d18d8da4b350a486315a59163a831c1f8852c5739278d4c05cba31438b3bb","access_level":"public","create_time":"$D2026-04-29T12:28:26.283Z","update_time":"$D2026-05-01T00:59:20.865Z","view_time":null,"first_public_time":"$D2026-04-29T12:28:26.283Z","has_unpublished_edits":null,"fork":{"id":"f41700d1654f79c2","slug":"1-4-tp-2-introduccion-a-observable-y-d3","title":"Actividad 1: Introducción a Observable y D3","owner":{"id":"d82594a3ec5e62c6","login":"emmanueliarussi","name":"Emmanuel Iarussi"}},"stars":1,"starred":false,"owner":{"type":"team","id":"d82594a3ec5e62c6","login":"emmanueliarussi","name":"Emmanuel Iarussi","avatar_url":"https://avatars-next.observableusercontent.com/0fd6fef97f520583a819cb0fa096c1632e930c7a0ff463dc6835a5bddbdfac3f","tier":"pro_2024"},"version":237,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"66ee3c2166ccf72d","login":"emmanueliarussi","name":"Emmanuel Iarussi","avatar_url":"https://avatars-next.observableusercontent.com/0fd6fef97f520583a819cb0fa096c1632e930c7a0ff463dc6835a5bddbdfac3f","tier":null}],"members":[{"type":"individual","id":"66ee3c2166ccf72d","login":"emmanueliarussi","name":"Emmanuel Iarussi","avatar_url":"https://avatars-next.observableusercontent.com/0fd6fef97f520583a819cb0fa096c1632e930c7a0ff463dc6835a5bddbdfac3f","tier":null,"role":"editor"},{"type":"team","id":"d82594a3ec5e62c6","login":"emmanueliarussi","name":"Emmanuel Iarussi","avatar_url":"https://avatars-next.observableusercontent.com/0fd6fef97f520583a819cb0fa096c1632e930c7a0ff463dc6835a5bddbdfac3f","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":51,"collection":{"id":"b31fb120ac7ca5d8","slug":"dataviz2026_mim","title":"DataViz2026_MiM ","owner":{"id":"d82594a3ec5e62c6","login":"emmanueliarussi","name":"Emmanuel Iarussi"}},"type":"notebook","body":{"title":"Actividad 1: Introducción a Observable y D3","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md`Les recordamos que es posible crear círculos y polígonos de la siguiente manera:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"grilla_circ_conc = {\n \n var coleccion = []; // Arreglo de datos a retornar\n var cantidad_de_circulos = 5;\n var rad = 100;\n var cx = 100;\n var cy = 100;\n var color_circulo = ['green','purple','red']\n\n for(var r = 1; r < cantidad_de_circulos+1; r = r+1) {\n var circle_elem = {eje_x: cx, eje_y: cy, radio: rad, color: color_circulo[(r-1)%3]};\n rad = rad - 0.25*rad;\n coleccion.push(circle_elem);\n }\n \n return coleccion;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`## Ejercicio a)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"{\n // 1. Creación de un área de dibujo (256x256 pixeles).\n // Si lo consideran necesario, pueden modificar el tamaño del canvas.\n // También es posible que necesiten más de una celda para resolverlo.\n const svg = d3.create(\"svg\").attr(\"width\",256).attr(\"height\",256);\n\n // 2. Asociamos la colección de círculos\n var circulos = svg.selectAll(\"circle\").data(grilla_circ_conc).enter().append(\"circle\");\n \n // 3.\n circulos.attr(\"cx\", function(d) {return d.eje_x;})\n .attr(\"cy\", function(d) {return d.eje_y;})\n .attr(\"r\", function(d) {return d.radio;})\n .style(\"fill\", function(d) {return d.color;} )\n \n // n. Retornamos el canvas.\n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`## Ejercicio b)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"{\n // 1. Creación de un área de dibujo (256x256 pixeles).\n // Si lo consideran necesario, pueden modificar el tamaño del canvas.\n // También es posible que necesiten más de una celda para resolverlo.\n const svg = d3.create(\"svg\")\n .attr(\"width\",256)\n .attr(\"height\",256);\n \n // Un cuadro de texto.\n svg.append(\"text\")\n .attr(\"x\", 50)\n .attr(\"y\", 128)\n .text(\"Área de dibujo vacía\");\n \n \n // n. Retornamos el canvas.\n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`## Ejercicio c)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"{\n // 1. Creación de un área de dibujo (256x256 pixeles).\n // Si lo consideran necesario, pueden modificar el tamaño del canvas.\n // También es posible que necesiten más de una celda para resolverlo.\n const svg = d3.create(\"svg\")\n .attr(\"width\",256)\n .attr(\"height\",256);\n \n // Un cuadro de texto.\n svg.append(\"text\")\n .attr(\"x\", 50)\n .attr(\"y\", 128)\n .text(\"Área de dibujo vacía\");\n \n \n // n. Retornamos el canvas.\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`## Ejercicio d)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"{\n // 1. Creación de un área de dibujo (256x256 pixeles).\n // Si lo consideran necesario, pueden modificar el tamaño del canvas.\n // También es posible que necesiten más de una celda para resolverlo.\n const svg = d3.create(\"svg\")\n .attr(\"width\",256)\n .attr(\"height\",256);\n \n // Un cuadro de texto.\n svg.append(\"text\")\n .attr(\"x\", 50)\n .attr(\"y\", 128)\n .text(\"Área de dibujo vacía\");\n \n \n // n. Retornamos el canvas.\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"md`## Ejercicio e)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"{\n // 1. Creación de un área de dibujo (256x256 pixeles).\n // Si lo consideran necesario, pueden modificar el tamaño del canvas.\n // También es posible que necesiten más de una celda para resolverlo.\n const svg = d3.create(\"svg\")\n .attr(\"width\",256)\n .attr(\"height\",256);\n \n // Un cuadro de texto.\n svg.append(\"text\")\n .attr(\"x\", 50)\n .attr(\"y\", 128)\n .text(\"Área de dibujo vacía\");\n \n \n // n. Retornamos el canvas.\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"// Función para generar hexágonos en x,y de radio r. \nfunction hexagon(x, y, r) {\n var x1 = x;\n var y1 = y - r;\n var x2 = x + Math.cos(Math.PI / 6) * r;\n var y2 = y - Math.sin(Math.PI / 6) * r;\n var x3 = x + Math.cos(Math.PI / 6) * r;\n var y3 = y + Math.sin(Math.PI / 6) * r;\n var x4 = x;\n var y4 = y + r;\n var x5 = x - Math.cos(Math.PI / 6) * r;\n var y5 = y + Math.sin(Math.PI / 6) * r;\n var x6 = x - Math.cos(Math.PI / 6) * r;\n var y6 = y - Math.sin(Math.PI / 6) * r;\n\n var path = x1 + ',' + y1 + \" \" + x2 + ',' + y2 + \" \" + x3 + ',' + y3 + \" \" + x4 + ',' + y4 + \" \" + x5 + ',' + y5 + \" \" + x6 + ',' + y6;\n return path;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`### Otras funciones auxiliares `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"function publish_button() { return html``}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"