31:Tc74,viewof prevalenceChart = { /* The Vega Lite JS API used here is a definitely underdocumented and a bit * unusual. It takes some trial and error and getting used to. The Vega * Lite JSON spec is much better documented and, IMO, easier to understand * what's going on. If authoring using the JS API becomes a burden, we can * jump ship to the JSON spec by starting from the one generated by the JS * API's .toString() method. * * -trs, 25 June 2021 */ // Selection parameters let timeInterval = vl.selectInterval() .encodings("x") .bind("scales") .zoom("wheel![event.shiftKey]"); /* XXX FIXME: There's a bug lurking between these two selections/signals. * If you click the black area of the bottom panel, it disables (grays out) * the legend of the top panel. The interaction becomes weirder if you do * that after first selecting a pathogen from the legend. * -trs, 29 June 2021 */ let highlightedPathogen = vl.selectPoint() .encodings("color") .on("mouseover") .clear("mouseout"); let selectedPathogen = vl.selectPoint() .encodings("color") .bind("legend") .toggle("true"); // Encoding channels let time = vl.x() .fieldT("weekStart") .title(null); let prevalence = vl.y() .fieldQ("prevalence") .title("Prevalence") .axis({ format: ".0%" }); let legend = width < 700 ? { orient: "top", columns: Math.min(Math.floor(width / 150), 3), direction: "vertical" } : { orient: "right" }; let pathogen = vl.color() .fieldN("label") .scale({ /* My understanding is that .scale({range: vl.field("color")}) should * Just Work, but it didn't and I moved on to what I knew would. * -trs, 29 June 2021 */ domain: Object.values(pathogens).map(d => d.label), range: Object.values(pathogens).map(d => d.color), }) .legend(legend) .title("Pathogen") .if(vl.not(highlightedPathogen), vl.value("lightgrey")); let tooltip = vl.tooltip() .field("tooltip"); let order = vl.order() .fieldQ("order"); // Marks let displayPanel = vl.markArea() .params(timeInterval, highlightedPathogen, selectedPathogen) .encode( time, prevalence, pathogen, tooltip, order, ) .transform(vl.filter(selectedPathogen)) .width(width); let baseSelectorPanel = vl.markArea() .encode( time, prevalence.aggregate("sum").title(null) ) .width(width) .height(100); // See // for why two layers are necessary. let selectorPanel = vl.layer( baseSelectorPanel .params(timeInterval) .encode(vl.color().value("lightgrey")), baseSelectorPanel .transform(vl.filter(selectedPathogen)) .encode(vl.color().value("black")), ); // Putting it all together return vl.vconcat(displayPanel, selectorPanel) .data(prevalenceChartData) .resolve({ scales: { x: "shared" }}) .padding({ top: 5, bottom: 5, left: 0, right: 0 }) .autosize({ type: "fit-x", contains: "padding" }) .render(); }32:Tb71,viewof specimensChart = { /* The Vega Lite JS API used here is a definitely underdocumented and a bit * unusual. It takes some trial and error and getting used to. The Vega * Lite JSON spec is much better documented and, IMO, easier to understand * what's going on. If authoring using the JS API becomes a burden, we can * jump ship to the JSON spec by starting from the one generated by the JS * API's .toString() method. * * -trs, 25 June 2021 */ // Selection parameters let zoom = vl.selectInterval() .encodings("x") .bind("scales") .zoom("wheel![event.shiftKey]"); // XXX FIXME: Same weird interaction bug as in the pathogens chart exists here too. let highlightedChannel = vl.selectPoint() .encodings("color") .on("mouseover") .clear("mouseout"); let selectedChannel = vl.selectPoint() .encodings("color") .bind("legend") .toggle("true"); // Encoding channels let time = vl.x() .fieldT("weekStart") .title("Week of"); let specimensCount = vl.y() .fieldQ("specimens") .title("Specimens per week") .axis({ format: ",d" }); let specimensPercent = vl.y() .fieldQ("proportion_of_week") .title("Specimens per week") .scale({ domain: [0, 1] }) .axis({ format: "%" }); let legend = width < 700 ? { orient: "top", columns: Math.min(Math.floor(width / 150), 4), direction: "vertical" } : { orient: "right" }; let collectionChannel = vl.color() .fieldN("collection_channel") .scale({ /* My understanding is that .scale({range: vl.field("color")}) should * Just Work, but it didn't and I moved on to what I knew would. * -trs, 29 June 2021 */ domain: Object.keys(collectionChannels), range: Object.values(collectionChannels).map(c => c.color), }) .legend(legend) .title("Collection channel") .if(vl.not(highlightedChannel), vl.value("lightgrey")); let order = vl.order() .fieldQ("order") .sort("descending"); let tooltip = vl.tooltip() .field("tooltip"); // Marks let topPanel = vl.markArea() .params(zoom, highlightedChannel, selectedChannel) .encode( time.title(null), collectionChannel, specimensCount, order, tooltip, ) .transform(vl.filter(selectedChannel)) .width(width); let bottomPanel = vl.markArea() .params(zoom, highlightedChannel, selectedChannel) .encode( time.title(null), collectionChannel, specimensPercent, order, tooltip, ) .transform(vl.filter(selectedChannel)) .width(width) .height(100); // Putting it all together return vl.vconcat(topPanel, bottomPanel) .data(specimensChartData) .resolve({ scales: { x: "shared" }}) .padding({ top: 5, bottom: 5, left: 0, right: 0 }) .autosize({type: "fit-x", contains: "padding"}) .render(); }33:T457,pathogens = ({ // Areas stack bottom up in order from least → greatest; e.g. Rhinovirus at 0 is on bottom. "Human_coronavirus.2019": {order: 11, color: "#d62728", label: "SARS-CoV-2"}, "Influenza.A.H3N2": {order: 10, color: "#6b6ecf", label: "Influenza A (H3N2)"}, "Influenza.A.H1N1": {order: 9, color: "#5254a3", label: "Influenza A (H1N1)"}, "Influenza.B": {order: 8, color: "#9c9ede", label: "Influenza B"}, "RSV.A": {order: 7, color: "#2ca02c", label: "RSV A"}, "RSV.B": {order: 6, color: "#98df8a", label: "RSV B"}, "Human_coronavirus": {order: 5, color: "#e377c2", label: "Seasonal coronavirus"}, "Adenovirus": {order: 4, color: "#8c564b", label: "Adenovirus"}, "Enterovirus": {order: 3, color: "#fdbf6f", label: "Enterovirus"}, "Human_metapneumovirus": {order: 2, color: "#e6ab02", label: "Human metapneumovirus"}, "Human_parainfluenza": {order: 1, color: "#ffff99", label: "Human parainfluenza"}, "Rhinovirus": {order: 0, color: "#9edae5", label: "Rhinovirus"}, })34:[{"id":"8f0882e50022fbf40d87562309391f4e21fbc4da79529209edf88a691229217a9776a0cc3a390252f3e9db87d1c1cc7b03ed50241b88045a1a96699c7eb2107f","href":"https://static.observableusercontent.com/files/8f0882e50022fbf40d87562309391f4e21fbc4da79529209edf88a691229217a9776a0cc3a390252f3e9db87d1c1cc7b03ed50241b88045a1a96699c7eb2107f","name":"specimens.csv","type":"text/csv","lastModified":1625098037019.204,"size":16086}] 2f:{"title":"Seattle Flu Study charts","cells":[{"id":907,"value":"md`# Seattle Flu Study charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`## Pathogen prevalence`","pinned":false,"hidden":false,"mode":"ojs"},{"id":859,"value":"prevalenceDescription = md`\nThe panels below show the percent of specimens with a detected respiratory pathogen, aggregated by week across [Seattle Flu Study](https://seattleflu.org) collection strategies. These results include both community and clinical samples, some of which are a part of contact testing. Proportions are not fully representative of what is happening across King County.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1315,"value":"md`\nTODO: Fix click-to-select bug (see comments in code below)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"prevalenceCaption = md`\nHover over the top panel's areas to highlight individual pathogens and see precise percentages, fractions, and week number.\n\nClick a pathogen name in the legend to select and toggle display of just that pathogen. More than one pathogen may be selected.\n\nHold shift and scroll the mouse wheel within either panel to zoom the time period displayed. Click and drag to shift the displayed time period earlier or later. Double click to reset the period to the full time range.\n\nData for the chart is updated daily and available at <${prevalenceUrl}>. Data was last updated ${prevalence.lastModified}. Complete code for the chart is available as [an Observable notebook](https://observablehq.com/@brotmanbatyinstitute/seattle-flu-study-charts).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1131,"value":"specimensDescription = md`\n## Specimens\n\nThe panels below show the volume of specimens tested for the respiratory pathogens above, aggregated by week across [Seattle Flu Study](https://seattleflu.org) collection strategies.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1403,"value":"md`\nTODO: Fix click-to-select bug (see comments in code below)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1227,"value":"specimensCaption = md`\nHover over the areas in either panel to highlight individual collection channels and see precise counts, percentages, and week number.\n\nHold shift and scroll the mouse wheel within either panel to zoom the time period displayed. Click and drag to shift the displayed time period earlier or later. Double click to reset the period to the full time range.\n\nData for the chart is updated daily and available at <${specimensUrl}>. Data was last updated ${specimens.lastModified}. Complete code for the chart is available as [an Observable notebook](https://observablehq.com/@brotmanbatyinstitute/seattle-flu-study-charts).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"md`## Pathogen prevalence`","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"prevalenceUrl = \"https://data.seattleflu.org/prevalence.csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"prevalence = parseCsv(prevalenceUrl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"prevalenceChartData =\n prevalence.data\n .map(d => ({\n ...d,\n prevalence: d.present / d.tested,\n weekStart: isoWeekStart(d.week),\n }))\n .map(d => ({ ...d, ...pathogens[d.organism] }))\n .map(d => ({ ...d, tooltip: prevalenceTooltip(d) }))\n .filter(d => d.week !== currentWeek)","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"Inputs.table(prevalenceChartData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":803,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"prevalenceTooltip = d => {\n let pct = d3.format('.0%');\n let n = d3.format(',');\n \n return `${pct(d.prevalence)} (${n(d.present)}/${n(d.tested)}) ${d.label} during ${d.week}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":874,"value":"md`## Specimens`","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"specimensUrl = \"https://data.seattleflu.org/specimens.csv\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":888,"value":"specimens = parseCsv(specimensUrl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":900,"value":"specimensChartData = \n specimens.data\n .map(d => ({\n ...d,\n weekStart: isoWeekStart(d.week),\n }))\n .map(d => ({ ...d, ...collectionChannels[d.collection_channel] }))\n .map(d => ({ ...d, tooltip: specimensTooltip(d) }))\n .filter(d => d.week !== currentWeek)","pinned":true,"hidden":false,"mode":"ojs"},{"id":890,"value":"Inputs.table(specimensChartData.map(flatten))","pinned":true,"hidden":false,"mode":"ojs"},{"id":929,"value":"collectionChannels = ({\n \"Public space\": { order: 1, color: \"#8da0cb\" }, \n \"College campus\": { order: 2, color: \"#fc8d62\" },\n \"Swab-n-send\": { order: 3, color: \"#a6d854\" },\n \"Clinical residuals\": { order: 4, color: \"#e78ac3\" },\n \"Shelter\": { order: 5, color: \"#e5c494\" },\n \"City testing sites\": { order: 6, color: \"#ffd92f\" },\n \"Childcare\": { order: 7, color: \"#66c2a5\" },\n \"Other\": { order: 8, color: \"#b3b3b3\" },\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":935,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1336,"value":"specimensTooltip = d => {\n let pct = d3.format('.0%');\n let n = d3.format(',');\n \n return `${pct(d.proportion_of_week)} (${n(d.specimens)}) ${d.collection_channel} during ${d.week}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":877,"value":"md`## Miscellaneous`","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"parseCsv = async (url) => {\n let response = await fetch(url);\n let body = await response.text();\n\n return {\n data: d3.csvParse(body, d3.autoType),\n lastModified: new Date(response.headers.get(\"Last-Modified\")),\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"isoWeek = \"%G-W%V\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"isoWeekStart = d3.timeParse(isoWeek);","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"currentWeek = d3.timeFormat(isoWeek)(new Date());","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1174,"value":"flatten = require(\"flat@5.0.2/index.js\").catch(() => window.flatten)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}