visualizing CR box / HEPA benefits

Community Help
1

I am thinking about simple ways to visualize the benefits of ventilation and filtration with a chart area that also represents a classroom seen in a simple silhouette or diorama-style view.

Inspired by these dynamics:

Core concept is:

  1. minimal code / maximal import
  • reasonably easy for any viewer to quickly ascertain the role of all top-level notebook elements
  • friendly to fork and reuse all or some elements
  • without a lot of scrolling
  • minimap looks crisp: stuff fits, graph not overly bushy (maybe optimizing on graph itself is misguided if reactivity is meant to manage its internal dependencies without much interference, but goal is just to keep minimap in mind as integral part of notebook and worth keeping legible)
  1. interactive chart like the drawing with optional background image
  2. simple selection of exponential decay or other relevant functions
  3. chart foreground fill opacity fades with decay driven by x = T-minutes slider

Future vision:
5. Optionally show the math. Markup equations with hover explanations possible?
6. Animation - maybe get a little weird with this once basics in place, for example:

  • initially just a quick ‘defogging’ of chart on a single 60-minute cycle
  • turn down opacity = ~1 → = ~0 along T=0 → T=60
  • update simple opacity to more complex representations of swirling aerosols/particulates
  • incorporate CO2/bioeffluents in complementary visual channel, gradient or something?
  • get fancy with chart elements with air-quality elements while keeping interaction/animation smooth by using lower-level D3 capabilities like 044 Fifteen silly ways to draw a line / Saneef H. Ansari / Observable
  • show uncertainties intuitively perhaps with dual best-case / worst-case outcome charts
  1. Show a realistic day of class - math and timeline get fancier as:

Any other notebooks or functions I should consider in trying to mock this up without getting too lost or giving up?

2

Sounds like a simple background illustration should be enough?

In terms of structuring a notebook, my approach usually involves creating a “Library” (or “Utilities”, “Helpers”) section early on where I put general-purpose functions. I then start my cells like this:

{
  const {
    foo = 1,
    bar = "baz",
    // ...
  } = {};
  // more code here
}

This is called “destructuring”, and it allows me to specify anything I might consider “configurable” in one place, along with sensible default values (which my also reference other cells).

Later on, I can take this structure and change it to

function myFunction(options = {}) {
  const {
    foo = 1,
    bar = "baz",
    // ...
  } = options;
  // more code here
}

Whenever I find that some piece of code within that function could be considered “self-contained” (i.e., it has clear inputs and outputs and doesn’t rely on state outside of its scope), I turn it into a function and move it into the Library section of my notebook.

1 Like