minWidth = 400
chartWidth = width / 2.1 < minWidth ? width : width / 2.1
variantsToShow
deltaDataFiltered
variantPercentPlot = function(variant, smooth = false, facet = false, showLines = "none", showPoints = "for all"){
let variantMetric = smooth ? variant + smoothing : variant;
let metric = smooth ? variant + "_N_Gene" + smoothing : variant + "_N_Gene"
let plotObj = {
marks: [
Plot.frame({strokeWidth: 2, stroke: variantColors.get(variant)}),
Plot.ruleY([1], {strokeDasharray: "2,2"}),
showLines == "for all" ? Plot.line(deltaDataFiltered, {
filter: d => !plantstohighlight.includes(d.Plant),
x: "date",
y: d => d[metric],
stroke: facet ? "#555" : "#aaa",
z: "Plant",
strokeOpacity: facet ? .9 : .5,
}) : null,
["for all", "for highlighted locations only"].includes(showLines) ? Plot.line(deltaDataFiltered, {
filter: d => plantstohighlight.includes(d.Plant),
x: "date",
y: d => d[metric],
r: 5,
stroke: d => plantColors.get(d.Plant),
strokeOpacity: .9,
z: "Plant",
sort: d => d.date
}) : null,
showPoints == "for all" ? Plot.dot(deltaDataFiltered, {
filter: d => !plantstohighlight.includes(d.Plant),
x: "date",
y: d => d[metric],
r: 3,
fill: facet ? "#555" : "#aaa",
fillOpacity: facet ? .9 : .5,
symbol: d => d[metric] < ymax ? "circle" : "triangle",
title: d => d.Plant + "\n" + d.dateformatted + "\n" + variantMetric + " / N gene: " + d3.format(".0%")(d[metric])
}) : null,
["for all", "for highlighted locations only"].includes(showPoints) ? Plot.dot(deltaDataFiltered, {
filter: d => plantstohighlight.includes(d.Plant),
x: "date",
y: d => d[metric],
r: 5,
fill: d => plantColors.get(d.Plant),
fillOpacity: .9,
stroke: "black",
strokeWidth: 1,
symbol: d => d[metric] < ymax ? "circle" : "triangle",
title: d => d.Plant + "\n" + d.dateformatted + "\n" + variant + " / N gene: " + d3.format(".0%")(d[metric])
}) : null
],
y: {
tickFormat: d3.format(".0%"),
domain: [0, ymax],
clamp: true,
label: variantNames.get(variant) + " / N Gene" + (smoothPoints ? " (5-day trimmed mean)" : "")
},
x: {
label: "date of sample taken →"
},
width: chartWidth,
height: chartWidth * .5,
};
if(facet){
plotObj.facet = {
data: deltaDataFiltered,
y: "Plant",
label: null,
marginRight: 24
};
plotObj.fy = {
padding: .2,
tickRotate: 90,
};
plotObj.marginRight = 20;
plotObj.width = Math.min(width / 2.2, 600);
plotObj.height = plantstoshow.length * 220;
};
return Plot.plot(plotObj)
}
parseData = (d) => {
d.datetime = d.Date.replace(' ', 'T')
if (new Date(d.datetime) >= new Date(earliestDate)) {
let r = {
date: timeParse(d.datetime.substring(0, 10)),
dateformatted: d.datetime.substring(0, 10)
};
metrics.forEach((metric) => (r[metric + smoothing] = +d[metric + smoothing]));
metrics.forEach((metric) => (r[metric] = +d[metric]));
r["Plant"] = d.Plant;
return r;
}
}
earliestDate = timeFormat(earliestDateUnformatted)
earliestDateUnformatted = d3.timeDay.offset(new Date(), -(7 * num_weeks))
smoothing = "_trimmed5"
metrics = variantsToShow.reduce(
(p, c) => p.concat([c + '_PMMoV', c + '_N_Gene', c + '_gc_g_dry_weight']),
["N_PMMoV"]
)
deltaData = d3.csv(url, parseData)
deltaDataFiltered[3032]
deltaDataFiltered = deltaData.filter(d => plantstoshow.includes(d.Plant))
d3.csv(url)
plantColors = new Map(Plants.map((d,i) => [d, colors[i]]))
colors = ["#5b859e","#1e395f","#75884b","#1e5a46","#df8d71","#af4f2f","#d48f90","#732f30","#ab84a5","#59385c","#d8b847","#b38711"]
variantColors = new Map(
variantsToShowAndNormalized.map(ob => {
return [ob, metricsMeta[ob].color]
})
)
variantNames = new Map(
variantsToShowAndNormalized.map(ob => {
return [ob, metricsMeta[ob].label]
})
)
variantsToShowAndNormalized =
variantsToShow.concat(variantsToShow.map(a => a + "_PMMoV"))
variantsToShow = [
"Delta_156157",
"Del_143145",
"BA_2_LPPA24S",
"BA_4_ORF1a_Del_141143",
"HV_6970_Del",
"BA_2_75_S_147E_S_152R",
"XBB_bkpt", // XBB
]
Plants = [...new Set(["Palo Alto", "San Jose", "Sunnyvale","Gilroy", "Silicon Valley", "Sacramento", "Oceanside", "CODIGA", "Southeast San Francisco"])]
import { url, cutoffDates, timeFormat, timeParse, metricsMeta } from "6c55536820c54786"
import {textcolor} from "@observablehq/text-color-annotations-in-markdown"
import {addTooltips} from "@mkfreeman/plot-tooltip"
todo: check date handling
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.
