index.qmd

{{< include _load-data-overview.qmd >}}
{{< include components/_style.qmd >}}
{{< include components/_tol.qmd >}}
{{< include components/_dropdown-input.qmd >}}

```{ojs prelims}
//| output: false

Plot = import("https://esm.sh/@observablehq/plot@0.6.17")

overview = transpose(overview_)

task_info = ({
      "hearts-and-flowers": "Hearts & Flowers",
"same-different-selection": "Same & Different",
             "memory-game": "Memory",
               "egma-math": "Math",
        "matrix-reasoning": "Pattern Matching",
         "mental-rotation": "Shape Rotation",
                    "trog": "Sentence Understanding",
                   "vocab": "Vocabulary",
          "theory-of-mind": "Stories",
                      "pa": "Language Sounds",
                     "sre": "Sentence Reading",
                     "swr": "Word Reading",
})

ov = overview.map(obj => ({
  ...obj,
  task_label: task_info[obj.task_id],
  date: d3.utcParse("%Y-%m-%d")(obj.date),
  score: obj.scored ? obj.run_id_hash : null
}))
```


:::: {.column-screen-inset}

```{ojs diplay-vals}
displayScheme = [
  [204, 102, 119], // red
  [221, 204, 119], // yellow
  //[153, 153,  51], // yellow-green 17,119,51
  [ 17, 119,  51], // green
  [ 68, 170, 153], // teal
  [136, 204, 238], // light blue
  [ 51,  34, 136], // dark blue
  [170,  68, 153], // magenta
]

//['#CC6677', '#332288', '#DDCC77', '#117733', '#88CCEE','#882255', '#44AA99', '#999933', '#AA4499']

displayConfig = ([
  { index: 0, property: "dataset",      label: "Datasets",     icon: "archive"        },
  { index: 1, property: "team",         label: "Teams",        icon: "geo"            },
  { index: 2, property: "language",     label: "Languages",    icon: "translate"      },
  { index: 3, property: "task_id",      label: "Tasks",        icon: "ui-checks-grid" },
  { index: 4, property: "user_id_hash", label: "Participants", icon: "person-arms-up" },
  { index: 5, property: "score",        label: "Scores",       icon: "bullseye" },
  { index: 6, property: "run_id_hash",  label: "Assessments",  icon: "clipboard-data" },
])

displayBox = ({ index, property, label, icon }) => {
  const values = new Set(ov.map(d => d[property]))
  const color = displayScheme[index]
  const color_str = `${color[0]}, ${color[1]}, ${color[2]}`
  const borderColor = `rgb(${color_str})`
  const backgroundColor = `rgba(${color_str}, 0.4)`
  return html`<div class="callout callout-style-default callout-note no-icon callout-empty-content callout-titled callout-display" style="border-left-color: ${borderColor};">
    <div class="callout-header d-flex align-content-center" style="background-color: ${backgroundColor};">
      <div class="callout-title-container flex-fill">
        <span class="display-box">
          <span class="display-icon"><i class="bi-${icon}" role="img" aria-hidden="true"></i></span>
          <span class="display-content">
            <span class="display-var">${label}</span>
            <span class="display-val">${values.size}</span>
          </span>
        </span>
      </div>
    </div>
  </div>`
}

boxes = displayConfig.map(displayBox)
html`<div class="display-box-container">${boxes}</div>`
```


```{ojs shared}
//| output: false

// earliest date included by the recency filter
min_date = (days) => d3.utcDay.offset(d3.utcDay(new Date()), 1 - days)

// overview data filtered by the recency dropdown, shared by both plots
ovf = recency === null ? ov : ov.filter(d => d.date >= min_date(recency))

// distinct count of a variable over some rows, skipping rows where it is
// missing -- score is null for unscored runs, which would otherwise count as a
// value of its own and add one to every group
n_distinct = (rows, v) => new Set(rows.filter(d => d[v] !== null).map(d => d[v])).size

// display label of the currently selected value of a dropdown
opt_label = (opts, value) => [...opts].find(([label, v]) => v === value)[0]

scheme = tol.QualMuted // color scheme
default_color = scheme[1] // default color when there's no grouping variable
plt_color = group_var || default_color // plot color variable

// bootstrap icon for each radio option, reusing the display box icons above.
// labels are unique across the inputs, except dataset/team/language/task which
// mean the same thing in both places
opt_icons = ({
  "Assessments": "clipboard-data",
  "Scores": "bullseye",
  "Participants": "person-arms-up",
  "Dataset": "archive",
  "Team": "geo",
  "Language": "translate",
  "Task": "ui-checks-grid",
  //"None": "slash-circle",
  "Age": "people",
  "Date administered": "calendar-event",
  //"7 days": "calendar3",
  //"30 days": "calendar3",
  //"90 days": "calendar3",
  //"365 days": "calendar3",
  //"Anytime": "infinity"
})

// radio option rendered with its icon, falling back to text alone
icon_label = ([label]) => opt_icons[label]
  ? html`<span><i class="bi bi-${opt_icons[label]} opt-icon"></i>${label}</span>`
  : html`<span>${label}</span>`

// shown in place of a plot when the filters exclude everything
no_data = () => html`<p class="filter-error"><i class="bi bi-exclamation-triangle"></i> No data selected</p>`
```

