2e:null 2f:["$","title",null,{"children":"1.4 TP-3: Introducción a Observable y D3 | Federico Poncio | Observable"}] 34:T467,{ // Creación de un área de dibujo (100x100 pixeles). // Si lo consideran necesario, pueden modificar el tamaño del canvas. // También es posible que necesiten más de una celda para resolverlo. const svg = d3.create("svg") .attr("width",256) .attr("height",256); var circleRadii = [120, 80, 40] var circles = svg.selectAll("circle") .data(circleRadii) .enter() .append("circle") var circleAttributes = circles .attr("cx", 128) .attr("cy", 128) .attr("r", function (d) { return d; }) .style("fill", function(d) { var returnColor; if (d === 120) { returnColor = "green"; } else if (d === 80) { returnColor = "purple"; } else if (d === 40) { returnColor = "red"; } return returnColor; }); // n. Retornamos el canvas. return svg.node(); }35:T583,function fork_button() { return html``}36:[] 32:{"id":"b57bca0eb4f7c76c","slug":"1-4-tp-3-introduccion-a-observable-y-d3","title":"1.4 TP-3: Introducción a Observable y D3","thumbnail":"97b76274fe5872372f927c57c464c6b78b28f0a808156cba6f05e426df35216e","access_level":"public","create_time":"$D2020-06-22T22:58:04.264Z","update_time":"$D2020-06-25T17:01:53.713Z","view_time":null,"first_public_time":"$D2020-06-25T17:02:06.391Z","has_unpublished_edits":null,"fork":{"id":"7b099e40d374b25d","slug":"1-4-tp-3-introduccion-a-observable-y-d3","title":"1.4 TP-3: Introducción a Observable y D3","owner":{"id":"d82594a3ec5e62c6","login":"emmanueliarussi","name":"Emmanuel Iarussi"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4a0ce0da380945ac","login":"federicoponcio","name":"Federico Poncio","avatar_url":"https://avatars-next.observableusercontent.com/8d27f22f9b3d80861b73d9bde9bbb0ebef99c1b4d0ab16822abb8f32d125a1e3","tier":"starter_2024"},"version":457,"publish_version":457,"role":null,"authored":false,"authors":[{"type":"individual","id":"278cf6c2b6cee181","login":"federicoponcio","name":"Federico Poncio","avatar_url":"https://avatars-next.observableusercontent.com/8d27f22f9b3d80861b73d9bde9bbb0ebef99c1b4d0ab16822abb8f32d125a1e3","tier":null}],"members":[{"type":"individual","id":"278cf6c2b6cee181","login":"federicoponcio","name":"Federico Poncio","avatar_url":"https://avatars-next.observableusercontent.com/8d27f22f9b3d80861b73d9bde9bbb0ebef99c1b4d0ab16822abb8f32d125a1e3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"1.4 TP-3: Introducción a Observable y D3","cells":[{"id":0,"value":"md`# 1.4 TP-3: Introducción a Observable y D3\n\nPor 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.\n\nLes 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":12,"value":"md`## Ejercicio a)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$34","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 var circulos = svg.selectAll(\"circle\")\n .data(coleccion_ciclos)\n .enter()\n .append(\"circle\");\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 rgbToHex(d.r, d.g, 0);})\n // n. Retornamos el canvas.\n return svg.node(); \n}\n\n//function(d) {rgbToHex(25,150, 0)}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"// creo colecicón de circulos \n\ncoleccion_ciclos = {\n var coleccion = []; // Arreglo de datos a retornr\n for(var ix = 256/34; ix < 256; ix = ix+256/17) {\n for(var iy=256/34; iy < 256; iy = iy+256/17) {\n var circle_elem = { \"eje_x\": ix, \"eje_y\": iy, \"radio\": 5,\n \"r\":Math.floor(ix), \"g\":Math.floor(iy)};\n coleccion.push(circle_elem);\n }}\n return coleccion;\n}\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"function componentToHex(input) {\n var hex = input.toString(16);\n return hex.length == 1 ? \"0\" + hex : hex;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"\nfunction rgbToHex(r, g, b) {\n return \"#\" + componentToHex(r) + componentToHex(g) + componentToHex(b);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"rgbToHex(1,1,1)","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 var circulosR = svg.selectAll(\"circle\")\n .data(coleccion_radios)\n .enter()\n .append(\"circle\");\n circulosR.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\",\"black\")\n // n. Retornamos el canvas.\n return svg.node(); \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"// creo colecicón de circulos \n\ncoleccion_radios = {\n var coleccion = []; // Arreglo de datos a retornr\n for(var ix = 256/34; ix < 256; ix = ix+256/17) {\n for(var iy=256/34; iy < 256; iy = iy+256/17) {\n var circle_elem = { \"eje_x\": ix, \"eje_y\": iy, \"radio\": radius2(ix,iy)};\n coleccion.push(circle_elem);\n }}\n return coleccion;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"function dist2(x,y) {\n return 1/(1+Math.sqrt((x-128)**2+(y-128)**2))*75;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"function radius2(x,y){\n var lar = dist2(x,y)\n var norm = dist2(128+256/17,128)\n return (x==128 & y==128) ? norm : lar;\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":386,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\",256)\n .attr(\"height\",256);\n \n var triangulos = svg.selectAll(\"polygon\")\n .data(coleccion_polygons)\n .enter()\n .append(\"polygon\");\n \n triangulos.attr(\"fill\", function(d) {return d.fill;} )\n .attr(\"stroke\", function(d) {return d.stroke;} )\n .attr(\"stroke-width\" , function(d) {return d.strokewidth;} )\n .attr(\"points\",function(d) {return d.points;});\n // n. Retornamos el canvas.\n return svg.node();\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"coleccion_polygons = {\n var coleccion = []; // Arreglo de datos a retornr\n for(var ix = 0; ix < 17; ix = ix+1) {\n for(var iy=0; iy < 16; iy = iy+1) {\n var poly_elem = {\"fill\":\"yellow\", \"stroke\": \"blue\",\"strokewidth\": \"1.2\" , \"points\": pase(ix,iy)};\n coleccion.push(poly_elem);\n }}\n for(var ix = 0; ix < 17; ix = ix+1) {\n for(var iy=0; iy < 16; iy = iy+1) {\n var poly_elem2 = { \"fill\":\"white\", \"stroke\": \"red\",\"strokewidth\": \"1.2\" , \"points\": pase2(ix,iy)};\n coleccion.push(poly_elem2);\n }}\n return coleccion;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"function pase(x,y){\n return String(-3+17*x) + \",\" +String(15+17*y)+\" \"+String(2+17*x)+\",\"+String(5+17*y)+ \" \"+String(7+17*x)+\",\"+String(15+17*y)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"function pase2(x,y){\n return String(10.5+17*x) + \",\" +String(15+17*y)+\" \"+String(5.5+17*x)+\",\"+String(5+17*y)+ \" \"+String(15.5+17*x)+\",\"+String(5+17*y)\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":"$35","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":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"