3d:null 3e:["$","title",null,{"children":"HOLAA | UTEC | Observable"}] 44:T404,{ const svg = d3.create("svg") .attr("width", 500) .attr("height", 200) svg.append('circle') .attr('cx',200) .attr('cy',200) .attr('r',200) .attr("fill", "red") svg.append('circle') .attr('cx',200) .attr('cy',200) .attr('r',180) .attr("fill", "orange") svg.append('circle') .attr('cx',200) .attr('cy',200) .attr('r',160) .attr("fill", "yellow") svg.append('circle') .attr('cx',200) .attr('cy',200) .attr('r',140) .attr("fill", "limegreen") svg.append('circle') .attr('cx',200) .attr('cy',200) .attr('r',120) .attr("fill", "turquoise") svg.append('circle') .attr('cx',200) .attr('cy',200) .attr('r',100) .attr("fill", "blue") svg.append('circle') .attr('cx',200) .attr('cy',200) .attr('r',80) .attr("fill", "purple") svg.append('circle') .attr('cx',200) .attr('cy',200) .attr('r',60) .attr("fill", "white") return svg.node(); }45:[] 42:{"id":"442b707e247b8e62","slug":"holaa","title":"HOLAA","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-08-12T14:09:45.508Z","update_time":"$D2026-08-31T10:40:08.501Z","view_time":null,"first_public_time":"$D2026-09-29T04:36:59.985Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"855d29f2d4dab8d4","login":"utec11","name":"UTEC","avatar_url":"https://avatars-next.observableusercontent.com/8a34dc7dca59c4b9533ca85ffbf62de8ab20bcde5da3d2d1c46a30cb0ce631d7","tier":"starter_2024","bio":""},"version":574,"publish_version":574,"role":null,"authored":false,"authors":[{"type":"individual","id":"6e56d699a798ba7b","login":"jimena-adela-gurbillon-santa-cruz","name":"Jimena Adela Gurbillon Santa Cruz","avatar_url":"https://avatars-next.observableusercontent.com/a8a2bbf57fe274afbf8a1454f247cd1700f93ffdf24f85e25424e8c56ed4a989","tier":null,"bio":""}],"members":[{"type":"individual","id":"6e56d699a798ba7b","login":"jimena-adela-gurbillon-santa-cruz","name":"Jimena Adela Gurbillon Santa Cruz","avatar_url":"https://avatars-next.observableusercontent.com/a8a2bbf57fe274afbf8a1454f247cd1700f93ffdf24f85e25424e8c56ed4a989","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"HOLAA","cells":[{"id":0,"value":"# HOLAA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"num=8;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"num*4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"viewof range","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":92,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"{const miespacio=d3.create(\"svg\").attr(\"width\",100).attr(\"height\",100)\n miespacio.append(\"circle\").attr(\"cx\",50).attr(\"cy\",50).attr(\"r\",30).attr(\"fill\",'orange')\n return miespacio.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"# D3 circulos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"{\n const lienzo = d3.create(\"svg\")\n .attr(\"width\", 500)\n .attr(\"height\", 200)\n \n lienzo.append('circle')\n .attr(\"cx\", 50)\n .attr(\"cy\", 50)\n .attr(\"stroke\",'green')\n .attr(\"stroke-width\",15)\n .attr(\"r\", 25)\n .attr(\"fill\", \"#80b1d3\")\n .attr(\"fill-opacity\",0.9)\n \n lienzo.append('circle')\n .attr(\"cx\", 100)\n .attr(\"cy\", 100)\n .attr(\"stroke\",'purple')\n .attr(\"stroke-width\",3)\n .attr(\"stroke-opacity\",0.5)\n .attr(\"r\", 25)\n .attr(\"fill\", \"#8dd3c7\")\n .attr(\"fill-opacity\",0.3)\n return lienzo.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", 500)\n .attr(\"height\", 200)\n \n const g=svg.append('g')\n .attr(\"transform\", 'translate(100,-25')\n .attr(\"fill\",'green')\n g.append('circle')\n .attr(\"cx\", 50)\n .attr(\"cy\", 50)\n .attr(\"stroke\",'green')\n .attr(\"stroke-width\",15)\n .attr(\"r\", 25)\n .attr(\"fill\", \"#80b1d3\")\n .attr(\"fill-opacity\",0.9)\n \n g.append('circle')\n .attr(\"cx\", 100)\n .attr(\"cy\", 100)\n .attr(\"stroke\",'purple')\n .attr(\"stroke-width\",3)\n .attr(\"stroke-opacity\",0.5)\n .attr(\"r\", 25)\n .attr(\"fill\", \"#8dd3c7\")\n .attr(\"fill-opacity\",0.3)\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", 500)\n .attr(\"height\", 200)\n \n \n \n svg.append('rect')\n .attr('x', 10)\n .attr('y', 10)\n .attr('width', 300)\n .attr('height', 20)\n .attr('fill', 'green')\n \n svg.append('rect')\n .attr('x', 10)\n .attr('y', 40)\n .attr('width', 200)\n .attr('height', 20)\n .attr('fill', 'blue')\n\n \n svg.append('rect')\n .attr('x', 10)\n .attr('y', 70)\n .attr('width', 100)\n .attr('height', 20)\n .attr('fill', 'red')\n return svg.node();\n}\n\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", 500)\n .attr(\"height\", 200)\n const g=svg.append(\"g\")\n g.attr('x',10)\n \n g.attr(\"transform\", 'rotate(90, 90,20)')\n \n g.append('rect')\n\n .attr('y', 10)\n .attr('width', 300)\n .attr('height', 20)\n .attr('fill', 'green')\n \n g.append('rect')\n .attr('y', 40)\n .attr('width', 200)\n .attr('height', 20)\n .attr('fill', 'blue')\n\n \n g.append('rect')\n .attr('y', 70)\n .attr('width', 100)\n .attr('height', 20)\n .attr('fill', 'red')\n return svg.node();\n}\n\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"{ const svg = d3.create(\"svg\")\n .attr(\"width\", 500)\n .attr(\"height\", 200)\n \n const g=svg.append('g')\n g.append('circle')\n .attr('cx',100)\n .attr('cy',100)\n .attr('r',55)\n .attr(\"fill\", \"#80b1d3\")\n\n g.append('text')\n .attr(\"x\", 65)\n .attr(\"y\", 110)\n .attr('fill','white')\n .text(\"LoL\")\n .style(\"font-size\", \"40px\") \n \n\n return svg.node();\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"circleInfo = [\n {\n x: 25,\n y: 50,\n radius: 5,\n color: \"red\"\n },\n {\n x: 75,\n y: 50,\n radius: 10,\n color: \"green\"\n },\n {\n x: 125,\n y: 50,\n radius: 15,\n color: \"blue\"\n },\n {\n x: 175,\n y: 50,\n radius: 20,\n color: \"purple\"\n },\n {\n x: 225,\n y: 50,\n radius: 25,\n color: \"yellow\"\n }\n]\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"{ const svg = d3.create(\"svg\")\n .attr(\"width\", 500)\n .attr(\"height\", 200)\n\n svg.selectAll(\"circle\")\n .data(circleInfo)\n .join(\"circle\")\n .attr(\"cx\",function (d) {return d.x +10})\n .attr(\"cy\", d=>d.y)\n .attr(\"r\", d=>d.radius)\n .attr(\"fill\",d=>d.color)\n\n \n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"$44","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"rectInfo = [\n { xPos: 10, yPos: 10, width: 300, height: 20, color: 'purple' },\n { xPos: 10, yPos: 40, width: 250, height: 20, color: 'brown' },\n { xPos: 10, yPos: 70, width: 200, height: 20, color: 'orange' },\n]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"{ const svg = d3.create(\"svg\")\n .attr(\"width\", 500)\n .attr(\"height\", 200)\n\n svg.selectAll(\"rect\")\n .data(rectInfo)\n .join(\"rect\")\n .attr(\"x\",function (d) {return d.xPos})\n .attr(\"y\", d=>d.yPos)\n .attr(\"width\", d=>d.width)\n .attr(\"height\",d=>d.height)\n .attr(\"fill\",d=>d.color)\n\n \n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"# Nested Joins","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":307,"value":"circleGrid = [\n {\n y: 50,\n color: 'purple',\n label: 'Row A',\n circles: [\n { x: 25, radius: 5, lol:0},\n { x: 75, radius: 10, lol:1},\n { x: 125, radius: 15,lol:2 },\n { x: 175, radius: 20, lol:3},\n { x: 225, radius: 25, lol:4}\n ]\n },\n {\n y: 150,\n color: 'brown',\n label: 'Row B',\n circles: [\n { x: 25, radius: 25,lol:4},\n { x: 75, radius: 20,lol:3},\n { x: 125, radius: 15,lol:2},\n { x: 175, radius: 10,lol:1},\n { x: 225, radius: 5,lol:0 }\n ]\n },\n {\n y: 250,\n color: 'orange',\n label: 'Row C',\n circles: [\n { x: 25, radius: 20,lol:3},\n { x: 75, radius: 10,lol:1},\n { x: 125, radius: 5,lol:0},\n { x: 175, radius: 10,lol:1},\n { x: 225, radius: 20,lol:3}\n ]\n }\n]","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"{\n //Crear SVG\n const grafico = d3.create('svg')\n .attr('width', 500)\n .attr('height', 300);\n \n // Crear un grupo para cada círculo\n const rows = grafico.selectAll('g')\n .data(circleGrid)\n .join('g')\n //Colocamos la posición en y\n .attr('transform', row => `translate(0,${row.y})`)\n .attr('fill', row => row.color);\n \n // Adicionamos el label\n rows.append('text')\n .attr('font-family', 'sans-serif')\n .attr('y', -30)\n .text(d => d.label)\n \n // Se adiciona otro data join para dibujar cada uno de los círculos\n rows.selectAll('circle')\n // row.circles contiene los círculos de cada fila\n .data(row => row.circles)\n .join('circle')\n .attr('cx', circ => circ.x)\n .attr('r', circ => circ.radius);\n \n return grafico.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"## Ejercicio 3 - Rectángulos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":311,"value":"rectGrid = [\n {\n y: 50,\n color: 'purple',\n rects: [\n { x: 25, width: 10, height: 30 },\n { x: 75, width: 30, height: 10 },\n { x: 125, width: 20, height: 20 },\n { x: 175, width: 30, height: 10 },\n { x: 225, width: 10, height: 30 }\n ]\n },\n {\n y: 150,\n color: 'brown',\n rects: [\n { x: 25, width: 5, height: 5 },\n { x: 75, width: 10, height: 10 },\n { x: 125, width: 15, height: 15 },\n { x: 175, width: 20, height: 20 },\n { x: 225, width: 25, height: 25 }\n ]\n },\n {\n y: 250,\n color: 'orange',\n rects: [\n { x: 25, width: 10, height: 10 },\n { x: 75, width: 10, height: 15 },\n { x: 125, width: 10, height: 20 },\n { x: 175, width: 10, height: 25 },\n { x: 225, width: 10, height: 30 }\n ]\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"{\n //Crear SVG\n const grafico = d3.create('svg')\n .attr('width', 500)\n .attr('height', 300);\n \n // Crear un grupo para cada círculo\n const rows = grafico.selectAll('g')\n .data(rectGrid)\n .join('g')\n //Colocamos la posición en y\n .attr('transform', row => `translate(0,${row.y})`)\n .attr('fill', row => row.color);\n \n // Adicionamos el label\n rows.append('text')\n .attr('font-family', 'sans-serif')\n .attr('y', -30)\n .text(d => d.label)\n \n // Se adiciona otro data join para dibujar cada uno de los círculos\n rows.selectAll('rect')\n // row.circles contiene los círculos de cada fila\n .data(row => row.rects)\n .join('rect')\n .attr('x', rect => rect.x)\n .attr('width', rect => rect.width)\n .attr('height', rect => rect.height);\n return grafico.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"# ESCALAS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":321,"value":"## Linear Scale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":323,"value":"linearScale = d3.scaleLinear()\n .domain([15, 40])\n .range([10, 1000])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"linearScale(35)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"scores = [\n {name: 'Brian', score: 90},\n {name: 'Taylor', score: 80},\n {name: 'Kelly', score: 70},\n {name: 'Jane', score: 45},\n {name: 'Joe', score: 30},\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"width = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"maxScore = d3.max(scores, d => d.score)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"maxScoreotro = d3.extent(scores, d => d.score)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"x = d3.scaleLinear()\n .domain([0, maxScore])\n .range([0, width])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"y = d3.scaleLinear()\n .domain([0, maxScore])\n .range([0, height])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"x(30)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"x(45)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"# Escala de banda","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":444,"value":"Nominal a lineal","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":446,"value":"names=scores.map(d=>d.name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"height=100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"yscale=d3.scaleBand()\n .domain(names) \n .range([0,height])\n .padding(0.2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"yscale('Brian')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"yscale('Kelly')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"{\n // creamos nuestro elemento SVG externo con un tamaño de 500x100\n const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 100);\n \n \n const alumnos = svg.selectAll('rect')\n .data(scores)\n .join('rect')\n // establecemos los atributos para los rectángulos\n .attr('fill', 'orange')\n .attr('x', 0)\n .attr('y', d => yscale(d.name)) // EDITAR aquí\n .attr('width', d=>x(d.score)) // EDITAR aquí\n .attr('height', d =>yscale.bandwidth() ); // EDITAR aquí\n \n // devolvemos el elemento SVG externo para que se pueda renderizar\n return svg.node();\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"{\n // creamos nuestro elemento SVG externo con un tamaño de 500x100\n const svg = d3.create('svg')\n .attr('width', 100)\n .attr('height', 300);\n \n \n const alumnos = svg.selectAll('rect')\n .data(scores)\n .join('rect')\n // establecemos los atributos para los rectángulos\n .attr('fill', 'orange')\n .attr('x',d => yscale(d.name) )\n .attr('y',d =>300-x(d.score)) // EDITAR aquí\n .attr('width', d=>yscale.bandwidth() ) // EDITAR aquí\n .attr('height', d =>x(d.score)); // EDITAR aquí\n \n // devolvemos el elemento SVG externo para que se pueda renderizar\n return svg.node();\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"xscale=d3.scaleBand()\n .domain(names) \n .range([0,height])\n .padding(0.2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"paint = d3.scaleLinear().range([\"yellow\", \"red\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"paint(0.5) // this must be orange","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"{const svg=d3.create('svg')\n .attr('width',100)\n .attr('height',100)\n svg.append('circle')\n .attr('cx',10)\n .attr('r',10)\n .attr('cy',10)\n .attr('fill',paint(0.5))\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"color=[0,0.25,0.5,0.75,1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"{\n //Crear SVG\n const grafico = d3.create('svg')\n .attr('width', 500)\n .attr('height', 300);\n \n // Crear un grupo para cada círculo\n const rows = grafico.selectAll('g')\n .data(circleGrid)\n .join('g')\n //Colocamos la posición en y\n .attr('transform', row => `translate(0,${row.y})`)\n \n \n // Adicionamos el label\n rows.append('text')\n .attr('font-family', 'sans-serif')\n .attr('y', -30)\n .text(d => d.label)\n \n // Se adiciona otro data join para dibujar cada uno de los círculos\n rows.selectAll('circle')\n // row.circles contiene los círculos de cada fila\n .data(row => row.circles)\n .join('circle')\n .attr('cx', circ => circ.x)\n .attr('r', circ => circ.radius)\n .attr('fill', circ => paint(color[circ.lol]));\n \n return grafico.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"# Guia 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":555,"value":"segments = [ //1\n { x1: 5, y1: 5, x2: 5, y2: 95 },\n { x1: 45, y1: 5, x2: 45, y2: 95 },\n { x1: 5, y1: 95, x2: 45, y2: 95 },\n { x1: 60, y1: 5, x2: 100, y2: 5 },\n { x1: 80, y1: 5, x2: 80, y2: 95 },\n { x1: 115, y1: 5, x2: 115, y2: 95 },\n { x1: 115, y1: 5, x2: 145, y2: 5 },\n { x1: 115, y1: 50, x2: 140, y2: 50 },\n { x1: 115, y1: 95, x2: 145, y2: 95 },\n { x1: 160, y1: 5, x2: 190, y2: 5 },\n { x1: 160, y1: 5, x2: 160, y2: 95 },\n { x1: 160, y1: 95, x2: 190, y2: 95 },\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"{ const svg = d3.create(\"svg\")\n .attr(\"width\", 200)\n .attr(\"height\", 100)\n\n svg.selectAll('line')\n .data(segments)\n .join(\"line\")\n .attr(\"x1\",function (d) {return d.x1})\n .attr(\"y1\", d=>d.y1)\n .attr(\"x2\",function (d) {return d.x2})\n .attr(\"y2\", d=>d.y2)\n .attr('stroke','blue')\n .attr('stroke-width',3)\n \n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"iris = require('@observablehq/iris')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"widthIris = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"heightIris = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"sepalLenght vs sepalwidth","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":571,"value":"sepalWidthMin = d3.min(iris, d => d.sepalWidth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 43:"$42:body"