Public
Edited
Mar 15, 2023
1 fork
objeto = {
let objetoBiografico = {
nombre: "Natalia Consuegra Anaya",
edad: 3,
casada: true,
ciudadResidencia: "Bogota",
barrioResidencia: "Quinta Paredes",
hijos: false,
profesion: "psicologa",
altura: 130,
gafas: true,
colorCara: "#f0d8ad",
padres: ["Beatriz Anaya", "Jorge Consuegra"],
semestrePosgrado: 18,
avanceTesis: 20,
nombrePosgrado: "Humanidades Digitales",
universidad: "Universidad de los Andes",
comidaFavorita: ["pasta", "fast food", "mexicana"],
generosMusicales: ["jazz", "rock", "salsa", "brasileña", "funk", "new wave"],
viajesPendientes: ["Turquía", "Marruecos", "República Checa", "Hungría"],
autoresFavoritos: ["Jorge Luis Borges", "Julio Cortázar", "Juan José Arreola", "Ricardo Piglia"],
}
return objetoBiografico
}
{
let ancho = 450
let alto = 500
let mitadAncho = ancho / 2
let mitadAlto = alto / 2
let separacionOjos = 55
let alturaOjos = 60
let svg = d3.create("svg")
.attr("width", ancho)
.attr("height", alto)
let grupo = svg.append("g")
.attr("transform", `translate(${mitadAncho}, ${mitadAlto})`)
// cara
grupo.append("circle")
.attr("cx", -7)
.attr("cy", -2)
.attr("r", objeto.altura)
.style("fill", objeto.colorCara)
.style("stroke", "#e6cb9c")
.style("stroke-width", objeto.edad)
// ojo izquierdo
grupo.append("circle")
.attr("cx", separacionOjos)
.attr("cy", -alturaOjos)
.attr("r", objeto.avanceTesis)
.style("fill", "darkseagreen")
// montura gafas ojo izquierdo
grupo.append("circle")
.attr("cx", separacionOjos)
.attr("cy", -alturaOjos)
.attr("r", 40)
.style("stroke", "black")
.style("fill", "transparent")
// ojo derecho
grupo.append("circle")
.attr("cx", -separacionOjos)
.attr("cy", -alturaOjos)
.attr("r", objeto.avanceTesis)
.style("fill", "darkseagreen")
// montura gafas ojo derecho
grupo.append("circle")
.attr("cx", -separacionOjos)
.attr("cy", -alturaOjos)
.attr("r", 40)
.style("stroke", "black")
.style("fill", "transparent")
// puente gafas
grupo.append("line")
.attr("x1", 20)
.attr("x2", -20)
.attr("y1", "-50")
.attr("y2", "-50")
.style("stroke", "black")
.style("fill", "transparent")
// nariz
grupo.append("line")
.attr("x1", -1)
.attr("x2", 30)
.attr("y1", -30)
.attr("y2", 30)
.style("stroke", "lemonchiffon")
grupo.append("circle")
.attr("cx", 20)
.attr("cy", 30)
.attr("r", 5)
.style("fill", "lemonchiffon")
grupo.append("circle")
.attr("cx", -10)
.attr("cy", 30)
.attr("r", 5)
.style("fill", "lemonchiffon")
// boca
grupo.append("text")
.attr("x", -70)
.attr("y", 80)
.attr("stroke", "lightcoral")
.attr("font-family", "sans-serif")
.attr("font-size", objeto.semestrePosgrado)
.text("varía con el día")
// pelo
var myimage = svg.append("image")
.attr("xlink:href", "https://cdn-icons-png.flaticon.com/512/27/27168.png")
.attr("width", 1050)
.attr("height", 500)
.attr("x", -305)
.attr("y", 28)
// aretes
grupo.append("rect")
.attr("x", 95)
.attr("y", 28)
.attr("width", 8)
.attr("height", 25)
.style("fill", "mediumorchid")
return svg.node()
}
Inputs.table(obras)
Plot.barX(obras, {x: "Año", y: "Artista"}).plot({marginLeft: 120})
Plot.plot({
marks: [
Plot.dot(obras, {x: "País", y: "Género"})
],
marginLeft: 100,
marginBottom: 70,
width
})
d3_annotation = require("d3-svg-annotation")
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.
