Public
Edited
Nov 30, 2023
objeto = {
let objetoBiografico = {
nombre: "Sergio Leonardo Rodríguez Gómez",
edad: 60,
felicidad: 6.67,
estatura: 178,
gafas: true,
gatos: ["Kibo", "Haru"],
colorPiel: "#deab71"
}
return objetoBiografico
}
probabilidadNombre = d3.json("https://api.nationalize.io/?name=sergio")
datosDePrueba = d3.csv("https://docs.google.com/spreadsheets/d/1-5MeDjPxhN4xONK2C3aW_XbVt2JgWeQ6x78DYSqaLtQ/export?format=csv")
<img src="https://babel.banrepcultural.org/digital/iiif/r_rendon/352/full/500,/0/default.jpg"/>
<svg width="100%" height="500px" id="caricatura">
<g>
<image xlink:href="https://babel.banrepcultural.org/digital/iiif/r_rendon/352/full/500,/0/default.jpg"/>
</g>
</svg>
{
let ancho = 500
let alto = 100
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) => d.Estatura * ancho / 200) // 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")
return svg.node()
}
{
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()
}
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()
}
Plot.barX(estaturas, {x: "Estatura", y: "Nombre"}).plot({ marginLeft: 80 })
Plot.plot({
marks: [
Plot.barX(estaturas, {x: "Estatura", y: "Nombre", sort: {y: "x", reverse: false}}),
Plot.ruleX([160])
],
marginLeft: 100
})
saberPro = d3.csv("https://docs.google.com/spreadsheets/d/1HHQ04pWiz1pZ4IxXHM6iPLV1cBSf6u1pBKh43stWIOI/export?format=csv&gid=548754895")
Plot.plot({
marks: [
Plot.rectY(saberPro, Plot.binX({y: "count"}, {x: "PUNT_GLOBAL"})),
Plot.ruleY([0]),
Plot.ruleX([media], {stroke: "red"})
]
})
cantidadPorMatricula = d3.rollups(saberPro, v => v.length, d => d.ESTU_VALORMATRICULAUNIVERSIDAD)
Plot.plot({
marginLeft: 250,
marks: [
Plot.barX(cantidadPorMatricula, {x: d => d[1], y: d => d[0], sort: {y: "x", reverse: true}}),
Plot.ruleX([0])
]
})
Plot.plot({
marginLeft: 250,
width: 900,
y: {
domain: [
"No pagó matrícula",
"Menos de 500 mil",
"Entre 500 mil y menos de 1 millón",
"Entre 1 millón y menos de 2.5 millones",
"Entre 2.5 millones y menos de 4 millones",
"Entre 4 millones y menos de 5.5 millones",
"Entre 5.5 millones y menos de 7 millones",
"Más de 7 millones"
]
},
marks: [
Plot.boxX(saberPro, {y: "ESTU_VALORMATRICULAUNIVERSIDAD", x: "PUNT_GLOBAL", fill: "ESTU_VALORMATRICULAUNIVERSIDAD"})
]
})
promedio = d3.mean(saberPro, d => d.PUNT_GLOBAL)
media = d3.median(saberPro, d => d.PUNT_GLOBAL)
moda = d3.mode(saberPro, d => d.PUNT_GLOBAL)
q1 = d3.quantile(saberPro, 0.25, d => d.PUNT_GLOBAL)
import {waveform2spectrogram} from "@srsergiorodriguez/espectrograma"
aventura = import(await FileAttachment("aventura-1@2.js").url())
a = new aventura.Aventura("es", {
typewriterSpeed: 0,
adventureContainer: "mipanel",
})
escenas = FileAttachment("aventuraInteractiva.json").json()
a.fijarEscenas(escenas).iniciarAventura("panel_inicio")
modaSOCR = d3.mode(SOCR, d => d.cms);
mediaSOCR = d3.median(SOCR, d => d.cms);
promedioSOCR = d3.mean(SOCR, d => d.cms)
rangoSOCR = d3.extent(SOCR, d => d.cms)
d3.quantile(SOCR, 0.9, d=> d.cms)
std = d3.deviation(SOCR, d => d.cms)
Plot.plot({
marks: [
Plot.rectY(SOCR, Plot.binX({y: "count"}, {x: {value: "cms"}, fill: "gray"})),
// Plot.lineY(SOCR, Plot.binX({y: "count"}, {x: {thresholds: 10, value: "cms"}, stroke: "blue", curve: "basis"})),
Plot.ruleY([0]),
Plot.ruleX([d3.median(SOCR, d => d.cms)], {stroke: "red"}),
Plot.ruleX(d3.range(10).map(d => promedioSOCR + std * (d - 5)), {stroke: "green"}),
Plot.text(d3.range(10).map(d => promedioSOCR + std * (d - 5)), {x: d => d, y: 1000, fill: "green", text: d => d - promedioSOCR}),
]
})
index = await FileAttachment("index.html").url()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
