Public
Edited
Jan 30, 2023
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
minWidth = 400
Insert cell
chartWidth = width / 2.1 < minWidth ? width : width / 2.1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
variantsToShow
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
deltaDataFiltered
Insert cell
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)
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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;
}
}
Insert cell
earliestDate = timeFormat(earliestDateUnformatted)
Insert cell
earliestDateUnformatted = d3.timeDay.offset(new Date(), -(7 * num_weeks))
Insert cell
smoothing = "_trimmed5"
Insert cell
metrics = variantsToShow.reduce(
(p, c) => p.concat([c + '_PMMoV', c + '_N_Gene', c + '_gc_g_dry_weight']),
["N_PMMoV"]
)
Insert cell
deltaData = d3.csv(url, parseData)
Insert cell
deltaDataFiltered[3032]
Insert cell
deltaDataFiltered = deltaData.filter(d => plantstoshow.includes(d.Plant))
Insert cell
d3.csv(url)
Insert cell
plantColors = new Map(Plants.map((d,i) => [d, colors[i]]))
Insert cell
colors = ["#5b859e","#1e395f","#75884b","#1e5a46","#df8d71","#af4f2f","#d48f90","#732f30","#ab84a5","#59385c","#d8b847","#b38711"]
Insert cell
variantColors = new Map(
variantsToShowAndNormalized.map(ob => {
return [ob, metricsMeta[ob].color]
})
)
Insert cell
variantNames = new Map(
variantsToShowAndNormalized.map(ob => {
return [ob, metricsMeta[ob].label]
})
)
Insert cell
variantsToShowAndNormalized =
variantsToShow.concat(variantsToShow.map(a => a + "_PMMoV"))
Insert cell
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
]
Insert cell
Plants = [...new Set(["Palo Alto", "San Jose", "Sunnyvale","Gilroy", "Silicon Valley", "Sacramento", "Oceanside", "CODIGA", "Southeast San Francisco"])]
Insert cell
import { url, cutoffDates, timeFormat, timeParse, metricsMeta } from "6c55536820c54786"
Insert cell
import {textcolor} from "@observablehq/text-color-annotations-in-markdown"

Insert cell
import {addTooltips} from "@mkfreeman/plot-tooltip"
Insert cell
todo: check date handling
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more