Public
Edited
Nov 29, 2024
miEdad = 31 // Esto es un número
miNombre = "Sara"
gafas = false
frutasPreferidas = ["maracuyá", "banano", "papaya", "manzana roja", "melón"]
frutasPreferidas[4]
frutasPreferidas.push ("banano")
MiBio = ({
nombre: "Sara",
edad: 31,
gafas: false,
Frutas: ["maracuyá","banano", "papaya", "manzana roja", "melón"],
})
ahora = Date.now()
nacimiento = new Date (1993, 5, 4)
numerosSuerte.push (234)
numerosSuerte = [7,3,5]
numerosSuerte.push (234)
numerosSuerte
// primera parte entrega: conjunto de datos autobiografía
// 100 conjuntos de datos
algoritmo = {
//todo lo que este será un algoritmo
let miNombre ="Sara";
let miApellido = "Colmenares";
return "Hola, " + miNombre + " " + miApellido}
listaFantastica = {
// Crear una lista vacía
let miLista = [];
let generadorEdades = d3.randomInt(18, 99);
let generadorEstaturas = d3.randomNormal (175, 10);
// Definir con cuántos elementos quiero llenar la lista
let numeroDeElementos = 10;
// Añadir elementos a la lista
for (let i = 0; i < numeroDeElementos; i++) {
let colores = d3.shuffle (["verde", "azul", "purpura", "naranja", "rojo"])
let objetoProvisional = {
edad: generadorEdades(),
colorFavorito: colores.pop(),
estatura: generadorEstaturas()
};
let numeroAzar = generadorEdades(); // Provisional, solo en el scope del loop
miLista.push(objetoProvisional);
}
// Devolver la lista llena
return miLista
}
Plot.plot({
marks: [
Plot.rectY(listaFantastica, Plot.binX({y: "count"}, {x: "edad"})),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.rectY(listaFantastica, Plot.binX({y: "count"}, {x:"estatura"})),
Plot.ruleY([0])
]
})
contador, condición con determinación: , cuánto aumentar el contador
<svg width="700px" height="400px">
<circle cx=350 cy=200 r=${tamanoCirculo} fill=${colorCirculo} />
<rect x=157 y=150 width=386 height=100 fill=${toggle ? "tomato" : "green"} stroke="blue"/>
<path d="M8 48 L14 16 L32 16 L48 16 L54 50 Z" stroke="red" />
</svg>
viewof colorCirculo = Inputs.color({label: "Escoge tu color preferido", value: "#4682b4"})
viewof toggle = Inputs.toggle({label: "Active", value: true})
plantas = [ { nombre: "Guineo", regada: "Jueves" }, { nombre: "Pino", regada: "Jueves" }, { nombre: "Suculenta", regada: "Lunes" } ]
viewof select = Inputs.select(["Guineo", "Pino", "Suculenta"], {label: "Selecciona la planta de la que quieres tener más información"})
plantaEscogida = plantas.find(d => d.regada === "Jueves")
viewof nombrePlanta = Inputs.select(["Guineo", "Pino", "Suculenta"], {label: "Selecciona la planta de la que quieres tener más información"})
hambreAEstahora = 45;
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 disCara = radioCara * 0.3;
const disBoca = radioCara / ancho;
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", alto /2)
.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", disBoca)
.attr("width", distOjos * 2)
.attr("height", hambreAEstahora)
.attr("fill", "black")
return miLienzo.node()
}
saludador = function (nombre) { //Definir argumentos
// Seguir las instrucciones
return "Hola " + nombre
}
saludador ("Sara")
saludador ("Lucy")
sandwichador = function (relleno) {
return "pan, queso " + relleno + ", pan"
}
sandwichador ("jamón")
sandwichador ("pollo")
banderador = (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", 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 ("pink", "tomato", "orange")
datosParticipantes = FileAttachment("datosViz - Hoja 1.csv").csv({typed: true})
miVisualizacion = {
const alto = 500;
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", (d,i) => i * 50)
.attr("r", (d,i) => d.edad)
.attr("fill", (d,i) => d.color)
return miLienzo.node() // node devuelve el elemento del lienzo
}
Plot.plot({
marginLeft: 200,
marks: [
Plot.barX(datosParticipantes, {x: "edad", y: "nombre", fill: "color", sort: {y: "x", reverse: true}}),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.rectY(datosParticipantes, Plot.binX({y: "count"}, {x: "tiempoEnLlegar", fx: "gafas", fill: "color"})),
Plot.ruleY([0]),
Plot.ruleX([0, d3.mean(datosParticipantes, d => d.tiempoEnLlegar)])
]
})
Plot.plot({
marks: [
Plot.dot(datosParticipantes, {x: "edad", y: "tiempoEnLlegar", fill: "nombre"}),
Plot.ruleX ([20]),
Plot.ruleY ([0]),
]
})
Pack(flare, {
path: (d) => d.name.replaceAll(".", "/"), // e.g. flare/animate/Easing
label: (d) => d.name.split(".").pop(), // display text
value: (d) => d?.size, // area of each circle
title: (d, n) => [n.id, n.value.toLocaleString()].join("\n"), // hover text
width,
height: 720
})
import {Pack} from "@d3/pack"
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.
