2e:null 2f:["$","title",null,{"children":"Mi bitácora de datos | Sergio Rodríguez Gómez | Observable"}] 34:T67c,Caratest = { let ancho = 450 let alto = 450 let mitadAncho = ancho / 2 let mitadAlto = alto / 2 let separacionOjos = 50 let alturaOjos = 90 // El contenedor dentro del que se dibuará todo: let svg = d3.create("svg") .attr("width", ancho) .attr("height", alto) // Un grupo de formas: let grupo = svg.append("g") .attr("transform", `translate(${mitadAncho}, ${mitadAlto})`) // Voy a dibujar la cara: grupo.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", objeto.estatura) .style("fill", objeto.colorPiel) .style("stroke", "blue") .style("stroke-width", 10) // Ojo derecho grupo.append("circle") .attr("cx", separacionOjos) .attr("cy", -alturaOjos) .attr("r", objeto.felicidad * 3) .style("fill", "white") // Ojo izquierdo grupo.append("circle") .attr("cx", -separacionOjos) .attr("cy", -alturaOjos) .attr("r", objeto.felicidad * 3) .style("fill", "white") grupo.append("rect") .attr("x", -separacionOjos) .attr("y", 0) .attr("width", separacionOjos * 2) .attr("height", objeto.edad) .style("fill", "white") .style("stroke", "black") let grupoCejaIzq = grupo.append("g") .attr("transform", `translate(${-separacionOjos - 20}, ${-140})`) let cejaIzq = grupoCejaIzq.append("rect") .attr("transform", `rotate(${objeto.felicidad})`) .attr("x", 0) .attr("y", 0) .attr("width", 100) .attr("height", 20) .style("fill", "black") return svg.node() }35:T41e,{ let ancho = 500 let alto = 100 let escalaX = d3.scaleLinear() .domain([0, 200]) .range([0, ancho]) let ejeX = d3.axisBottom().scale(escalaX) let svg = d3.create("svg") .attr("width", ancho) .attr("height", alto) svg.selectAll("rect") .data(estaturas) .join("rect") .attr("x", 0) // todos empiezan a la izquierda .attr("y", (d, i) => i * (alto / estaturas.length)) // dibuje cada barra un poco más abajo .attr("width", (d, i) => escalaX(d.Estatura)) // el ancho de cada barra depende de la estatura .attr("height", (d, i) => alto / estaturas.length) // todas las barras ocupan el mismo alto .style("fill", "black") .style("stroke", "white") svg.selectAll("text") .data(estaturas) .join("text") .text((d, i) => d.Nombre) .attr("x", 0) .attr("y", (d, i) => 13 + i * (alto / estaturas.length)) .style("fill", "red") svg.append("g").call(ejeX) return svg.node() }36:T4dc,Barrastest = { let gw = 500 let gh = 200 let mw = gw * 0.05 let mh = gh * 0.1 let w = gw - (mw * 2) let h = gh - (mh * 2) let escalaX = d3.scaleLinear() .domain([0, 200]) .range([0, w]) let ejeX = d3.axisBottom().scale(escalaX) let svg = d3.create("svg") .attr("width", gw) .attr("height", gh) svg.append("g").attr('transform', `translate(${mw},${mh})`) .selectAll("rect") .data(estaturas) .join("rect") .attr("x", 0) // todos empiezan a la izquierda .attr("y", (d, i) => i * (h / estaturas.length)) // dibuje cada barra un poco más abajo .attr("width", (d, i) => escalaX(d.Estatura)) // el ancho de cada barra depende de la estatura .attr("height", (d, i) => h / estaturas.length) // todas las barras ocupan el mismo alto .style("fill", "black") .style("stroke", "white") svg.selectAll("text") .data(estaturas) .join("text") .text((d, i) => d.Nombre) .attr("x", 40) .attr("y", (d, i) => 40 + i * (h / estaturas.length)) .style("fill", "red") svg.append("g").attr('transform', `translate(${mw},${mh + h})`).call(ejeX) return svg.node() }37:[{"id":"26ae8d0c19a633cbdfedd606ab0fb9098014e36f3c98d39524e826c2c90bd6308c4293b30c93dca80a957382d4a47efdc5df2dcee1715812bc99bf132b7e2bbb","href":"https://static.observableusercontent.com/files/26ae8d0c19a633cbdfedd606ab0fb9098014e36f3c98d39524e826c2c90bd6308c4293b30c93dca80a957382d4a47efdc5df2dcee1715812bc99bf132b7e2bbb","name":"kiboharu.jpeg","type":"image/jpeg","lastModified":1675864838279.755,"size":176803},{"id":"010770593265e8119b1a5606c401472426deeb36c3a9e09e5bc01a3c089a1c6ad1ecee08efb0c15c8223ececf315160cc55cb2a764062069f2b6a5a8f9e0d95c","href":"https://static.observableusercontent.com/files/010770593265e8119b1a5606c401472426deeb36c3a9e09e5bc01a3c089a1c6ad1ecee08efb0c15c8223ececf315160cc55cb2a764062069f2b6a5a8f9e0d95c","name":"Contrapunto.wav","type":"audio/vnd.wave","lastModified":1679497867327.903,"size":13391426},{"id":"f04266fc5b76335195c90fe74fb5c6fed18ff5e3f7066bc1951ef4888b85f7e4336e234fca6033675d2ce9866fa343fd6590faae94aa5d6bb9f0d03327bcead4","href":"https://static.observableusercontent.com/files/f04266fc5b76335195c90fe74fb5c6fed18ff5e3f7066bc1951ef4888b85f7e4336e234fca6033675d2ce9866fa343fd6590faae94aa5d6bb9f0d03327bcead4","name":"Amador10-52.wav","type":"audio/vnd.wave","lastModified":1679497944147.166,"size":8730624},{"id":"a467b4eb4690ff2b21ea8f1d8b10235c9884fce6382f6bd5f0f97f3e589243e17aac6b6984a23838c46e082db3f2af60432c2714461dc47f3d06e60c8610d492","href":"https://static.observableusercontent.com/files/a467b4eb4690ff2b21ea8f1d8b10235c9884fce6382f6bd5f0f97f3e589243e17aac6b6984a23838c46e082db3f2af60432c2714461dc47f3d06e60c8610d492","name":"aventura-1@2.js","type":"application/javascript","lastModified":1684936828006.041,"size":29851},{"id":"f5680d5576860b1bb8f2350be1ff652b14281e76f8eec7991ed5a6a4a04653e221a946344c8625c1f68db5a49fd7c5a6ba7ec5974ed0cd6f760e9e593fbba5ab","href":"https://static.observableusercontent.com/files/f5680d5576860b1bb8f2350be1ff652b14281e76f8eec7991ed5a6a4a04653e221a946344c8625c1f68db5a49fd7c5a6ba7ec5974ed0cd6f760e9e593fbba5ab","name":"index.html","type":"text/html","lastModified":1697594915739.796,"size":20973},{"id":"1188ab8f03be9102aed12ffcae9e82876fb946e771c7001ae4dbaa35bc206cd9215d2321a0d5392fbd861251660db922d3cdc598e6216cc0c4aab0dd9d0af029","href":"https://static.observableusercontent.com/files/1188ab8f03be9102aed12ffcae9e82876fb946e771c7001ae4dbaa35bc206cd9215d2321a0d5392fbd861251660db922d3cdc598e6216cc0c4aab0dd9d0af029","name":"aventuraInteractiva.json","type":"application/json","lastModified":1681308521162.324,"size":2191345},{"id":"81ede310e15cf9eb6333497b7365108e63bbc18c2d8097a6a34a9ce6307d4d9dfb1d64a12712cd139f060abb0a22556a3885ef396e2942449c0c782d2f599943","href":"https://static.observableusercontent.com/files/81ede310e15cf9eb6333497b7365108e63bbc18c2d8097a6a34a9ce6307d4d9dfb1d64a12712cd139f060abb0a22556a3885ef396e2942449c0c782d2f599943","name":"SOCR-HeightWeight.csv","type":"text/csv","lastModified":1692302903274.31,"size":608346}] 32:{"id":"f69a77f148f9c25c","slug":"bitacora","title":"Mi bitácora de datos","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-02-01T12:32:01.855Z","update_time":"$D2023-11-30T20:01:22.543Z","view_time":null,"first_public_time":"$D2023-02-01T12:32:01.855Z","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":492,"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":"Mi bitácora de datos","cells":[{"id":0,"value":"# Mi bitácora de datos\n## Por Sergio Rodríguez Gómez","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"{\n let numero = 10;\n let palabra = \"gato\";\n let frio = true;\n let llovera = undefined;\n\n let listaDeFrutas = [\"fresa\", \"pera\", \"manzana\", \"uva\", \"mango\"];\n let listaDeNumeros = [10, 43, 45, 31, 89];\n let listaDeindefinidos = [undefined, undefined, undefined];\n\n return listaDeFrutas[0]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"objeto = {\n let objetoBiografico = {\n nombre: \"Sergio Leonardo Rodríguez Gómez\",\n edad: 60,\n felicidad: 6.67,\n estatura: 178,\n gafas: true,\n gatos: [\"Kibo\", \"Haru\"],\n colorPiel: \"#deab71\"\n }\n\n return objetoBiografico\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"probabilidadNombre = d3.json(\"https://api.nationalize.io/?name=sergio\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"datosDePrueba = d3.csv(\"https://docs.google.com/spreadsheets/d/1-5MeDjPxhN4xONK2C3aW_XbVt2JgWeQ6x78DYSqaLtQ/export?format=csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":305,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":330,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"{\n d3.select('#caricatura').selectAll(\".annotation-group\").remove()\n \n let anotaciones = [\n {\n x: 100,\n y: 100,\n dx: 300,\n dy: 50,\n note: {\n label: \"El texto que quiero anotar\"\n },\n color: \"red\"\n }\n ]\n\n let crearAnotaciones = d3_annotation.annotation()\n .type(d3_annotation.annotationCallout)\n .annotations(anotaciones)\n\n d3.select(\"#caricatura\")\n .append(\"g\")\n .attr(\"class\", \"annotation-group\")\n .call(crearAnotaciones);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"estaturas = d3.csv(\"https://docs.google.com/spreadsheets/d/1XlqA5gwSqSmY-Y9g3J8v7zuSAQ9J281LqBhwq5X7AuE/export?format=csv&gid=186370949\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"Inputs.table(estaturas)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"{\n let ancho = 500\n let alto = 100\n \n let svg = d3.create(\"svg\")\n .attr(\"width\", ancho)\n .attr(\"height\", alto)\n\n svg.selectAll(\"rect\")\n .data(estaturas)\n .join(\"rect\")\n .attr(\"x\", 0) // todos empiezan a la izquierda\n .attr(\"y\", (d, i) => i * (alto / estaturas.length)) // dibuje cada barra un poco más abajo\n .attr(\"width\", (d, i) => d.Estatura * ancho / 200) // el ancho de cada barra depende de la estatura\n .attr(\"height\", (d, i) => alto / estaturas.length) // todas las barras ocupan el mismo alto\n .style(\"fill\", \"black\")\n .style(\"stroke\", \"white\")\n\n svg.selectAll(\"text\")\n .data(estaturas)\n .join(\"text\")\n .text((d, i) => d.Nombre)\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => 13 + i * (alto / estaturas.length))\n .style(\"fill\", \"red\")\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"Plot.barX(estaturas, {x: \"Estatura\", y: \"Nombre\"}).plot({ marginLeft: 80 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"Plot.plot({\n marks: [\n Plot.barX(estaturas, {x: \"Estatura\", y: \"Nombre\", sort: {y: \"x\", reverse: false}}),\n Plot.ruleX([160])\n ],\n marginLeft: 100\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"saberPro = d3.csv(\"https://docs.google.com/spreadsheets/d/1HHQ04pWiz1pZ4IxXHM6iPLV1cBSf6u1pBKh43stWIOI/export?format=csv&gid=548754895\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"Plot.plot({\n marks: [\n Plot.rectY(saberPro, Plot.binX({y: \"count\"}, {x: \"PUNT_GLOBAL\"})),\n Plot.ruleY([0]),\n Plot.ruleX([media], {stroke: \"red\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"La interpretación que están haciendo de las visualizaciones (por qué, qué cosas se pueden ver en la vis, qué cosas pordían preguntarse)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":235,"value":"cantidadPorMatricula = d3.rollups(saberPro, v => v.length, d => d.ESTU_VALORMATRICULAUNIVERSIDAD)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"Plot.plot({\n marginLeft: 250,\n marks: [\n Plot.barX(cantidadPorMatricula, {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":239,"value":"Plot.plot({\n marginLeft: 250,\n width: 900,\n y: {\n domain: [\n \"No pagó matrícula\",\n \"Menos de 500 mil\",\n \"Entre 500 mil y menos de 1 millón\",\n \"Entre 1 millón y menos de 2.5 millones\",\n \"Entre 2.5 millones y menos de 4 millones\",\n \"Entre 4 millones y menos de 5.5 millones\",\n \"Entre 5.5 millones y menos de 7 millones\",\n \"Más de 7 millones\"\n ]\n },\n marks: [\n Plot.boxX(saberPro, {y: \"ESTU_VALORMATRICULAUNIVERSIDAD\", x: \"PUNT_GLOBAL\", fill: \"ESTU_VALORMATRICULAUNIVERSIDAD\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"promedio = d3.mean(saberPro, d => d.PUNT_GLOBAL)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"media = d3.median(saberPro, d => d.PUNT_GLOBAL)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"moda = d3.mode(saberPro, d => d.PUNT_GLOBAL)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"q1 = d3.quantile(saberPro, 0.25, d => d.PUNT_GLOBAL)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"import {waveform2spectrogram} from \"@srsergiorodriguez/espectrograma\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"# Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"d3_annotation = require(\"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"aventura = import(await FileAttachment(\"aventura-1@2.js\").url())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"a = new aventura.Aventura(\"es\", {\n typewriterSpeed: 0,\n adventureContainer: \"mipanel\",\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"escenas = FileAttachment(\"aventuraInteractiva.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"a.fijarEscenas(escenas).iniciarAventura(\"panel_inicio\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"//https://www.kaggle.com/datasets/burnoutminer/heights-and-weights-dataset?resource=download\n// PESO Y ESTATURAS DE PERSONAS DE 18 AÑOS Statistics Online Computational Resource (SOCR) UCLA\nSOCR = (await FileAttachment(\"SOCR-HeightWeight.csv\").csv()).map( d => ({...d, cms: d[\"Height(Inches)\"] * 2.54}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"modaSOCR = d3.mode(SOCR, d => d.cms);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"mediaSOCR = d3.median(SOCR, d => d.cms);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"promedioSOCR = d3.mean(SOCR, d => d.cms)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"rangoSOCR = d3.extent(SOCR, d => d.cms)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"d3.quantile(SOCR, 0.9, d=> d.cms)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"std = d3.deviation(SOCR, d => d.cms)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"Plot.plot({\n marks: [\n Plot.rectY(SOCR, Plot.binX({y: \"count\"}, {x: {value: \"cms\"}, fill: \"gray\"})),\n // Plot.lineY(SOCR, Plot.binX({y: \"count\"}, {x: {thresholds: 10, value: \"cms\"}, stroke: \"blue\", curve: \"basis\"})),\n Plot.ruleY([0]),\n Plot.ruleX([d3.median(SOCR, d => d.cms)], {stroke: \"red\"}),\n Plot.ruleX(d3.range(10).map(d => promedioSOCR + std * (d - 5)), {stroke: \"green\"}),\n Plot.text(d3.range(10).map(d => promedioSOCR + std * (d - 5)), {x: d => d, y: 1000, fill: \"green\", text: d => d - promedioSOCR}),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"index = await FileAttachment(\"index.html\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"