2f:null 30:["$","title",null,{"children":"Passenger Car Air Transmission C/C0 Visualization | Ken Lin | Observable"}] 35:T702,md`The research paper ***[Airflows inside passenger cars and implications for airborne disease transmission](https://advances.sciencemag.org/content/7/1/eabe0166)***, [V. Mathai](http://www.varghesemathai.com/), [A. Das](https://engineering.brown.edu/people/asimanshu-das), [J. Bailey](https://www.brown.edu/academics/biomed/departments/pathology/content/jeffrey-bailey-md-phd), [K. Breuer](https://vivo.brown.edu/display/kbreuer) presents results from numerical simulations to assess how the in-cabin microclimate of a car can potentially spread pathogenic species between occupants for a variety of open and closed window configurations. This notebook combines and arranges 3 charts illustrating aerosol air transmission between driver and passenger under 6 window configurations, into a single chart. It becomes easier to see if the driver or the passenger is subject to more transmission in each configuration. - Fig. 1 [Schematic of the model car geometry](https://advances.sciencemag.org/content/advances/7/1/eabe0166/F1.large.jpg) - describes the 6 different window configurations.
> ![Schematic of the model car geometry](https://advances.sciencemag.org/content/advances/7/1/eabe0166/F1.medium.gif) - Fig. 5 [Driver-to-passenger transmission](https://advances.sciencemag.org/content/advances/7/1/eabe0166/F5.large.jpg) - we use only (**B**) C/C₀ bar chart.
> ![Driver-to-passenger transmission](https://advances.sciencemag.org/content/advances/7/1/eabe0166/F5.medium.gif) - Fig. 6 [Passenger-to-driver transmission](https://advances.sciencemag.org/content/advances/7/1/eabe0166/F6.large.jpg) - we use only (**B**) C/C₀ bar chart.
> ![Passenger-to-driver transmission](https://advances.sciencemag.org/content/advances/7/1/eabe0166/F6.medium.gif) `36:T48b,key = { const colors = { domain: [false, true], range: ["lightgray", "skyblue"] } let windows = [] for (let i = 0; i < open.length; i++) { const o = open[i] windows.push({config: o.config, frontRear: "Front", leftRight: "Left", label: "A", open: o.fl}) windows.push({config: o.config, frontRear: "Front", leftRight: "Right", label: "D", open: o.fr}) windows.push({config: o.config, frontRear: "Rear", leftRight: "Left", label: "B", open: o.rl}) windows.push({config: o.config, frontRear: "Rear", leftRight: "Right", label: "C", open: o.rr}) } // https://observablehq.com/@cobus/the-same-chart-in-vega-lite-and-d3 return vl.markCircle() .data(windows) .encode( vl.column().fieldO("config").title("Window Configuration"), vl.y().fieldO("frontRear").title(null).axis({ticks: false}), vl.x().fieldO("leftRight").title(null).axis(false), vl.size().value(200), vl.color().fieldN("open").title("Window Open").scale(colors) ) // https://stackoverflow.com/questions/46515327/how-do-i-remove-the-border-around-a-vega-lite-plot .config({style: {cell: {stroke: "transparent"}}}) }37:T529,md`This paper came to my attention through nytimes.com Jan 16, 2021 ***[How to (Literally) Drive the Coronavirus Away](https://www.nytimes.com/2021/01/16/health/coronavirus-transmission-cars.html)***. I found the back to front air flow surprising: > *In their initial analysis, the researchers found that the way the air flows around the outside of the moving car creates a pressure gradient inside the car, with the air pressure in the front slightly lower than the air pressure in the back. As a result, air circulating inside the cabin tends to flow from the **back of the car to the front**.* Then there's these statements about configuration 3 (my emphasis): > *... an even better strategy was to open the windows that are opposite each occupant. That configuration allows fresh air to flow in through the **back left** window and out through the **front right** window and helps create a barrier between the driver and the passenger.* > *“It’s like an air curtain,” Dr. Mathai said. “It flushes out all the air that’s released by the passenger, and it also creates a strong wind region in between the driver and the passenger.”* Mentally context switching across the 3 original figures to understand what outcomes are from the other window configurations is what prompted authoring this notebook. `38:[] 33:{"id":"a95a1ac24a7ca962","slug":"passenger-car-air-transmission-c-c0visualization","title":"Passenger Car Air Transmission C/C0 Visualization","thumbnail":"99a4b1ea30d0ec360e1cafe58d7cc45125493d60928d4be4629e8cfd7073d6e8","access_level":"public","create_time":"$D2021-01-18T04:24:30.542Z","update_time":"$D2021-09-01T13:15:44.513Z","view_time":null,"first_public_time":"$D2021-01-19T00:16:28.305Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"64f6eb33d0fa7b2c","login":"kenklin","name":"Ken Lin","avatar_url":"https://avatars-next.observableusercontent.com/dc044f989ccfe50288beb12f4bcd9a4b9d871ca42795f8ab0929221f3f9ec28a","tier":"starter_2024"},"version":613,"publish_version":613,"role":null,"authored":false,"authors":[{"type":"individual","id":"b6845e294a885c34","login":"kenklin","name":"Ken Lin","avatar_url":"https://avatars-next.observableusercontent.com/dc044f989ccfe50288beb12f4bcd9a4b9d871ca42795f8ab0929221f3f9ec28a","tier":null}],"members":[{"type":"individual","id":"b6845e294a885c34","login":"kenklin","name":"Ken Lin","avatar_url":"https://avatars-next.observableusercontent.com/dc044f989ccfe50288beb12f4bcd9a4b9d871ca42795f8ab0929221f3f9ec28a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Passenger Car Air Transmission C/C0 Visualization","cells":[{"id":0,"value":"md`# Passenger Car Air Transmission C/C₀ Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`The open window geometry of each of the configurations is encoded in \\`open\\` as follows:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"open = [ // 1 = window is open, 0 = window is closed\n {config: 1, fl: false, rl: false, fr: false, rr: false},\n {config: 2, fl: true, rl: false, fr: false, rr: true},\n {config: 3, fl: false, rl: true, fr: true, rr: false},\n {config: 4, fl: false, rl: true, fr: true, rr: true},\n {config: 5, fl: true, rl: true, fr: true, rr: false},\n {config: 6, fl: true, rl: true, fr: true, rr: true},\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`This is my **totally unofficial** data of *driver-to-passenger* (\\`d2p\\`) and *passenger-to-driver* (\\`p2d\\`) C/C₀ percentages from Fig. 5 and 6 images that were then estimated using [WebPlotDigitizer](https://apps.automeris.io/wpd/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"d2p = \"Driver → Passenger\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"p2d = \"Passenger → Driver\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"unofficial = [\n {config: 1, dir: d2p, pct: 11.0},\n {config: 2, dir: d2p, pct: 5.9},\n {config: 3, dir: d2p, pct: 4.3},\n {config: 4, dir: d2p, pct: 5.4},\n {config: 5, dir: d2p, pct: 2.1},\n {config: 6, dir: d2p, pct: 0.1},\n {config: 1, dir: p2d, pct: 8.5},\n {config: 2, dir: p2d, pct: 4.2},\n {config: 3, dir: p2d, pct: 6.0},\n {config: 4, dir: p2d, pct: 1.7},\n {config: 5, dir: p2d, pct: 2.7},\n {config: 6, dir: p2d, pct: 1.6}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md`## C/C₀ Charts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"md`The [Vega Lite](https://vega.github.io/vega-lite/) library is used to recreate the original C/C₀ bar charts (**B**) from the research paper's Fig. 5 and 6 above. They are presented below, side-by-side, as their 2 separate charts.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"vl.markBar()\n .data(unofficial)\n .height(height)\n .encode(\n vl.column().fieldO(\"dir\").title(\"Transmission Direction\"),\n vl.x().fieldO(\"config\").title(\"Configuration\"),\n vl.y().fieldQ(\"pct\").title(\"C/C₀ %\"),\n vl.color().fieldN(\"dir\").title(\"Transmission Direction\")\n )\n .render() ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`To examine each window \\`config\\` and compare the transmission between driver and passenger, rearranging the \\`column\\` will produce a more useful chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"bars = {\n const colors = {\n domain: [d2p, p2d],\n range: [\"steelblue\", \"darkorange\"]\n }\n return vl.markBar()\n .data(unofficial)\n .height(height)\n .encode(\n vl.column().fieldO(\"config\").title(null).header({labels: false}),\n vl.x().fieldO(\"dir\").title(null).axis({ticks: false, labels: false}),\n vl.y().fieldQ(\"pct\").title(\"C / C₀ %\"),\n vl.tooltip().fieldQ(\"pct\"),\n vl.color().fieldN(\"dir\").title(\"Transmission Direction\").scale(colors)\n )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"bars.render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"md`## Configuration Key`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`It's difficult to remember that configuration 3 is front-right and rear-left window open so this visual key is created. Skyblue conveys an open window.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"key.render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"md`Note: The research paper's heat map is oriented with the front of the cabin along the left edge, which is counter intuitive to some car displays. Therefore this key orients the front of the car on the top edge. This also eliminates the need for ink marking Left / Right.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"md`## Final Consolidated Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"md`When we align the window configuration diagram (\\`key\\`) above the bar chart (\\`bars\\`), we get the following single chart. We can now see:\n- The degree of C/C₀ percentage.\n- Compare the if the driver or passenger is worse off when the other is infected.\n- Quickly see the associated window configuration.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"// https://observablehq.com/@observablehq/layers-facets-concat\nviewof combined = vl.vconcat(key, bars)\n .resolve({scale: {color: \"independent\"}}) // https://vega.github.io/vega-lite/docs/resolve.html\n .config({concat: {spacing: 4}})\n .render();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"md`## Observable Authoring`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"md`Note: If you are somewhat familiar with Vega-Lite, here are Observable [examples](https://observablehq.com/collection/@vega/vega-lite-api) using the Javascript [API](https://vega.github.io/vega-lite-api/api/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 34:"$33:body"