::::: {layout="[ [1,3,3] ]"}

:::: {.panel-input}

::: {.side-inputs}

::: {.filters-container}

```{ojs input-count}
count_opts = new Map([["Assessments", "run_id_hash"], ["Scores", "score"], ["Participants", "user_id_hash"]])
viewof count_var = Inputs.radio(count_opts, { label: "Count of", value: "run_id_hash", format: icon_label })
```

```{ojs input-group}
group_opts = new Map([["Dataset", "dataset"], ["Team", "team"], ["Language", "language"], ["Task", "task_label"], ["None", null]])
viewof group_var = Inputs.radio(group_opts, { label: "Grouped by", value: "language", format: icon_label })
```

```{ojs input-recency}
recency_opts = new Map([["7 days", 7], ["30 days", 30], ["90 days", 90], ["365 days", 365], ["Anytime", null]])
viewof recency = Inputs.radio(recency_opts, { label: "Collected within past", value: null, format: icon_label })
```

:::
:::
::::

::: {.plot-container}
::: {.plot-inputs}

```{ojs input-for-each}
y_var_opts = new Map([["Dataset", "dataset"], ["Team", "team"], ["Language", "language"], ["Task", "task_label"]])
viewof y_var = Inputs.radio(y_var_opts, { label: "For each", value: "task_label", format: icon_label })
```

:::

```{ojs bar-plot}
marginLeft = 152

ovf.length === 0 ? no_data() : Plot.plot({
  style: { fontFamily: "var(--sans-serif)", fontSize: 12 },
  width: 0.43 * width,
  marginLeft: marginLeft,
  marginTop: 10,
  marginBottom: 40,
  x: { label: `${opt_label(count_opts, count_var)} count`, axis: "bottom", line: true },
  y: { label: opt_label(y_var_opts, y_var), labelAnchor: "top", tickSize: 0, tickPadding: 2 },
  color: {
    range: scheme,
    legend: group_var !== null,
    marginLeft: marginLeft,
    className: "color-legend"
  },
  marks: [
    Plot.barX(ovf, Plot.groupY(
      { x: g => n_distinct(g, count_var) },
      { y: y_var, fill: plt_color, sort: { y: "x", reverse: true, }, inset: 1 }
    )),
    Plot.textX(ovf, Plot.stackX(Plot.groupY(
      { x: g => n_distinct(g, count_var), text: g => n_distinct(g, count_var) },
      { y: y_var, z: plt_color, fill: "white" }
    ))),
  ]
})
```

:::

::: {.plot-container}
::: {.plot-inputs}

```{ojs input-binned-by}
hist_bin_opts = new Map([["Age", "age"], ["Date administered", "date"]])
viewof hist_bin = Inputs.radio(hist_bin_opts, { label: "Binned by", value: "age", format: icon_label })
```

:::

```{ojs hist-plot}
// a participant has one age and date per run, so there is no single value to
// bin them by -- say so rather than plot something misleading
count_var === "user_id_hash"
  ? html`<p class="filter-error"><i class="bi bi-info-circle"></i> Participants can't be binned by age or date, since each participant has multiple assessments</p>`
  : ovf.length === 0 ? no_data() : Plot.plot({
      style: { fontFamily: "var(--sans-serif)", fontSize: 12 },
      width: 0.43 * width,
      height: 300,
      marginTop: 20,
      marginBottom: 50,
      x: { label: opt_label(hist_bin_opts, hist_bin), line: true },
      y: { label: "Count" },
      color: {
        legend: group_var !== null,
        range: scheme,
        className: "color-legend"
      },
      marks: [
        Plot.rectY(ovf, Plot.binX(
          { y: g => n_distinct(g, count_var) },
          { fill: plt_color, x: { value: hist_bin } }
        )),
      ]
    })
```

:::

:::::

::::