2e:null 2f:["$","title",null,{"children":"Un fragmento de \"El jardín de las delicias\" de El Bosco | Sergio Rodríguez Gómez | Observable"}] 34:T502,35:T9ed,{ const w = 500; const h = 700; const m = {l: w * 0.1, r: w * 0.1, t: h * 0.1, b: h * 0.1} const mw = w - m.l - m.r; const mh = h - m.t - m.b; const xu = w / 15; const colSilla = "#fcd31c"; const svg = d3.create("svg").attr("width", w).attr("height", h).style("background", colSilla); const defs = svg.append("defs"); const gradient = defs.append("linearGradient").attr("id","gradient").attr("y1","0%").attr("y2","100%").attr("spreadMethod","pad"); gradient.append("stop").attr("offset", "0%").attr("stop-color","#960f26").attr("stop-opacity", 1); gradient.append("stop").attr("offset", "100%").attr("stop-color","#2e040b").attr("stop-opacity", 1); const g = svg.append("g").attr("transform",`translate(${m.l},${m.t})`); g.append("rect").attr("x",0).attr("y",0).attr("width",mw).attr("height",mh).attr("fill","url(#gradient)"); const axis = g.append("g").attr("transform",`translate(${xu*7+(Math.sin(now*0.001)*20)},${xu*3})`); // HUMANO axis.append("rect").attr("x",-xu*3).attr("y",-xu/2).attr("width",xu*3).attr("height",xu).attr("fill",colSilla); axis.append("g").attr("transform",`rotate(6)`) .append("rect").attr("x",-xu*5).attr("y",-xu/3.5).attr("width",xu*3).attr("height",xu/2).attr("fill",colSilla); axis.append("g").attr("transform",`rotate(-6)`) .append("rect").attr("x",-xu*5).attr("y",-xu/3.5).attr("width",xu*3).attr("height",xu/2).attr("fill",colSilla); // CUERPO axis.append("circle").attr("cx",0).attr("cy",xu*2.45).attr("r",xu*2).attr("fill","#4798fc"); axis.append("circle").attr("cx",0).attr("cy",xu*7).attr("r",xu*1.5).attr("fill","#4798fc"); // CABEZA axis.append("circle").attr("cx",0).attr("cy",0).attr("r",xu).attr("fill","#fff8bd"); // PICO const path = d3.path(); path.moveTo(0,-xu/2); [[-xu*2,-xu/2],[-xu,0,],[-xu*2,xu/1.8],[0,xu/1.8]].forEach(d => path.lineTo(...d)); path.closePath(); axis.append("path").attr("d", path).attr("fill","#fff8bd"); // OJO axis.append("circle").attr("cx",0).attr("cy",0).attr("r",xu/5).attr("fill","black"); // CALDERO axis.append("circle").attr("cx",xu).attr("cy",-xu).attr("r",xu).attr("fill","#ab9b93"); // SILLA axis.append("rect").attr("x",-xu*2).attr("y",xu*4).attr("width",xu*4).attr("height",xu*2).attr("fill",colSilla); axis.append("rect").attr("x",-xu*2).attr("y",xu*4).attr("width",xu/2).attr("height",xu*8).attr("fill",colSilla); axis.append("rect").attr("x",(xu*2)-xu/2).attr("y",xu*4).attr("width",xu/2).attr("height",xu*8).attr("fill",colSilla); return svg.node(); }36:T56e,visualizacionLenguas = { const ancho = 200; const alto = 900; const miLienzo = d3.create("svg").attr("width", ancho).attr("height", alto); const miGrupo = miLienzo.append("g"); const datosOrdenados = [...rollupLenguas].sort((a, b) => d3.descending(a[1], b[1])); const escalaX = d3.scaleLinear().domain([0, datosOrdenados.length]).range([0, alto]); miGrupo.selectAll("g") .data(datosOrdenados) .join("g") .attr('transform', (d, i) => `translate(${ancho/2},${(ancho * 0.1) + escalaX(i)})`) .each(function (d, i) { const g = d3.select(this); poligono(g, d[1]); }); miLienzo.selectAll("text") .data(datosOrdenados) .join("text") .attr("y", (d, i) => (ancho * 0.1) + escalaX(i)) .attr("x", ancho / 2) .attr("text-anchor", "middle") .text(d => d[0]) function poligono(g, numeroLados, d) { const angulo = (2 * Math.PI) / numeroLados; const radio = 20; const misPuntos = []; const generadorPaths = d3.line(); console.log(numeroLados, d); for (let i = 0; i < numeroLados; i++) { const anguloPunto = i * angulo; const x = Math.cos(anguloPunto) * radio; const y = Math.sin(anguloPunto) * radio; misPuntos[i] = [x, y]; } g.append("path") .attr("d", generadorPaths(misPuntos)) .attr("fill", "red") } return miLienzo.node() }37:[{"id":"76cbb4c2c7d2238e661102b650e9fcd30a63957950401d7b510e0d827f385bbe858ce961ba18254d3922a905347052bf0d2f43ee0525684547ae698719c45821","href":"https://static.observableusercontent.com/files/76cbb4c2c7d2238e661102b650e9fcd30a63957950401d7b510e0d827f385bbe858ce961ba18254d3922a905347052bf0d2f43ee0525684547ae698719c45821","name":"lenguasNativas.csv","type":"text/csv","lastModified":1695490371148.006,"size":53373}] 32:{"id":"bb511c06a4bfdad4","slug":"el-bosco","title":"Un fragmento de \"El jardín de las delicias\" de El Bosco","thumbnail":"eff090af0305b12b716ab57824a674316c123b7560bde1781653874c1bd5caf2","access_level":"public","create_time":"$D2023-08-12T16:36:47.200Z","update_time":"$D2024-07-09T15:45:31.927Z","view_time":null,"first_public_time":"$D2023-08-12T16:36:47.200Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"305bf5080ae4580a","login":"srsergiorodriguez","name":"Sergio Rodríguez Gómez","avatar_url":"https://avatars-next.observableusercontent.com/6326606b0640f2597b352da73f7c073f29b44d4060f66cc47c575dd937903b31","tier":"starter_2024"},"version":803,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7d80462b6b41d223","login":"srsergiorodriguez","name":"Sergio Rodríguez Gómez","avatar_url":"https://avatars-next.observableusercontent.com/6326606b0640f2597b352da73f7c073f29b44d4060f66cc47c575dd937903b31","tier":null}],"members":[{"type":"individual","id":"7d80462b6b41d223","login":"srsergiorodriguez","name":"Sergio Rodríguez Gómez","avatar_url":"https://avatars-next.observableusercontent.com/6326606b0640f2597b352da73f7c073f29b44d4060f66cc47c575dd937903b31","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Un fragmento de \"El jardín de las delicias\" de El Bosco","cells":[{"id":0,"value":"# Un fragmento de \"El jardín de las delicias\" de El Bosco\n## Por Sergio Rodríguez Gómez","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":231,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"miNombre = \"Sergio\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"edad = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"haceFrio = true","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"lista = [5, 7, 9, 10]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"apellidos = {\n // Algoritmo de JavaScript\n let apellido1; // Declarar una variable con el nombre apellido1 \n apellido1 = \"Rodríguez\"; // Asignar un valor a la variable apellido1\n let apellido2 = \"Gómez\";\n \n apellido1 = \"X\";\n\n return apellido1 + \" \" + apellido2\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"apellidos","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"miLienzo = {\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 const svg = d3.create(\"svg\")\n .attr(\"width\", ancho)\n .attr(\"height\", alto)\n .style(\"background\", colorDeMiLienzo)\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 return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"viewof colorDeMiLienzo = Inputs.color({label: \"Escoge un color\", value: \"#4682b4\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"{\n return htl.html`

${mutable x}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"mutable x = Math.floor(now * 0.001) - 1692474220;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"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 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 * 0.1},100%,50%)`)\n\n return miLienzo.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"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 return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"taqueria = (tipoDeCarne) => {\n let base = \"tortilla\";\n return base + \" \" + tipoDeCarne + \" \" + base\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"tacoDePollo = taqueria(\"pollo\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"tacoDeCerdo = taqueria(\"cerdo\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"{\n let miNumero = 10;\n\n let sumadorFuncional = (n) => {\n let numeroSumar = 40;\n return n + numeroSumar\n }\n\n miNumero = sumadorFuncional(miNumero)\n\n return miNumero\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"{\n\n let multiplicar = (a) => {\n\n let otraFuncion = (b) => {\n return a * b\n }\n\n return otraFuncion\n \n }\n\n let duplicar = multiplicar(2)\n let triplicar = multiplicar(3)\n\n\n return duplicar(1000)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"{\n\n let prepararBase = (base) => {\n return (carne) => {\n return base + \" \" + carne + \" \" + base\n }\n }\n\n let prepararTaco = prepararBase(\"tortilla\");\n let prepararSandwich = prepararBase(\"pan\");\n let prepararHamburguesa = prepararBase(\"pan hamburguesa\");\n\n return prepararHamburguesa(\"carne\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"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\n let generadorDeLinea = d3.line().curve(d3.curveCatmullRom.alpha(0.5)).x(d => d.x).y(d => d.y)\n \n let paseo = [\n {lugar: \"groso\", x: 100, y: 200, tipo: \"postre\"},\n {lugar: \"el guapo\", x: 200, y: 250, tipo: \"almuerzo\"},\n {lugar: \"ázimos\", x: 200, y: 150, tipo: \"postre\"}\n ]\n \n g.append(\"path\").attr(\"d\", generadorDeLinea(paseo)).attr(\"stroke\", \"red\").attr(\"fill\", \"none\")\n\n let paseo2 = [\n {lugar: \"groso\", x: 150, y: 300, tipo: \"postre\"},\n {lugar: \"el guapo\", x: 100, y: 150, tipo: \"almuerzo\"},\n {lugar: \"ázimos\", x: 30, y: 50, tipo: \"postre\"}\n ]\n g.append(\"path\").attr(\"d\", generadorDeLinea(paseo2)).attr(\"stroke\", \"blue\").attr(\"fill\", \"none\")\n \n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"{\n\n let miLista = [ \"Mikel\", \"Julián\", \"Diego\", \"Juan Felipe\", \"Sergio\", \"Vanesa\" ];\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":456,"value":"{\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 const color1 = \"blue\";\n const color2 = \"red\";\n \n for (let i = 0; i < numeroCirculos; i++) {\n\n let colorCirculo;\n if (i % 2 === 0) {\n colorCirculo = color1;\n } else {\n colorCirculo = color2;\n }\n \n miLienzo.append(\"circle\")\n .attr(\"cx\", Math.random() * ancho)\n .attr(\"cy\", Math.random() * alto)\n .attr(\"r\", 10)\n .attr(\"fill\", colorCirculo)\n \n }\n\n\n return miLienzo.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"{\n\n const iteraciones = 20;\n const mod = 4;\n let t = \"\"\n for (let i = 0; i < iteraciones; i++) {\n t += `${i} % ${mod} = ${i % mod}\\n`;\n }\n return t\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"Plot.plot({\n marks: [\n Plot.auto(null, {})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":501,"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 = lados;\n const angulo = (2 * Math.PI) / numeroLados;\n const radio = 100;\n const misPuntos = [];\n const generadorPaths = d3.line();\n \n for (let i = 0; i < numeroLados; 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 miLienzo.append(\"path\")\n .attr(\"d\", generadorPaths(misPuntos))\n .attr(\"fill\", \"red\")\n\n return miLienzo.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"viewof lados = Inputs.range([3, 20], {label: \"Lados de mi polígono\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"datos = [\n {nombre: \"Danilo\", edad: 31, gafas: false},\n {nombre: \"Diego\", edad: 28, gafas: true},\n {nombre: \"Julián\", edad: 39, gafas: true},\n {nombre: \"Vanesa\", edad: 32, gafas: true},\n {nombre: \"Mikel\", edad: 34, gafas: true},\n {nombre: \"Sergio\", edad: 33, gafas: true}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"viewof ordenador = Inputs.select([\"edad\", \"nombre\", \"gafas\"], {label:\"ORDEN\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"viewof rangoDeEdad = Inputs.range([0, 100], {label: \"Edad\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"visualizacion = {\n const ancho = 500;\n const alto = 300;\n const miLienzo = d3.create(\"svg\").attr(\"width\", ancho).attr(\"height\", alto);\n\n const miGrupo = miLienzo.append(\"g\");\n\n const datosOrdenados = [...datos].sort((a, b) => d3.descending(a[ordenador], b[ordenador]));\n const datosFiltrados = datosOrdenados.filter(d => d.edad < rangoDeEdad);\n\n miGrupo.selectAll(\"circle\")\n .data(datosFiltrados)\n .join(\"circle\")\n .attr(\"cx\", (d, i) => 50 + i * 80)\n .attr(\"cy\", alto / 2)\n .attr(\"r\", d => d.edad)\n .attr(\"fill\", d => d.gafas ? \"cyan\" : \"yellow\")\n\n miLienzo.selectAll(\"text\")\n .data(datosFiltrados)\n .join(\"text\")\n .attr(\"x\", (d, i) => 50 + i * 80)\n .attr(\"y\", alto / 2)\n .attr(\"text-anchor\", \"middle\")\n .text(d => d.nombre)\n\n return miLienzo.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"lenguasNativas = FileAttachment(\"lenguasNativas.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"extentLenguas = d3.extent(lenguasNativas, d => d.n_mero_de_hablantes)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"rollupLenguas = [...d3.rollup(lenguasNativas, v => Math.floor(Math.log(d3.sum(v, d => d.n_mero_de_hablantes))), d => d.familia_ling_stica)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"datossep30 = [\n {nombre: \"Mikel\", ganancias: 100000000},\n {nombre: \"Vanesa\", ganancias: 200000000},\n {nombre: \"Sergio\", ganancias: 10000},\n {nombre: \"Mikel2\", ganancias: 100000000},\n {nombre: \"Vanesa2\", ganancias: 200000000},\n {nombre: \"Sergio2\", ganancias: 10000000},\n {nombre: \"Mikel2\", ganancias: 100000000},\n {nombre: \"Vanesa2\", ganancias: 200000000},\n {nombre: \"Sergio2\", ganancias: 10000}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"viewof anchoLienzo = Inputs.range([10, 800], {label: \"Ancho de lienzo\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"{\n const ancho = anchoLienzo;\n const alto = 200;\n\n const miLienzo = d3.create(\"svg\").attr(\"width\", ancho).attr(\"height\", alto).style(\"border\", \"solid 1px black\")\n\n const listaNombres = datossep30.map(d => d.nombre);\n \n const miEscalaDeColor = d3.scaleOrdinal()\n .domain(listaNombres)\n .range(d3.schemeCategory10);\n \n const miEscalaY = d3.scaleBand()\n .domain(listaNombres)\n .range([0, alto])\n .paddingOuter(0.1)\n .paddingInner(0.1)\n\n const gananciasMaximas = d3.max(datossep30, d => d.ganancias);\n \n const miEscalaAncho = d3.scaleLinear()\n .domain([1, gananciasMaximas])\n .range([1, ancho]);\n\n const grupo = miLienzo.append(\"g\");\n\n grupo.selectAll(\"rect\")\n .data(datossep30)\n .join(\"rect\")\n .attr(\"x\", 10)\n .attr(\"y\", d => miEscalaY(d.nombre))\n .attr(\"width\", d => miEscalaAncho(d.ganancias))\n .attr(\"height\", miEscalaY.bandwidth())\n .attr(\"fill\", d => miEscalaDeColor(d.nombre))\n\n return miLienzo.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":697,"value":"listaTest = [\n { nombre: \"ABC\", valor: 987 },\n { nombre: \"CAS\", valor: 4537 },\n { nombre: \"SDF\", valor: 2347 },\n { nombre: \"DFG\", valor: 9324 },\n { nombre: \"ABC\", valor: 987 },\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"listaNombres = [...new Set(listaTest.map(d => d.nombre))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"listaVitalidades = [...new Set(lenguasNativas.map(d => d.vitalidad))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"rollupvitalidades = d3.rollups(lenguasNativas, v => v.length, d => d.familia_ling_stica)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"rollupvitalidades.get(\"TUKANO\").get(\"En peligro\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"{\n const ancho = anchoLienzo;\n const alto = 200;\n\n const miLienzo = d3.create(\"svg\").attr(\"width\", ancho).attr(\"height\", alto).style(\"border\", \"solid 1px black\")\n\n const listaDeFamilias = rollupvitalidades.map(d => d[0])\n const miEscalaY = d3.scaleBand()\n .domain(listaDeFamilias)\n .range([0, alto])\n .paddingOuter(0.1)\n .paddingInner(0.1)\n\n const gananciasMaximas = d3.max(rollupvitalidades, d => d[1]);\n \n const miEscalaAncho = d3.scaleLinear()\n .domain([1, gananciasMaximas])\n .range([1, ancho]);\n\n const grupo = miLienzo.append(\"g\");\n\n grupo.selectAll(\"rect\")\n .data(rollupvitalidades)\n .join(\"rect\")\n .attr(\"x\", 10)\n .attr(\"y\", d => miEscalaY(d[0]))\n .attr(\"width\", d => miEscalaAncho(d[1]))\n .attr(\"height\", miEscalaY.bandwidth())\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":739,"value":"Plot.plot({\n marginLeft: 300,\n marks: [\n Plot.barX(rollupvitalidades, {x: d => d[1], y: d => d[0], sort: {y: \"x\", reverse: true}}),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"{\n const ancho = 500;\n const alto = 200;\n\n const miLienzo = d3.create(\"svg\").attr(\"width\", ancho).attr(\"height\", alto).style(\"border\", \"solid 1px black\")\n\n const listaTest = [\n { nombre: \"ABC\", valor: 987, vital: true },\n { nombre: \"CAS\", valor: 4537, vital: false },\n { nombre: \"SDF\", valor: 2347, vital: true },\n { nombre: \"DFG\", valor: 9324, vital: false },\n { nombre: \"ABC\", valor: 987, vital: false }\n ]\n\n const listaVitales = listaTest.filter(d => d.vital === true);\n const listaNoVitales = listaTest.filter(d => d.vital === false);\n\n dibujarCirculos(listaVitales, \"blue\", alto * 0.25);\n\n dibujarCirculos(listaNoVitales, \"red\", alto * 0.75)\n\n function dibujarCirculos(datos, color, posY) {\n const grupoProvisional = miLienzo.append(\"g\");\n grupoProvisional.selectAll(\"circle\")\n .data(datos)\n .join(\"circle\")\n .attr(\"cx\", (d, i) => 100 + i * 40)\n .attr(\"cy\", posY)\n .attr(\"r\", 20)\n .attr(\"fill\", color)\n }\n \n return miLienzo.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"{\n const ancho = 500;\n const alto = 200;\n\n const miLienzo = d3.create(\"svg\").attr(\"width\", ancho).attr(\"height\", alto).style(\"border\", \"solid 1px black\")\n\n const listaTest = [\n { nombre: \"ABC\", valor: 987, vital: true },\n { nombre: \"CAS\", valor: 4537, vital: false },\n { nombre: \"SDF\", valor: 2347, vital: true },\n { nombre: \"DFG\", valor: 9324, vital: false },\n { nombre: \"ABC\", valor: 987, vital: false }\n ]\n\n const grupoCirculos = miLienzo.append(\"g\");\n\n grupoCirculos.selectAll(\"circle\")\n .data(listaTest)\n .join(\"circle\")\n .attr(\"cx\", (d,i) => 100 + i * 40)\n .attr(\"cy\", alto/2)\n .attr(\"r\", 20)\n .attr(\"class\", d => d.tipo)\n \n return miLienzo.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"{\n const ancho = 500;\n const alto = 200;\n\n const miLienzo = d3.create(\"svg\").attr(\"width\", ancho).attr(\"height\", alto).style(\"border\", \"solid 1px black\")\n\n const vitales = 10;\n const noVitales = 5;\n const otros = 3;\n\n const posiciones = [];\n anadirAPosiciones(vitales, \"vital\");\n anadirAPosiciones(noVitales, \"novital\");\n anadirAPosiciones(otros, \"otro\")\n\n function anadirAPosiciones(cuantos, tipo) {\n for (let i = 0; i < cuantos; i++) {\n posiciones.push({\n x: Math.random() * ancho,\n y: Math.random() * alto,\n tipo: tipo\n })\n }\n }\n\n const grupoCirculos = miLienzo.append(\"g\");\n\n grupoCirculos.selectAll(\"circle\")\n .data(posiciones)\n .join(\"circle\")\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .attr(\"r\", 20)\n .attr(\"class\", d => d.tipo)\n \n return miLienzo.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"mutable consola = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"{\n\n const nombres = [\"Danilo\", \"Julián\", \"Mikel\", \"Sergio\"];\n\n const ancho = 500;\n const alto = 500;\n\n const x = d3.scaleLinear().domain([0, nombres.length]).range([30, ancho - 30]);\n\n const miLienzo = d3.create(\"svg\").attr(\"width\", ancho).attr(\"height\", alto);\n\n miLienzo.selectAll(\"circle\")\n .data(nombres)\n .join(\"circle\")\n .attr(\"cx\", (d, i) => x(i))\n .attr(\"cy\", alto/2)\n .attr(\"fill\", \"green\")\n .attr(\"r\", 30)\n\n return miLienzo.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"