Public
Edited
Sep 17, 2024
tengoGafas = true
hambreAEstaHora = range;
quemadoEnVacaciones = 255;
viewof range = Inputs.range([0, 100], {label: "Amount", step: 1})
miDibujo = {
const alto = 350;
const ancho = 700;
const radioCara = alto / 2;
const distOjos = radioCara * 0.4;
const tamOjo = radioCara * 0.2;
const distBoca = radioCara * 0.3;
const miLienzo = d3.create("svg")
.attr("width", ancho)
.attr("height", alto);
const miGrupo = miLienzo.append("g")
.attr("transform", `translate(${ancho / 2},${alto / 2})`)
const cara = miGrupo.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", radioCara)
.attr("fill", `rgb(${quemadoEnVacaciones},0,0)`);
const ojoDer = miGrupo.append("circle")
.attr("cx", distOjos)
.attr("cy", -distOjos)
.attr("r", tamOjo)
.attr("fill", "white")
const ojoIzq = miGrupo.append("circle")
.attr("cx", -distOjos)
.attr("cy", -distOjos)
.attr("r", tamOjo)
.attr("fill", "white")
const boca = miGrupo.append("rect")
.attr("x", -distOjos)
.attr("y", distBoca)
.attr("width", distOjos * 2)
.attr("height", hambreAEstaHora)
.attr("fill", "black")
return miLienzo.node()
}
viewof select = Inputs.select(["A", "B"], {label: "Select one"})
saludador = function(nombre) { // Definir argumentos
// Seguir las instrucciones
return "Hola " + nombre
}
saludador("Lucy")
saludador("Karen")
sandwichador = function(relleno) {
return "pan, queso, " + relleno + ", pan"
}
sandwichador("jamón")
sandwichador("pollo")
sandwichadorMultiple = function(relleno, repeticiones) {
let sandwich = "pan, queso";
for (let i = 0; i < repeticiones; i++) {
sandwich += ", " + relleno;
}
sandwich += ", pan"
return sandwich
}
sandwichadorMultiple("jamón", 1000)
new Date(1990, 11, 15)
banderador = function(color1, color2, color3) {
const ancho = 500;
const alto = 300;
const altoFranja = alto / 3;
const miLienzo = d3.create("svg")
.attr("width", ancho)
.attr("height", alto);
miLienzo.append("rect")
.attr("x", 0)
.attr("y", altoFranja * 0)
.attr("fill", color1)
.attr("width", ancho)
.attr("height", altoFranja);
miLienzo.append("rect")
.attr("x", 0)
.attr("y", altoFranja * 1)
.attr("fill", color2)
.attr("width", ancho)
.attr("height", altoFranja);
miLienzo.append("rect")
.attr("x", 0)
.attr("y", altoFranja * 2)
.attr("fill", color3)
.attr("width", ancho)
.attr("height", altoFranja);
return miLienzo.node()
}
banderador("yellow", "blue", "red")
banderador("green", "yellow", "red")
datosBio = [
{
color: "verde",
numeroSuerte: 45, //
nacimiento: new Date(1990, 10, 1),
sombrero: true
},
{
color: "azul",
numeroSuerte: 89, //
nacimiento: new Date(1990, 4, 6),
sombrero: false
}
]
retratar = (objetoBiografico) => {
const alto = 500;
const ancho = 500;
const miLienzo = d3.create("svg").attr("width", ancho).attr("height", alto);
const grupo1 = miLienzo.append("g").attr("transform", `translate(${0},${alto - objetoBiografico.numeroSuerte})`)
const colorPiso = objetoBiografico.sombrero ? "pink" : "red";
const piso = grupo1.append("rect").attr("width", ancho).attr("height", objetoBiografico.numeroSuerte).attr("fill", colorPiso);
const tamanoArbol = objetoBiografico.color === "azul" ? alto/2 : alto/3;
const generadorLinea = d3.line();
const listaDePuntos = [[0, -tamanoArbol], [100, 0], [-100, 0]];
const coordenadas = generadorLinea(listaDePuntos);
const arbol = grupo1.append("path").attr("d", coordenadas).attr("fill", "green");
return miLienzo.node()
}
retratar(datosBio[1])
datosParticipantes = FileAttachment("datosParticipantesDataViz@1.csv").csv({typed: true})
miVisualizacion = {
const alto = 200;
const ancho = 800;
const miLienzo = d3.create("svg").attr("width", ancho).attr("height", alto);
miLienzo.selectAll("circle")
.data(datosParticipantes)
.join("circle")
.attr("cx", (d,i) => i * 50)
.attr("cy", alto/2)
.attr("r", (d,i) => d.edad)
.attr("fill", (d,i) => d.color)
return miLienzo.node()
}
misBarras = {
const ancho = 500;
const alto = 400;
const miLienzo = d3.create("svg").attr("width", ancho).attr("height", alto);
const m = {h: ancho * 0.2, v: alto * 0.1}
const escalaX = d3.scaleLinear()
.domain([0, d3.max(datosParticipantes, d => d.edad)])
.range([0, ancho - (m.h * 2)])
const escalaY = d3.scaleBand()
.domain(datosParticipantes.map(d => d.nombre))
.range([alto - (m.v * 2), 0])
const ticksX = miLienzo.append("g")
.attr("transform", `translate(${m.h},${alto - m.v})`)
.call(d3.axisBottom(escalaX))
const ticksY = miLienzo.append("g")
.attr("transform", `translate(${m.h},${m.v})`)
.call(d3.axisLeft(escalaY))
const miGrupo = miLienzo.append("g").attr("transform", `translate(${m.h},${m.v})`);
miGrupo.selectAll("rect")
.data(datosParticipantes)
.join("rect")
.attr("x", 0)
.attr("y", d => escalaY(d.nombre))
.attr("width", d => escalaX(d.edad))
.attr("height", 10)
.attr("fill", "tomato")
return miLienzo.node()
}
Plot.plot({
marginLeft: 200,
marks: [
Plot.barX(datosParticipantes, {x: "edad", fill: "nombre", y: "nombre", sort: {y: "x", reverse: true}}),
Plot.ruleX([0])
]
})
Plot.plot({
marks: [
Plot.rectY(datosParticipantes, Plot.binX({y: "count"}, {x: "tiempoEnLlegar", fy: "gafas", fill: "purple"})),
Plot.ruleY([0]),
Plot.ruleX([0, d3.mean(datosParticipantes, d => d.tiempoEnLlegar)])
]
})
Plot.plot({
marks: [
Plot.dot(datosParticipantes, {x: "edad", y: "tiempoEnLlegar", fill: "nombre"})
]
})
Pack(nuevosDatos, {
path: (d) => d.jerarquia.replaceAll(".", "/"), // e.g. flare/animate/Easing
label: (d) => d.jerarquia.split(".").pop(), // display text
value: (d) => d?.edad, // area of each circle
title: (d, n) => [n.id, n.value.toLocaleString()].join("\n"), // hover text
width,
fill: "tomato",
height: 720
})
nuevosDatos = datosParticipantes.map(d => ({...d, jerarquia: d.gafas+"."+d.nombre}))
import {Pack} from "@d3/pack"
miArray1 = ["A", "B", "C"];
miArray2 = [...miArray1, "D"]
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.
