Module guidelinesWeek 1 | ObservableHQ and Plot essentialsWeek 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 2 | Drawing with data
lineSimple = Plot.plot({
y: {label: "Temperature in ºC"},
marks:[
Plot.lineY(data, {
x:"date",
y:"temperature",
z:"year",
tip: "xy",
stroke: "#808080",
strokeOpacity:.5,
}),
Plot.axisX({ticks: "3 months", tickFormat:" %b"})
]
})
lineSimpleAlbert = Plot.plot({
y: {label: "Temperature in ºC"},
color: {
type: "sequential",
scheme: "RdPu",
},
marks:[
Plot.lineY(data, {
x:"date",
y:"temperature",
tip: "xy",
z:"year",
stroke: "year",
}),
Plot.axisX({ticks: "3 months" ,tickFormat:" %b"})
]
})
lineComposition = Plot.plot({
x:{interval: d3.utcDay},
marks:[
Plot.areaY(dataSummary, {
x:"date",
y1:"minus",
y2:"plus",
fill: "#eaeaea",
tip: "xy"
}),
Plot.tickY(data,{
x: "date",
y: "temperature",
z: "year",
stroke:"#bdbdbd",
tip: "xy"
}),
Plot.lineY(dataSummary, {
x:"date",
y:"mean",
stroke: "#003366",
strokeWidth: 1.8,
tip: "xy"
}),
Plot.axisX({ticks: "3 months" ,tickFormat:" %b"})
]
})
linesFacetted = Plot.plot({
width: width,
x:{interval: d3.utcDay, tickFormat: "%b"},
fy:{label:""},
facet: {
data: data,
y: "decade",
x: (d)=> (d.year - 1980) % 10,
},
marks:[
Plot.frame({fill: "#f3f3f3"}),
Plot.lineY(data,{
x: "date",
y:"temperature",
tip:"xy",
stroke: "#505050",
strokeWidth: 1,
markerEnd: "circle",
}),
Plot.text(lastDay, {
x:"date",
y: "temperature",
fy: "decade",
fx: (d)=> (d.year - 1980) % 10,
text: "temperature",
textAnchor: "end",
dy: -10,
dx: 6,
stroke: "#f3f3f3",
strokeWidth: 5,
fill: "#000",
})
]
})
heatmap = Plot.plot({
grid: true,
y: { type: "band" },
color: {
scheme: "BuYlRd",
legend: true,
pivot: d3.mean(data, (d) => d.temperature)
},
marks: [
Plot.tickX(data, {
y: "year",
x: "temperature",
tip: "xy",
stroke: "temperature",
strokeWidth: 3
}),
Plot.ruleX([d3.mean(data, (d) => d.temperature)], { stroke: "#808080" }),
Plot.textX([d3.mean(data, (d) => d.temperature)], {
y: 0,
textAnchor: "start",
text: (d) => `Avg. temp. 1981-2023: ${d3.format(".1f")(d)}ºC`,
fontWeight: "bold",
dx: 10
}),
Plot.axisX({ anchor: "top" })
]
})
violin = Plot.plot({
height:90,
x: {domain: d3.extent(data, d=> d.temperature)},
marks: [
() => htl.svg`<defs>
<linearGradient id="gradient">
<stop offset="0%" style="stop-color: #cbe4ee;"/>
filter <stop offset="35%" style="stop-color: #f9f8c8"/>
<stop offset="100%" style="stop-color: #e17851;"/>
</linearGradient>
</defs>`,
Plot.areaY(data.filter(d=> d.year === '2010'),
Plot.binX(
{
y: "count",
},
{
x: "temperature",
fill: "url(#gradient)",
curve: "basis",
offset: "center"
}
)),
Plot.ruleX([d3.mean(data, (d) => d.temperature)], { stroke: "#808080" }),
Plot.textX([d3.mean(data, (d) => d.temperature)], {
y: 110,
textAnchor: "start",
text: (d) => `Avg. temp. 1981-2023: ${d3.format(".1f")(d)}ºC`,
fontWeight: "bold",
dx: 5
}),
]
})
data = {
const dataZ = [];
raw
.filter((d) => d.name.length === 4)
.forEach((yearData) => {
const decade = Math.floor(yearData.name / 10) * 10 + "s";
yearData.data.forEach((temperature, index) => {
if (temperature !== null) {
const date = new Date(
d3.max(raw.map((d) => parseInt(d.name))) + 1,
0,
index
);
dataZ.push({
index,
year: yearData.name,
date,
decade,
temperature
});
}
});
});
return dataZ;
}
dataSummary = {
const dataZ = [];
const meanData = raw.find((d) => d.name === "1982-2011 mean").data;
const plusData = raw.find((d) => d.name === "plus 2σ").data;
const minusData = raw.find((d) => d.name === "minus 2σ").data;
meanData.forEach((mean, index) => {
if (mean !== null) {
const date = new Date(
d3.max(raw.map((d) => parseInt(d.name))) + 1,
0,
index
);
dataZ.push({
date,
mean,
plus: plusData[index] !== null ? plusData[index] : undefined,
minus: minusData[index] !== null ? minusData[index] : undefined
});
}
});
return dataZ;
}
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.
