Public
Edited
Feb 10, 2023
sites = [...new Set(d3.map(data, (d) => d.site))] // to get the unique values of one variable in the dataset
viewof selectedSite = Inputs.select(
sites, // Let's put the names of the sites into a drop down list. That's easier to use
{
label: "Select one location", // Nice, with the label we can give instructions to the users as what to do.
value: "Zürich - Perron-HB" // We can also set the default value which station to select in the beginning.
}
)
selectedSite // This tells us the name of the site currently selected. We can use this to refenrence in various places.
dataFiltered = data.filter(
(d) =>
d.site == selectedSite && // we filter by sites, and ...
d.starttime <= "2023-02-01 22:50" // we filter by date
) // Now we only have the data for one location on one day
Plot.plot({
height: 650,
marks: [
Plot.ruleY([0]), // adds a rule at y = 0, so at 0°C
Plot.lineY(dataFiltered, { x: "starttime", y: "temperature" })
]
})
dataTransformed = tidy(
data,
mutate({
x_time: (d) => d3.timeParse("%Y-%m-%d %I:%M")(d.starttime), // use d3.timeParse to convert a string to a date
date: (d) => d3.timeFormat("%Y-%m-%d")(new Date(d.starttime)),
temp: (d) => +d.temperature, // convert a string to numeric
temp_category: (d) => (+d.temperature < 0 ? "below 0°C" : "above 0°C") // a dummy variable, which we will later use for coloring
}),
filter((d) => d.site == selectedSite)
)
Plot.plot({
height: 650,
marks: [
Plot.ruleY([0]), // adds a rule at y = 0, so at 0°C
Plot.lineY(dataTransformed, {
x: "x_time",
y: "temp",
interval: d3.utcHour
})
]
})
times = [...new Set(d3.map(dataTransformed, (d) => d.x_time))] // as before, get the unique dates in our data
// Lets use a range slider to change the time range
// Slide it and see what happens in the plot below.
viewof rangeTime = Inputs.range(d3.extent(times), {
label: "Set time range",
step: 1
}) // not formatted properly, but it works to change the time range
Plot.plot({
grid: true,
height: 400,
width: 1000,
inset: 10,
color: {
type: "ordinal",
range: ["#e15759", "#4e79a7"], // we can define the color, above 0 is warmer and thus red, below 0 is cold an thus blue
legend: true
},
x: {
label: "Datum →"
},
y: {
label: "↑ Temperatur (°C)",
tickFormat: "+" // positive values have a "+" as suffix, negativ values have a "-"
},
marks: [
Plot.ruleY([0]),
Plot.line(
dataTransformed.filter(
(d) => d.starttime <= d3.timeFormat("%Y-%m-%d %I:%M")(rangeTime)
), //"2023-02-01 12:00"),
{ x: "x_time", y: "temp" }
)
// Uncomment the lines below to see the data as scatter plot
// Plot.dot(dataTransformed.filter((d) => d.starttime <= "2023-02-08 12:00"), {
// x: "x_time",
// y: "temp",
// fill: "temp_category",
// interval: d3.utcHour // plots the data by hour... try different formats: d3.utcDay, d3.utcWeek (you might have to limit/extend the date range)
// })
]
})
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.
