Public
Edited
Nov 22, 2022
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { Wrangler, op } from "@observablehq/data-wrangler"
Insert cell
Wrangler(data)
Insert cell
Insert cell
vle = require("vega-embed@6")
Insert cell
tickplot = vle({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
description: "",
// data: { values: data_3c.filter((d) => d.age < 85) }, // filtrando los datos desde javascript
data: { values: data_3c },
transform: [{ filter: "datum.age < 85" }], // filtrando con la sintaxis de vega-lite
mark: "tick",
config: {
tick: {
thickness: 9,
bandSize: 30
}
},
width: 700,
height: 200,
encoding: {
x: { field: "age", type: "quantitative", scale: { zero: false } },
y: { field: "key", type: "nominal" },
color: { field: "value", type: "quantitative" }
}
})
Insert cell
lineplot = vle({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
description: "",
width: 800,
height: 600,
data: { values: data_3c.filter((d) => d.age < 85) },
mark: {
type: "line",
point: {
filled: false,
fill: "white"
}
},
encoding: {
x: { field: "age", type: "quantitative" },
y: { field: "value", type: "quantitative" },
color: { field: "key", type: "nominal" }
}
})
Insert cell
Insert cell
Insert cell
sueño = d3.csvParse(`day,hs,start,end,hini,hfin
lunes,9,2022-11-13 23:00:00, 2022-11-14 08:00:00,-1,8
martes,7,2022-11-15 00:00:00, 2022-11-15 08:00:00,0,7
miercoles,6,2022-11-16 00:00:00, 2022-11-16 08:00:00,0,6
jueves,5,2022-11-17 00:00:00, 2022-11-17 08:00:00,0,5
viernes,6,2022-11-18 00:00:00, 2022-11-18 08:00:00,0,6
sabado,7,2022-11-19 00:00:00, 2022-11-19 08:00:00,0,7
domingo,8,2022-11-19 22:00:00, 2022-11-20 08:00:00,-2,8
`)
Insert cell
vle({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
description: "graficando mis horas de sue#o",
width: 400,
data: { values: sueño },
mark: { type: "rect", cornerRadius: 30, width: 40 },
encoding: {
x: {
field: "day",
axis: { labelAngle: 0 },
type: "ordinal",
sort: [
"lunes",
"martes",
"miercoles",
"jueves",
"viernes",
"sabado",
"domingo"
]
},
y: {
field: "hini",
type: "quantitative"
},
y2: {
field: "hfin",
type: "quantitative"
}
}
})
Insert cell
m = require("https://momentjs.com/downloads/moment-with-locales.js")
Insert cell
m().format("YYYY-MM-DD HH:MM:SS", "es")
Insert cell
fiff = sueño.map((d) => ({
start: m(d.start)._d,
end: m(d.end)._d,
hs: m(d.end).diff(m(d.start), "h")
}))
Insert cell
// dormi 9 horas
(fiff[0].end - fiff[0].start) / 1000 / 60 / 60
Insert cell
{
let a = m(fiff[0].start);
let b = m(fiff[0].end);
return b.diff(a, "h");
}
Insert cell

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.
Learn more