Data Scientist, Author, DataVis, Educator, Speaker, Public Service @ClintonBrownley
https://cbrownley.github.io
Public
Edited
Mar 15, 2021
vlChart = {
// Leave the following data section as-is
////////////////////////////////////////////////////////////////////////////
let data = weatherByDate;
let weatherAttrib = attrLabels[attrSelected];
const maxDateWithValue = new Date(currentDate);
const aWeekBeforeMax = maxDateWithValue - 7 * 24 * 3600000;
const thresholdBeforeMax = maxDateWithValue - threshold * 24 * 3600000;
data = weatherByDate.map(d => ({
...d,
Confidence:
d.key < thresholdBeforeMax
? 1
: (maxDateWithValue - d.key) / (threshold * 24 * 3600000) / 2
}));
////////////////////////////////////////////////////////////////////////////
const base = vl.markBar({ tooltip: true }).encode(
// TO-DO: Encode the date on the x-axis
// (in the dataset weatherByDate, the date attribute is named 'key')
vl.x()
,
// TO-DO: Encode the weather attribute value on the y-axis
// (in the dataset weatherByDate, the weather value attribute is named 'value')
vl.y()
,
// Leave the following opacity section as-is
// This section produces the effect of data appearing left-to-right during the animation
////////////////////////////////////////////////////////////////////////////
vl
.opacity()
.fieldQ("Confidence")
.scale({ domain: [0, 1], range: [0, 1] })
.legend(
width > 600
? {
format: "%",
symbolFillColor: "firebrick",
symbolStrokeColor: "firebrick"
}
: null
)
);
////////////////////////////////////////////////////////////////////////////
const bar = base.encode(
// TO-DO: Add a quantitative color scale encoding for the weather attribute value
vl.color()
);
// Leave the following line section as-is
// This section produces the firebrick rolling average line
////////////////////////////////////////////////////////////////////////////
const line = base
.markLine({
color: "firebrick",
size: 2,
interpolate: "basis"
})
.transform(vl.window(vl.mean("value").as("rolling_mean")).frame([-days, 0]))
.encode(
vl.y().fieldQ("rolling_mean"),
vl.color().value("firebrick")
);
////////////////////////////////////////////////////////////////////////////
return
// TO-DO: Add a layer with the bar and line variables
// TO-DO: Add the data
// TO-DO: Add a chart height
.width(width - (width > 600 ? 200 : 50)) // Leave this line as-is
}
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.
