Public
Edited
Jul 10, 2023
Paused
1 fork
1 star
chart_sea_anomaly = Plot.plot({
marginLeft: 50,
marginBottom: 30,
marginTop: 30,
height: 450,
width,
y: {
label: "Abweichung in °C",
grid: true,
ticks: 5,
nice: true
},
x: {
tickFormat: (d) => d.toLocaleString("de", { month: "short" }),
label: null
},
tooltip: {
stroke: "#fff",
"stroke-width": "1.5px"
},
color: { legend: false },
marks: [
Plot.ruleY([0]),
Plot.line(
changes.filter((d) => d.year != year_select),
{
x: "date_repeat",
y: "diff",
z: "year",
stroke: "#99AFC2",
opacity: 0.3
}
),
Plot.line(
changes.filter((d) => d.year == year_select),
{
x: "date_repeat",
y: "diff",
stroke: "#e84f1c",
strokeWidth: 2
}
),
Plot.tip(changes.slice(-1), {
x: "date_repeat",
y: "diff",
opacity: year_select == "2023" ? 1 : 0,
fillOpacity: 0.8,
strokeOpacity: 0.5,
dx: 4,
title: (d) =>
[
d.date.toLocaleDateString("de-DE", {
year: "numeric",
month: "short",
day: "numeric"
}),
`${d.diff.toLocaleString("de", {
minimumFractionDigits: 2,
maximumFractionDigits: 2
})}°C Abweichung`
].join("\n\n"),
anchor: "left"
}),
Plot.tip(
changes,
Plot.pointer({
x: "date_repeat",
y: "diff",
z: "year",
fillOpacity: 0.8,
strokeOpacity: 0.5,
title: (d) =>
[
d.date.toLocaleDateString("de-DE", {
year: "numeric",
month: "long",
day: "numeric"
}),
`${d.diff.toLocaleString("de", {
minimumFractionDigits: 2,
maximumFractionDigits: 2
})}°C Abweichung`
].join("\n\n")
})
)
]
})
credits_anomaly = md`<div class="mode"><span class="credits">Quelle: climatereanalyzer.org</span></div>`
rawdata = FileAttachment("oisst2.1_world2_sst_day.json").json()
data = rawdata
.map((d) => {
return d.data.map((x, i) => {
return {
day: i,
year: d.name,
date: new Date(d.name, 0, i + 1),
date_repeat: new Date(2023, 0, i + 1),
temp: x,
diff: +d.diff
};
});
})
.flat()
.filter((d) => d.temp !== null && d.year > 1800 && d.day <= 364)
means = group(data.filter((d) => d.year >= 1982 && d.year <= 2010))
.by((d) => d.day)
.orderBy((d) => d.key)
.run()
.map((grouped) => {
const temps = grouped.values.map((d) => d.temp);
const sum = temps.reduce((a, b) => a + b, 0);
const avg = sum / grouped.values.length;
return Object.assign({ sum, avg }, grouped);
})
means
Type Table, then Shift-Enter. Ctrl-space for more options.
changes = data.map((d) => {
d.diff = d.temp - means[d.day].avg;
return d;
})
import { group } from "@bumbeishvili/utils"
style = html`
<div></div>
<style>
figure {
margin-left: 0px;
margin-right: 0px;
}
p, span, label, text {
font-size: 12px;
font-weight: 400;
font-family: InterRegular;
color: #0f151a;
background-color: #ffffff;
}
.oi-66c06c select, .oi-ec050e select, .oi-ec050e-input>input {
font-size: 12px;
font-weight: 400;
font-family: InterRegular;
color: #0f151a;
background-color: #ffffff;
}
svg {
background-color: white !important;
color: #0f151a !important;
}
@font-face {
font-family: Source Serif Pro;
src: url(https://static.rndtech.de/share/rnd/jchrist/SourceSerifPro-Regular.ttf);
}
@font-face {
font-display: swap;
font-family: 'DIN Next LT Pro';
font-style: normal;
font-weight: 700;
src: url(https://static.rndtech.de/share/rnd/jchrist/DINNextLTPro-Bold.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/DINNextLTPro-Bold.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/DINNextLTPro-Bold.ttf) format("truetype")
}
@font-face {
font-display: swap;
font-family: 'InterRegular';
font-style: normal;
font-weight: 400;
src: url(https://static.rndtech.de/share/rnd/jchrist/Inter-Regular.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Regular.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Regular.ttf) format("truetype")
}
@font-face {
font-display: swap;
font-family: 'InterMedium';
font-style: normal;
font-weight: 500;
src: url(https://static.rndtech.de/share/rnd/jchrist/Inter-Medium.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Medium.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Medium.ttf) format("truetype")
}
@font-face {
font-display: swap;
font-family: 'InterBold';
font-style: normal;
font-weight: 700;
src: url(https://static.rndtech.de/share/rnd/jchrist/Inter-Bold.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Bold.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Bold.ttf) format("truetype")
}
h2 {
color: rgb(15, 21, 26);
font-family: "DIN Next LT Pro", sans-serif;
font-weight: 700;
font-size: 22px;
margin: 0px 0px 0px 0px;
}
.title {
color: rgb(15, 21, 26);
font-family: "DIN Next LT Pro", sans-serif;
font-weight: 700;
font-size: 22px;
margin: 0px 0px 0px 0px;
}
.subtitle {
font-family: "Source Serif Pro", serif;
font-size: 17px;
font-weight: 400;
color: rgb(41, 56, 69);
}
.credits {
font-size: 12px;
color: #99AFC2;
font-family: InterRegular, sans-serif;
font-weight: 400;
position:relative;
}
@media (prefers-color-scheme: dark) {
.mode {
color: #ffffff;
background-color: #293845;
}
svg {
background-color: #293845 !important;
color: white !important;
}
.subtitle {
font-family: "Source Serif Pro", serif;
font-size: 17px;
font-weight: 400;
color: #ffffff;
}
p, span, text, label, text {
font-size: 12px;
font-weight: 400;
font-family: InterRegular;
color: #ffffff;
background-color: #293845;
}
.oi-66c06c select, .oi-ec050e select, .oi-ec050e-input>input {
font-size: 12px;
font-weight: 400;
font-family: InterRegular;
color: #ffffff;
background-color: #293845;
}
.subtitle {
font-family: "Source Serif Pro", serif;
font-size: 17px;
font-weight: 400;
color: #ffffff;
}
g:not([font-size], [font-weight]) text {
font-size: 12px;
line-height: 125%;
font-weight: 400;
font-family: InterRegular;
color: #ffffff;
background-color: #293845;
}
}
</style>`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.