Module guidelinesWeek 2 | Drawing with dataWeek 3 | Let's talk about colorWeek 4 | Make it interactiveExercise 1: Load the data and chart it with PlotExercise 2: Data questions, visual answersExercise 4: Look ma! It's interactiveExercise 3: UnPleasantville your charts!Final exercise: GuidelinesFinal exercise: TemplateData playgroundGrades (so far)
Week 1 | ObservableHQ and Plot essentials
raw = FileAttachment("oisst2.1_world2_sst_day.json").json()
raw
Type Table, then Shift-Enter. Ctrl-space for more options.
data = {
const dataZ = []; // Create an empty array
raw.filter(d => d.name.length <= 4) // Filter out the "1982-2011 mean", "plus 2σ", and "minus 2σ" objects at the end of the JSON
.forEach(yearData => { // Iterate over each year
const year = parseInt(yearData.name)
yearData.data.forEach((temperature, index) => { // Iterate over the daily temperature values
if(temperature !== null) { // Some days have null values
const date = new Date(year, 0, index + 1) // If you keep the month 0, you can use the index to construct the date
dataZ.push({temperature, date}) // Push the temperature and date objects
}
})
})
return dataZ;
}
data
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
title: "Sea surface temperatures have risen consistently since the 80s",
subtitle: "In black, yearly rolling mean. In gray, daily temperatures.",
marks: [
Plot.lineY(data, { x: "date", y: "temperature", stroke: "#CCC" }),
Plot.lineY(data, Plot.windowY(366, { x: "date", y: "temperature", tip: true }))
]
})
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.
