Public
Edited
Apr 3
miNombre = "Sergio"
misApellidos = "Rodríguez Gómez"
nombreCompleto = {
// Aquí van todas las instrucciones
let nombreCompleto = "";
nombreCompleto += miNombre;
nombreCompleto += " ";
nombreCompleto += misApellidos;
return nombreCompleto
}
nombreCompleto
miNombre
234 * 1800
numeroEntero = 13267893212; // Esta variable contiene un número entero
numeroFlotante = 12313123.123123; // Esta variable contiene un número decimal o de punto flotante
booleano = true; // Un booleano puede ser true o false
string = "Hola"; // Esta es una string o cadena de caracteres
indefinido = undefined; // una variable indefinida
nulo = null; // una variable nula
array = [5,10,2875,3456,1]; // Lista ordenada. Puedo acceder a algún elemento a través de su índice (empieza a contar desde 0)
array[0] // devuelve el primer elemento
nuevaArray = array.map( d => d * 2 ); // Puedo crear una nueva lista, basada en la lista original, usando la función map. En este caso la nueva lista duplica el valor original (representado por "d")
// Esta es otra clase de estructura de datos, un objeto.
// Es un diccionario no ordenado. Puedo acceder a su valor (definición) a través de su clave (palabra)
// La entrega consiste en crear un "objeto autobiográfico" en el que consignen 15 datos
objeto = ({
numero: 132543945,
string: "CHAO",
booleano: true,
lista: ["A", "B", "C"],
flotante: 123123.132
})
objeto.lista // Así se accede a un elemento del objeto
probNombre = d3.json("https://api.nationalize.io/?name=sergio"); // Cargando datos desde una API
lenguasNativas = d3.csv("https://www.datos.gov.co/resource/734h-gxtn.csv", d3.autoType);
obrasGilberoAlzate = d3.json("https://www.datos.gov.co/resource/qivh-itck.json")
{
let fecha = new Date(1315310450000);
let convertirALocale = fecha.toLocaleString();
return convertirALocale
}
// Algo así, pero con 15 distintos
objetoAutobiografico = ({
edad: 33, // numérico
gafas: true, // categórico
nombre: "Sergio", // categórico
estatura: 178,
animo: 8,
preocupacion: 100,
cabello: "#f7b182",
piel: "#f0a170",
nacimiento: new Date(1315310450000) // ordinal
})
{
// Aquí va el código para hacer el autorretato de datos
let ancho = 600;
let alto = 500;
let lienzo = d3.create("svg") // Lienzo
.attr("width",ancho)
.attr("height",alto)
.style("background", testerColor)
let cara = lienzo.append("circle")
.attr("cx", ancho/2)
.attr("cy", alto/2)
.attr("r", objetoAutobiografico.estatura)
.attr("fill", objetoAutobiografico.piel)
let anchoBoca = objetoAutobiografico.edad * 5;
let posXBoca = (ancho/2) - (anchoBoca/2);
let boca = lienzo.append("rect")
.attr("x", posXBoca)
.attr("y", (alto/2) + 50)
.attr("width", anchoBoca)
.attr("height", objetoAutobiografico.preocupacion)
.attr("fill", "black")
let sepOjos = ancho/8;
let ojoIzq = lienzo.append("circle")
.attr("cx", (ancho/2) - sepOjos )
.attr("cy", (alto/2) - 40)
.attr("r", 30)
.attr("fill", "black")
let ojoDer = lienzo.append("circle")
.attr("cx", (ancho/2) + sepOjos )
.attr("cy", (alto/2) - 40)
.attr("r", 30)
.attr("fill", "black")
return lienzo.node()
}
datosPersonales = ([
{ nombre: "Sergio", edad: 33, gafas: false },
{ nombre: "Jorge", edad: 28, gafas: true },
{ nombre: "Aleja", edad: 27, gafas: true },
])
{
const ancho = 900;
const alto = 300;
const miLienzo = d3.create("svg")
.attr("width", ancho)
.attr("height", alto)
// DEFINIR MI GRAMÁTICA
const escalaX = d3.scaleLinear()
.domain([0, datosPersonales.length])
.range([100, ancho])
miLienzo.selectAll("circle")
.data(datosPersonales)
.join("circle")
.attr("cy", alto / 2)
.attr("cx", (d, i) => escalaX(i))
.attr("r", (d, i) => d.edad)
.attr("fill", (d, i) => d.gafas ? "#f5a442" : "#69f542" )
miLienzo.selectAll("text")
.data(datosPersonales)
.join("text")
.attr("text-anchor", "middle")
.attr("y", alto / 2)
.attr("x", (d, i) => escalaX(i))
.text((d, i) => d.nombre)
return miLienzo.node()
}
lenguas = FileAttachment("lenguasNativas (1).csv").csv({typed: true})
Plot.plot({
marginLeft: 100,
marks: [
Plot.barX(lenguas, {
x: "n_mero_de_hablantes",
y: "nombre_de_lengua",
fill: "nombre_de_lengua",
sort: {y: "x", reverse: true}
})
]
});
socr = FileAttachment("SOCR.csv").csv({typed: true})
Plot.plot({
marks: [
Plot.rectY(socr, // CREAR BARRAS DEL HISTOGRAMA
Plot.binX( // AGRUPAR DATOS EN "BINS"
{y: "count", thresholds: "sturges" }, // CÓMO CREAR LOS BINS
{x: "cms", fill: "tomato"} // MODIFICANDO OTROS CANALES
)
),
Plot.ruleX([d3.mean(socr, d => d.cms), d3.mode(socr, d => d.cms)], {stroke: "red"})
]
})
saberpro = FileAttachment("saberPro2021.csv").csv({typed: true})
Plot.plot({
marginLeft: 100,
x: {ticks: 20},
marks: [
Plot.boxX(saberpro, {
y: "ESTU_DEPTO_RESIDE",
x: "PUNT_GLOBAL",
fill: "ESTU_DEPTO_RESIDE",
sort: {y: "x"}
}),
Plot.ruleX([d3.median(saberpro, d => d.PUNT_GLOBAL)])
]
})
Plot.plot({
width,
marginRight: 100,
grid: true,
marks: [
Plot.rectY(saberpro, // CREAR BARRAS DEL HISTOGRAMA
Plot.binX( // AGRUPAR DATOS EN "BINS"
{y: "count", thresholds: "sturges" }, // CÓMO CREAR LOS BINS
{x: "PUNT_GLOBAL", fill: "tomato", fy: "ESTU_DEPTO_RESIDE"} // MODIFICANDO OTROS CANALES
)
),
]
})
d3_annotation = require("d3-svg-annotation");
Type HTML, then Shift-Enter. Arrow ↑/↓ to switch modes.
centrobogota = FileAttachment("CentroBogota.wav").url()
import { waveform2spectrogram, spectrogramPlayer, annotateSpectrogram } from "@srsergiorodriguez/espectrograma"
mivisualizacion = waveform2spectrogram(centrobogota, {fftResolution: 128})
spectrogramPlayer(centrobogota, mivisualizacion)
anotaciones = [
{
x: 750,
y: 100,
dx: 150,
dy: 50,
note: {
label: "Sonido de una campana de un vendedor de helados"
},
color: "white"
}
]
annotateSpectrogram(anotaciones, mivisualizacion)
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.
