Public
Edited
Jun 12, 2023
Insert cell
Insert cell
Insert cell
Plot.plot({
marginLeft: 55,
marginBottom: 55,
marginTop: 55,
height: 600,
width: 900,
y: {
label: "Temperatura media en Madrid 1980 - 2023",
grid: true,
ticks: 5,
nice: true
},
x: {
ticks: 3,
axis: "bottom",
label: "Día del año",
labelOffset: 45,
labelAnchor: "right"
},
color: {legend: false},
style: {fontSize: "20px"},
marks: [
Plot.line(historico_mad, {
x: "dia_year",
y: "tmed",
z: "year",
stroke: d => d.year == "2023" ? "#D54300" : "#DEDEDE",
opaity: 0.5
}),
Plot.tip(historico_mad, Plot.pointer({
x: "dia_year",
y: "tmed",
z: "year",
title: (d) => [
`La temperatura media el ${d.dia_year} día de ${d.year} fue de ${d.tmed}ºC`
].join("\n\n")
})),
Plot.tip(historico_mad.slice(-1), {
x: "day",
y: "diff",
title: (d) => [
`La temperatura media el ${d.dia_year} día de ${d.year} fue de ${d.tmed}ºC`
].join("\n\n"),
anchor: "left"
}),
Plot.ruleY([0])
]
})
Insert cell
historico_mad.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

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