2e:null 2f:["$","title",null,{"children":"TESTS DATAVIZ | Sergio Rodríguez Gómez | Observable"}] 34:T930,chernoff = (data) => { const ancho = 500; const alto = 700; const svg = d3.create("svg").attr("width", ancho).attr("height", alto); const columns = Math.ceil(Math.sqrt(data.length)); const unit = ancho / columns; // const mouthValues = [... new Set(data.map(d => d[options.boca]))] const mouthValues = ["Vulnerable", "En peligro", "En peligro de extinción", "En situación critica"] const mouthScale = d3.scaleOrdinal(mouthValues, d3.range(0, 1, 1 / mouthValues.length)) const g = svg.selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => `translate(${((i % columns) * unit) + unit/2}, ${(Math.floor(i / columns) * unit*1.4) + unit/2})`) g.append("ellipse") .attr("rx", unit*0.4) .attr("ry", unit*0.45) .attr("stroke", "black") .attr("fill", "none") g.append("circle") .attr("cx", -10 ) .attr("cy", -5) .attr("r", unit*0.1) .attr("stroke", "black") .attr("fill", "none") g.append("circle") .attr("cx", 10 ) .attr("cy", -5) .attr("r", unit*0.1) .attr("stroke", "black") .attr("fill", "none") g.append("circle") .attr("cx", -10 ) .attr("cy", -5) .attr("r", unit*0.05) .attr("stroke", "black") .attr("fill", "black") g.append("circle") .attr("cx", 10 ) .attr("cy", -5) .attr("r", unit*0.05) .attr("stroke", "black") .attr("fill", "black") const mouthHeight = 15 g.append("line") .attr("x1", 0) .attr("y1", d => mouthHeight - (mouthScale(d.vitalidad) * 10)) .attr("x2", -10) .attr("y2", mouthHeight) .attr("stroke", "black") g.append("line") .attr("x1", 0) .attr("y1", d => mouthHeight - (mouthScale(d.vitalidad) * 10)) .attr("x2", 10) .attr("y2", mouthHeight) .attr("stroke", "black") const browHeight = -15 g.append("line") .attr("x1", -5) .attr("y1", d => browHeight - ( d.hablantes / d.habitantes || 0) * 5) .attr("x2", -15) .attr("y2", browHeight) .attr("stroke", "black") g.append("line") .attr("x1", 5) .attr("y1", d => browHeight - ( d.hablantes / d.habitantes || 0) * 5) .attr("x2", 15) .attr("y2", browHeight) .attr("stroke", "black") g.append("text") .text(d => d.nombre) .attr("text-anchor", "middle") .attr("font-size", 8) .attr("y", unit*0.6) return svg.node(); }35:T87b,mapaBurbujas = (data, options_) => { const options = {burbuja: "red", escala: "lineal", linea: "black", relleno: "#ddd", fondo:"white", proyeccion: "naturalEarth", ...options_} const projections = { naturalEarth: d3.geoNaturalEarth1, mercator: d3.geoMercator, ortografica: d3.geoOrthographic, } const projection = projections[options.proyeccion]() projection.scale(1500).center([-70, 4.376068906468002]) const pathGenerator = d3.geoPath(projection); const svg = d3.create("svg").attr("width", width).attr("height", 500).style("background", options.fondo); const g = svg.append("g"); const linearScale = d3.scaleLinear([0,50]).domain(d3.extent(data, d => d.hablantes)) const logScale = d3.scaleSymlog([0, 20]).domain(d3.extent(data, d => d.hablantes)) const rscale = options.escala == "lineal" ? linearScale : logScale; const grouped = {}; for (let d of data) { if (grouped[d.departamento] === undefined) { grouped[d.departamento] = 0; } grouped[d.departamento] += d.hablantes; } const groupedArray = []; for (let [departamento, hablantes] of Object.entries(grouped)) { groupedArray.push({departamento, hablantes}) } g.append("path") .attr("d", pathGenerator(mapaColombia)) .attr("fill", options.relleno) .attr("stroke", options.linea) svg.append("g") .selectAll("circle") .data(groupedArray) .join("circle") .attr("transform", d => { const {lat, lon} = deptos[d.departamento]; return `translate(${projection([lon,lat])})` }) .attr("cx", 0) .attr("cy", 0) .attr("fill", options.burbuja) .attr("r", d => rscale(d.hablantes)) const values = [10000, 100000, 200000] let offset = 0; for (let v of values) { const label = svg.append("g").attr("transform", `translate(${100},${100 + offset})`); label.append("circle") .attr("cy", rscale(v) + 10) .attr("r", rscale(v)) .attr("fill", "white") .attr("stroke", "black") label.append("text") .text(v) .attr("text-anchor", "middle") offset += rscale(v) + 80; } return svg.node(); }36:T4aa,testRandoms = { const lista = []; // Crear una lista vacía // GENERADORES const generadorEdades = d3.randomInt(18, 99); // Crear un generador de edades que se reusará const generadorEstaturas = d3.randomNormal(165, 10); const listaColores = ["Rojo", "Verde", "Azul", "Púrpura", "Amarillo", "Naranja"]; const generadorLista = (lista) => d3.shuffle([...lista]).pop(); // LOOP for (let i = 0; i < 1000; i++) { // Esto se repetirá 10 veces // Crear valores provisionales const edadAleatoria = generadorEdades(); const estaturaAleatoria = generadorEstaturas(); const fechaAleatoria = new Date(d3.randomInt(1990, 2024)(),d3.randomInt(12)(), d3.randomInt(30)()) // Llenar el objeto const obj = { nombre: "Nombre", edad: edadAleatoria, estatura: Math.floor(estaturaAleatoria), numeroSuerte: Math.random() * 100, colorPreferido: generadorLista(listaColores), fecha: fechaAleatoria }; // Crear un objeto momentáneo // Agregar el objeto a la lista lista[i] = obj; // Agregar el objeto al espacio i } // Fin del scope del loop return lista // Devolver la lista con los contenidos agregados }37:[{"id":"3d70b71f7aea5247b5112f22cabf0bc56b32aeb0d0c0749d1310ce4645e436e44570dbf8a64b8a59566d2243c87379a84c5db78d15871d10f3ea3b8e8e0f7a2f","href":"https://static.observableusercontent.com/files/3d70b71f7aea5247b5112f22cabf0bc56b32aeb0d0c0749d1310ce4645e436e44570dbf8a64b8a59566d2243c87379a84c5db78d15871d10f3ea3b8e8e0f7a2f","name":"asnodeoro.txt","type":"text/plain","lastModified":1721046695941.761,"size":526631},{"id":"adc85bb17c338646826cfcdb9cd01cea60d59e832d1312e5e1788a137e48e9bb1cbf0545a00ca6b065de34a5cd658c81dc3dee9f37f507591768293b4c9994f5","href":"https://static.observableusercontent.com/files/adc85bb17c338646826cfcdb9cd01cea60d59e832d1312e5e1788a137e48e9bb1cbf0545a00ca6b065de34a5cd658c81dc3dee9f37f507591768293b4c9994f5","name":"dataset_lenguas_nativas (1).csv","type":"text/csv","lastModified":1721923291903.858,"size":53339},{"id":"71fa6afeb6eaa0e3c116f4a524e8684f2dd42437f94b747cbf1160c0d74609fbe249e1e2e5ce41ce2bbf221972a0c68b66817da543d2f7cb91dbe60099d4a6ce","href":"https://static.observableusercontent.com/files/71fa6afeb6eaa0e3c116f4a524e8684f2dd42437f94b747cbf1160c0d74609fbe249e1e2e5ce41ce2bbf221972a0c68b66817da543d2f7cb91dbe60099d4a6ce","name":"dataset_obras_más_costosas (1).csv","type":"text/csv","lastModified":1721923295256.238,"size":9581},{"id":"089b02db9975292877b76501a2b9996db81fcf00925df4ee9006cd32304db21b58351b710d48002cfd630640de246ee4151de63d7377e8da012841627e485db9","href":"https://static.observableusercontent.com/files/089b02db9975292877b76501a2b9996db81fcf00925df4ee9006cd32304db21b58351b710d48002cfd630640de246ee4151de63d7377e8da012841627e485db9","name":"CATH.wav","type":"audio/vnd.wave","lastModified":1728346656770.927,"size":5076992},{"id":"be98d8462acab3ef6e50d4d53e0ee2e2af21e23c009e6f17634b6c54ce6db730b14f0c8e2d3e8dbe08aa201f20027753720730a3a00a3b8fb1cb37255f27b25d","href":"https://static.observableusercontent.com/files/be98d8462acab3ef6e50d4d53e0ee2e2af21e23c009e6f17634b6c54ce6db730b14f0c8e2d3e8dbe08aa201f20027753720730a3a00a3b8fb1cb37255f27b25d","name":"deptos.json","type":"application/json","lastModified":1721926297355.658,"size":1679},{"id":"c4b1c28e8969ee06a58be24f636b5bf0ea9dd374e251950e5f8bbb5cf02f93ecc9aa87de7a5131655c7e075576028189c149b7e18609b74f4f14a21424ea37e4","href":"https://static.observableusercontent.com/files/c4b1c28e8969ee06a58be24f636b5bf0ea9dd374e251950e5f8bbb5cf02f93ecc9aa87de7a5131655c7e075576028189c149b7e18609b74f4f14a21424ea37e4","name":"Colombia.geo.json","type":"application/json","lastModified":1721926386900.974,"size":1519597},{"id":"8e2255bee53fbf0f2fc2faf22621207c9cda9a3374aff653825fbf043f611496a312df4092172d765416acb8ebea1e06494e13e3ae36930e34b8283e6df7701f","href":"https://static.observableusercontent.com/files/8e2255bee53fbf0f2fc2faf22621207c9cda9a3374aff653825fbf043f611496a312df4092172d765416acb8ebea1e06494e13e3ae36930e34b8283e6df7701f","name":"camionescarmen.wav","type":"audio/vnd.wave","lastModified":1728348624670.569,"size":11427918}] 32:{"id":"d712bef6d9f9afeb","slug":"utilidades","title":"TESTS DATAVIZ","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-07-13T01:15:30.752Z","update_time":"$D2025-09-12T14:31:15.749Z","view_time":null,"first_public_time":"$D2024-07-25T15:56:11.834Z","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":683,"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"},{"type":"team","id":"305bf5080ae4580a","login":"srsergiorodriguez","name":"Sergio Rodríguez Gómez","avatar_url":"https://avatars-next.observableusercontent.com/6326606b0640f2597b352da73f7c073f29b44d4060f66cc47c575dd937903b31","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"TESTS DATAVIZ","cells":[{"id":0,"value":"# TESTS DATAVIZ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"datasetFantastico = {\n const lista = [];\n const nombres = [\"A\", \"B\"];\n const apellidos = [\"C\", \"D\"];\n \n for (let i = 0; i < 10; i++) {\n const dato = {\n edad: d3.randomInt(10, 100)(),\n edad: d3.randomInt(10, 100)(),\n nombre: alAzar(nombres) + \" \" + alAzar(apellidos)\n }\n lista.push(dato);\n };\n return lista\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"viewof search = Inputs.search(datasetFantastico)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"search[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"viewof button = Inputs.button(\"Click me\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"{\n const alto = 400;\n const ancho = 400;\n\n const lienzo = d3.create(\"svg\").attr(\"width\", ancho).attr(\"height\", alto);\n\n const fondo = lienzo.append(\"rect\")\n .attr(\"width\", ancho)\n .attr(\"height\", alto)\n .attr(\"fill\", colorFondo)\n\n const circulo = lienzo.append(\"circle\")\n .attr(\"cx\", ancho / 2)\n .attr(\"cy\", alto / 2)\n .attr(\"r\", button)\n .attr(\"fill\", select)\n\n return lienzo.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"viewof colorFondo = Inputs.color({label: \"Fondo\", value: \"#4682b4\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"viewof select = Inputs.select([\"red\", \"blue\"], {label: \"Select one\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"viewof range = Inputs.range([0, 100], {label: \"Amount\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"alAzar = (arr) => d3.shuffle(arr)[0];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"Plot.plot({\n marks: [\n Plot.barY(datasetFantastico, {x: \"nombre\", y: \"edad\", sort: {x: \"y\", reverse: true}}),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"datos = d3.csv(\"https://docs.google.com/spreadsheets/d/1Km5PKxrnZ6o2oqJkZ5EHSwOyeeu7ZgWpVKnqNjNaU08/export?format=csv\", d3.autoType);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"datosTransformados = {\n const nuevosDatos = [];\n\n for (let d of datos) {\n const nuevoDato = d;\n nuevoDato.Edad = 2024 - d.Nacimiento;\n nuevoDato.Inicial = d.Nombre[0];\n nuevosDatos.push(nuevoDato);\n }\n\n return nuevosDatos\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"texto = (await FileAttachment(\"asnodeoro.txt\").text()).split(\" \");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"conteo = {\n const conteo = d3.rollups(texto, v => v.length, d => d);\n const conteoOrdenado = d3.sort(conteo, d => d[1]).reverse();\n const stopwords = (await d3.text(\"https://raw.githubusercontent.com/Alir3z4/stop-words/master/spanish.txt\")).split(\"\\n\");\n const stopWordsRemovidas = d3.filter(conteoOrdenado, d => !stopwords.includes(d[0]));\n return stopWordsRemovidas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"conteo2 = {\n const conteo = d3.rollups(texto, v => v.length, d => d);\n const conteoObjeto = conteo.map(elemento => {\n const objeto = {\n palabra: elemento[0],\n conteo: elemento[1]\n }\n return objeto\n })\n return conteoObjeto\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"Plot.plot({\n marginLeft: 100,\n marks: [\n Plot.barX(conteo, {x: d => d[1], y: d => d[0], sort: {y: \"x\", reverse: true, limit: 20}}),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"chernoff(lenguasNativas)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"lenguasNativas = FileAttachment(\"dataset_lenguas_nativas (1).csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"deptos = FileAttachment(\"deptos.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"mapaColombia = FileAttachment(\"Colombia.geo.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"mapaBurbujas(lenguasNativas, {escala: escala, relleno: \"lightgray\", linea: \"black\", burbuja: \"red\", fondo: \"white\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"viewof escala = Inputs.select([\"lineal\", \"log\"], {label: \"Selecciona una escala\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"escala","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"viewof colorBurbuja = Inputs.color({label: \"Color burbuja\", value: \"#4682b4\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"$35","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"Plot.plot({\n axis: null,\n margin: 20,\n marginRight: 120,\n height: 1000,\n marks: [\n Plot.tree(lenguasNativas, {path: \"jerarquia\", delimiter: \".\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"Pack(lenguasNativas, {\n path: (d) => d.jerarquia.replaceAll(\".\", \"/\"), // e.g. flare/animate/Easing\n label: (d) => d.jerarquia.split(\".\").pop(), // display text\n value: (d) => d?.hablantes, // area of each circle\n title: (d, n) => [n.id, n.value.toLocaleString()].join(\"\\n\"), // hover text\n width,\n height: 720\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"import {Pack} from \"@d3/pack\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"Treemap(lenguasNativas, {\n path: (d) => d.jerarquia.replaceAll(\".\", \"/\"), // e.g. flare/animate/Easing\n label: (d) => d.jerarquia.split(\".\").pop(), // display text\n group: (d) => d.jerarquia.split(\".\")[1], // for color; e.g. animate\n value: (d) => d?.hablantes, // area of each rect\n title: (d, n) => [n.id, n.value.toLocaleString()].join(\"\\n\"), // hover text\n width,\n height: 500\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"import {Treemap} from \"@d3/treemap\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"fecha = new Date(\"1990-11-15T18:00:00.000+05:00\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"Plot.plot({\n marks: [\n Plot.rectY(testRandoms, Plot.binX({y: \"count\" }, {x: \"estatura\", fill: \"colorPreferido\"})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"

Título

Esto es un párrafo

Elemento 1
Elemento 1
Elemento 1

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":537,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":551,"value":"viewof noise = Inputs.range([0, 10], {label: \"Noise\", step: 0.01})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"viewof octaves = Inputs.range([0, 100], {label: \"Octaves\", step: 0.001})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"banner = {\n const w = 1000;\n const h = 300;\n const svg = d3.create(\"svg\").attr(\"width\", w).attr(\"height\", h);\n\n const line = d3.line()\n\n const sides = 10;\n const div = (Math.PI*2) / sides;\n const r = 100;\n const posx = w/2;\n const posy = h/2;\n\n const points = [];\n\n for (let i = 0; i < sides; i++) {\n const x = posx + Math.cos(i*div) * r;\n const y = posy + Math.sin(i*div) * r;\n points.push([x, y]);\n }\n\n const path = svg.append(\"path\")\n .attr(\"d\", line(points))\n .attr(\"fill\", \"red\")\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"estrella = (seleccion, puntas, tamano, rotacion, color) => {\n const points = d3.range(0, Math.PI * 2, (Math.PI * 2) / (puntas * 2));\n const line = d3.line()\n .x((d, i) => Math.cos(d + rotacion) * (i % 2 === 0 ? tamano : tamano / 2))\n .y((d, i) => Math.sin(d + rotacion) * (i % 2 === 0 ? tamano : tamano / 2))\n \n seleccion.append(\"path\")\n .attr(\"d\", line(points))\n .attr(\"fill\", color)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"viewof radius = Inputs.range([0, 100], {label: \"Amount\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"starData = {\n const datos = [];\n const rnd = d3.randomInt(3, 10);\n const size = d3.randomInt(30, 40);\n\n const num = 10;\n \n for (let i = 0; i < 10; i++) {\n const dato = {\n p: rnd(),\n s: size()\n }\n datos.push(dato);\n }\n\n return datos\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"{\n const w = 500;\n const h = 500;\n let timing = now * 0.001;\n let timing2 = now * 0.05;\n let timing3 = now * 0.0001;\n\n const hsl = (hue) => `hsl(${hue}, 50%, 50%)`;\n \n const svg = d3.create(\"svg\")\n .attr(\"width\", w)\n .attr(\"height\", h)\n .style(\"background\", `linear-gradient(${timing2 % 360}deg, ${hsl(360 - Math.floor(timing2 % 360))} 50%, ${hsl(Math.floor(timing2 % 360))} 100%)`)\n\n const g = svg.append(\"g\").attr(\"transform\", `translate(${w/2},${h/2})`);\n\n const div = (Math.PI * 2) / starData.length;\n const r = 120;\n\n g.selectAll(\"g\")\n .data(starData)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${Math.cos((i * div) + timing) * r},${Math.sin(i * div) * r})`)\n .each(function(d, i) {\n const selection = d3.select(this);\n selection.call(estrella, \n d.p, \n d.s,\n timing3,\n hsl(Math.floor(timing2 % 360))\n )\n })\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"numMascotas = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"import {mapaLeafleat} from \"@srsergiorodriguez/mapas-basicos\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"opcionesLeaflet = ({\n center: [4.603043723798043, -74.06732150828127], // Centrado en la latitud y longitud de Bogotá por defecto. Primero latitud y luego longitud\n zoom: 30,\n width: width, // ancho por defecto del notebook\n height: 300\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"mapaLeafleat","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"audioCuitlacoche = FileAttachment(\"camionescarmen.wav\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"import {waveform2spectrogram, spectrogramPlayer, annotateSpectrogram} from \"@srsergiorodriguez/espectrograma\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"viz = waveform2spectrogram(audioCuitlacoche, {fftResolution: 512})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"spectrogramPlayer(audioCuitlacoche, viz)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"annotateSpectrogram(anotaciones, viz)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"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 {\n x: 100,\n y: 50,\n dx: 150,\n dy: 50,\n note: {\n label: \"Mosca pasando por ahí\"\n },\n color: \"white\"\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"