2e:null 2f:["$","title",null,{"children":"Mi notebook visualización de datos 2023 - 2 | Sergio Rodríguez Gómez | Observable"}] 34:T49c,codigoanotacion1 = { // SERIE DE INSTRUCCIONES PARA ANOTAR MI IMAGEN d3.select("#fotorendon").selectAll(".anotacion").remove(); // Borrar las anotaciones previas let anotaciones = [ { x: 140, y: 280, dy: 200, dx: 100, color: "black", note: { label: "Presidente Miguel Abadía Méndez", } }, { note: { label: "Clío, musa griega, como representación de la culpa", }, x: 400, y: 150, dy: 100, dx: 220, color: "black" }, { note: { label: "Tío Sam, como representación de los intereses estadounidenses en el negocio de las bananeras", }, x: 100, y: 50, dy: 430, dx: 0, color: "black" }, { note: { label: "Ministro de Guerra Ignacio Rengifo Borrero", }, x: 500, y: 100, dy: 50, dx: 150, color: "black" } ]; let anotar = d3_annotation.annotation() .type(d3_annotation.annotationCalloutElbow) .annotations(anotaciones); d3.select("#fotorendon").append("g").attr("class", "anotacion").call(anotar); } // FIN DE LAS INSTRUCCIONES35:T42b,{ // Aquí va el código para hacer el autorretato de datos let ancho = 600; let alto = 500; let lienzo = d3.create("svg") // Lienzo .attr("width",ancho) .attr("height",alto) .style("background", testerColor) let cara = lienzo.append("circle") .attr("cx", ancho/2) .attr("cy", alto/2) .attr("r", objetoAutobiografico.estatura) .attr("fill", objetoAutobiografico.piel) let anchoBoca = objetoAutobiografico.edad * 5; let posXBoca = (ancho/2) - (anchoBoca/2); let boca = lienzo.append("rect") .attr("x", posXBoca) .attr("y", (alto/2) + 50) .attr("width", anchoBoca) .attr("height", objetoAutobiografico.preocupacion) .attr("fill", "black") let sepOjos = ancho/8; let ojoIzq = lienzo.append("circle") .attr("cx", (ancho/2) - sepOjos ) .attr("cy", (alto/2) - 40) .attr("r", 30) .attr("fill", "black") let ojoDer = lienzo.append("circle") .attr("cx", (ancho/2) + sepOjos ) .attr("cy", (alto/2) - 40) .attr("r", 30) .attr("fill", "black") return lienzo.node() }36:[{"id":"8869e49e127beabbafd2e6af168429be0bcafac2acbea9d1017084197e7ae4df94c53bc2655f85cee5c4a481bca5ecb6e5a3b004b5f42a868086513cf65adba6","href":"https://static.observableusercontent.com/files/8869e49e127beabbafd2e6af168429be0bcafac2acbea9d1017084197e7ae4df94c53bc2655f85cee5c4a481bca5ecb6e5a3b004b5f42a868086513cf65adba6","name":"SOCR.csv","type":"text/csv","lastModified":1694613448165.722,"size":935128},{"id":"c8f966749d8a8ea0d1edc55d1a398d9c7c12401a9ad06b2b7e83c5d0bf10a523878321c3109f1f2bed757fbd1feae320e4c794ae2fed145c74a05a07a9c568e1","href":"https://static.observableusercontent.com/files/c8f966749d8a8ea0d1edc55d1a398d9c7c12401a9ad06b2b7e83c5d0bf10a523878321c3109f1f2bed757fbd1feae320e4c794ae2fed145c74a05a07a9c568e1","name":"saberPro2021.csv","type":"text/csv","lastModified":1694614640973.763,"size":10438894},{"id":"af322fa222e59f5460ca4792f6f89be3edeae81725e1922126fc958897cca57ecad68da15f38c29d09c71cdbb27f3b06897bef14b9111b9ca4cc76519f170662","href":"https://static.observableusercontent.com/files/af322fa222e59f5460ca4792f6f89be3edeae81725e1922126fc958897cca57ecad68da15f38c29d09c71cdbb27f3b06897bef14b9111b9ca4cc76519f170662","name":"viz.svg","type":"image/svg+xml","lastModified":1695252417493.28,"size":23684},{"id":"1ded61c37cf780fe0a96662e9e3c6d381182209af0cbd0cb44aa2b5b7b74e0efd4955a7a15263ea326d371a401ae54b8edce5a27c9ca427ef00d1ddb4887d2f2","href":"https://static.observableusercontent.com/files/1ded61c37cf780fe0a96662e9e3c6d381182209af0cbd0cb44aa2b5b7b74e0efd4955a7a15263ea326d371a401ae54b8edce5a27c9ca427ef00d1ddb4887d2f2","name":"CentroBogota.wav","type":"audio/vnd.wave","lastModified":1697033278204.1,"size":29622374},{"id":"76cbb4c2c7d2238e661102b650e9fcd30a63957950401d7b510e0d827f385bbe858ce961ba18254d3922a905347052bf0d2f43ee0525684547ae698719c45821","href":"https://static.observableusercontent.com/files/76cbb4c2c7d2238e661102b650e9fcd30a63957950401d7b510e0d827f385bbe858ce961ba18254d3922a905347052bf0d2f43ee0525684547ae698719c45821","name":"lenguasNativas (1).csv","type":"text/csv","lastModified":1694612446603.638,"size":53373},{"id":"87936dc9b159326b33dc8eee191d2c13765fcd855727a256f5c1803b6760f4e1815d0d1265396dcc05926d19f344c56be6b827b7e60a5c2c05e33f5288f9c3ea","href":"https://static.observableusercontent.com/files/87936dc9b159326b33dc8eee191d2c13765fcd855727a256f5c1803b6760f4e1815d0d1265396dcc05926d19f344c56be6b827b7e60a5c2c05e33f5288f9c3ea","name":"lenguasNativas.svg","type":"image/svg+xml","lastModified":1695253228375.343,"size":45222}] 32:{"id":"d3890bbe9fc11756","slug":"mi-notebook-2023-2","title":"Mi notebook visualización de datos 2023 - 2","thumbnail":"793cf2328381c5ccdce5744a7a39a7a56c2337a5dc1c2d3fe302cba9708cfb3f","access_level":"public","create_time":"$D2023-08-09T13:36:43.358Z","update_time":"$D2026-02-18T22:24:34.245Z","view_time":null,"first_public_time":"$D2023-08-09T13:36:43.358Z","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":390,"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 notebook visualización de datos 2023 - 2","cells":[{"id":0,"value":"# Mi notebook visualización de datos 2023 - 2\n## Por Sergio Rodríguez Gómez","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"# Mi título\n\n## Un título más pequeño\n\nEsto es un párrafo de Markdown.\n\n- Elemento de lista\n- Elemento de lista 2\n- Elemento de lista 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"

Mi título, pero en HTML

\n\n\n\n

Esto es un párrafo de HTML

\n\n

Elemento de lista
Elemento de lista2
Elemento de lista3

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"![\"Un gato\"](https://ichef.bbci.co.uk/news/640/cpsprodpb/10E9B/production/_109757296_gettyimages-1128004359.jpg)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":" $\"Un$ ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"miNombre = \"Sergio\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"misApellidos = \"Rodríguez Gómez\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"nombreCompleto = {\n // Aquí van todas las instrucciones\n let nombreCompleto = \"\";\n nombreCompleto += miNombre;\n nombreCompleto += \" \";\n nombreCompleto += misApellidos;\n\n return nombreCompleto\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"nombreCompleto","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"miNombre","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"234 * 1800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"numeroEntero = 13267893212; // Esta variable contiene un número entero","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"numeroFlotante = 12313123.123123; // Esta variable contiene un número decimal o de punto flotante","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"booleano = true; // Un booleano puede ser true o false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"string = \"Hola\"; // Esta es una string o cadena de caracteres","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"indefinido = undefined; // una variable indefinida","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"nulo = null; // una variable nula","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"array = [5,10,2875,3456,1]; // Lista ordenada. Puedo acceder a algún elemento a través de su índice (empieza a contar desde 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"array[0] // devuelve el primer elemento","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"nuevaArray = array.map( d => d * 2 ); // Puedo crear una nueva lista, basada en la lista original, usando la función map. En este caso la nueva lista duplica el valor original (representado por \"d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"// Esta es otra clase de estructura de datos, un objeto. \n// Es un diccionario no ordenado. Puedo acceder a su valor (definición) a través de su clave (palabra)\n// La entrega consiste en crear un \"objeto autobiográfico\" en el que consignen 15 datos\nobjeto = ({\n numero: 132543945,\n string: \"CHAO\",\n booleano: true,\n lista: [\"A\", \"B\", \"C\"],\n flotante: 123123.132\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"objeto.lista // Así se accede a un elemento del objeto","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"probNombre = d3.json(\"https://api.nationalize.io/?name=sergio\"); // Cargando datos desde una API","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"lenguasNativas = d3.csv(\"https://www.datos.gov.co/resource/734h-gxtn.csv\", d3.autoType);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"obrasGilberoAlzate = d3.json(\"https://www.datos.gov.co/resource/qivh-itck.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":" $\"Un$ ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"{\n let fecha = new Date(1315310450000); \n let convertirALocale = fecha.toLocaleString();\n return convertirALocale\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"Esta visualización....","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"imagenanotada1","database":"$undefined"},{"id":156,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"// Algo así, pero con 15 distintos\nobjetoAutobiografico = ({\n edad: 33, // numérico\n gafas: true, // categórico\n nombre: \"Sergio\", // categórico\n estatura: 178,\n animo: 8,\n preocupacion: 100,\n cabello: \"#f7b182\",\n piel: \"#f0a170\",\n nacimiento: new Date(1315310450000) // ordinal\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"viewof testerColor = Inputs.color({label: \"COLOR\", value: \"#4682b4\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"viewof tester1 = Inputs.range([0, 100], {label: \"TESTER\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"datosPersonales = ([\n { nombre: \"Sergio\", edad: 33, gafas: false },\n { nombre: \"Jorge\", edad: 28, gafas: true },\n { nombre: \"Aleja\", edad: 27, gafas: true },\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"{\n const ancho = 900;\n const alto = 300;\n\n const miLienzo = d3.create(\"svg\")\n .attr(\"width\", ancho)\n .attr(\"height\", alto)\n\n // DEFINIR MI GRAMÁTICA\n\n const escalaX = d3.scaleLinear()\n .domain([0, datosPersonales.length])\n .range([100, ancho])\n\n miLienzo.selectAll(\"circle\")\n .data(datosPersonales)\n .join(\"circle\")\n .attr(\"cy\", alto / 2)\n .attr(\"cx\", (d, i) => escalaX(i))\n .attr(\"r\", (d, i) => d.edad)\n .attr(\"fill\", (d, i) => d.gafas ? \"#f5a442\" : \"#69f542\" )\n\n\n miLienzo.selectAll(\"text\")\n .data(datosPersonales)\n .join(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"y\", alto / 2)\n .attr(\"x\", (d, i) => escalaX(i))\n .text((d, i) => d.nombre)\n\n\n return miLienzo.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"lenguas = FileAttachment(\"lenguasNativas (1).csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"Plot.plot({\n marginLeft: 100,\n marks: [\n Plot.barX(lenguas, {\n x: \"n_mero_de_hablantes\",\n y: \"nombre_de_lengua\",\n fill: \"nombre_de_lengua\",\n sort: {y: \"x\", reverse: true}\n })\n ]\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"socr = FileAttachment(\"SOCR.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"Plot.plot({\n marks: [\n Plot.rectY(socr, // CREAR BARRAS DEL HISTOGRAMA\n Plot.binX( // AGRUPAR DATOS EN \"BINS\"\n {y: \"count\", thresholds: \"sturges\" }, // CÓMO CREAR LOS BINS\n {x: \"cms\", fill: \"tomato\"} // MODIFICANDO OTROS CANALES\n )\n ),\n Plot.ruleX([d3.mean(socr, d => d.cms), d3.mode(socr, d => d.cms)], {stroke: \"red\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"saberpro = FileAttachment(\"saberPro2021.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"Plot.plot({\n marginLeft: 100,\n x: {ticks: 20},\n marks: [\n Plot.boxX(saberpro, {\n y: \"ESTU_DEPTO_RESIDE\",\n x: \"PUNT_GLOBAL\",\n fill: \"ESTU_DEPTO_RESIDE\",\n sort: {y: \"x\"}\n }),\n Plot.ruleX([d3.median(saberpro, d => d.PUNT_GLOBAL)])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"Plot.plot({\n width,\n marginRight: 100,\n grid: true,\n marks: [\n Plot.rectY(saberpro, // CREAR BARRAS DEL HISTOGRAMA\n Plot.binX( // AGRUPAR DATOS EN \"BINS\"\n {y: \"count\", thresholds: \"sturges\" }, // CÓMO CREAR LOS BINS\n {x: \"PUNT_GLOBAL\", fill: \"tomato\", fy: \"ESTU_DEPTO_RESIDE\"} // MODIFICANDO OTROS CANALES\n )\n ),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"d3_annotation = require(\"d3-svg-annotation\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"lenguasnativas = FileAttachment(\"lenguasNativas.svg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":343,"value":"centrobogota = FileAttachment(\"CentroBogota.wav\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"import { waveform2spectrogram, spectrogramPlayer, annotateSpectrogram } from \"@srsergiorodriguez/espectrograma\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"mivisualizacion = waveform2spectrogram(centrobogota, {fftResolution: 128})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"spectrogramPlayer(centrobogota, mivisualizacion)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"anotaciones = [\n {\n x: 750,\n y: 100,\n dx: 150,\n dy: 50,\n note: {\n label: \"Sonido de una campana de un vendedor de helados\"\n },\n color: \"white\"\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"annotateSpectrogram(anotaciones, mivisualizacion)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"