data.qmd

---
grid:
  sidebar-width: 0px
  body-width: 1600px
  margin-width: 0px
---

```{r}
library(dplyr)
library(stringr)
library(forcats)
library(glue)
```

```{r}
# source("load_data.R")
dataset <- redivis::user("datapages")$dataset("Numberbank")
hc <- dataset$table("highest count")$to_tibble()
kld <- dataset$table("knower level")$to_tibble()
td <- dataset$table("trials")$to_tibble()

# replacement language values
language_recode <- list(
  "Arabic" = "Saudi",
  "French" = "Français",
  "English" = c("Anglais", "English (India)", "English (US)", "English/Portugese", "English/Spanish"),
  "Slovenian (dual)" = "Slovenian_dual",
  "Slovenian (non-dual)" = c("Slovenian", "Slovenian_nonDual", "Serbian/Slovenian")
)

languages_countries <- kld |>
  mutate(# recode + sort languages
         lang = language |> fct_collapse(!!!language_recode) |> fct_relevel(sort),
         # combination of language and country
         language_country = paste(lang, country, sep = "\n")) |>
  distinct(language, lang, country, language_country) |>
  group_by(lang) |>
  mutate(language_countries = paste(unique(country), collapse = ", "),
         language_countries = glue("{lang} – {language_countries}")) |>
  group_by(country) |>
  mutate(country_languages = paste(unique(lang), collapse = ", "),
         country_languages = glue("{country} – {country_languages}")) |>
  ungroup()

kl_data <- kld |>
  filter(!is.na(kl) | !is.na(hc)) |> # remove rows with both kl and hc NA
  left_join(languages_countries) |> mutate(language = lang) |> select(-lang) |>
  arrange(language, kl, age)

trial_data <- td |>
  mutate(response = if_else(response > 10, 10, response)) |> # cap responses at 10
  left_join(languages_countries) |> mutate(language = lang) |> select(-lang)
  # mutate(# recode + sort languages
  #        language = language |> fct_collapse(!!!language_recode) |> fct_relevel(sort),
  #        # combination of language and country
  #        language_country = paste(language, country, sep = "\n"))
```

```{r}
ojs_define(hc = hc)
ojs_define(kl_data = kl_data)
ojs_define(trial_data = trial_data)
```

```{ojs}
Plot = import("https://esm.sh/@observablehq/plot@0.6.13")
import {interval} from '@mootari/range-slider' // two ended slider

fontFamily = "Source Sans Pro"
fontSize = ".7rem"
age_label = "Age (months)"
filter_error = '<p class="filter-error"><i class="bi bi-exclamation-triangle"></i> No data found for selected filters</p>'

kl = transpose(kl_data)
tr = transpose(trial_data)
```

::: {.panel-sidebar}

__Facet by...__
```{ojs}
// facets
viewof fs = Inputs.checkbox(["language", "country", "method"],
                            {value: ["language"]})
```

```{ojs}
fx = fs.includes("method") ? "method" : null // fx = "method" or null
fy = fs.filter(x => x !== "method").join("_") // fy = "language", "country", "language_country", null
```

__Filter by...__
```{ojs}
// age filter
viewof ages = interval([d3.min(kl_data.age), d3.max(kl_data.age)],
                       {step: 1, label: "Age (months)"})

// kl filter
cp_sort = (a, b) => a === "CP-knower" ? 1 : b === "CP-knower" ? -1 : a.localeCompare(b);
kl_vals = Array.from(new Set(kl_data.kl)).sort(cp_sort) // options
kl_defs = kl_vals.filter(s => /^[123C]/.test(s)) // default
viewof kls = Inputs.select(kl_vals, {label: "Knower levels", multiple: true, value: kl_defs})

// kl subset toggle
viewof kl_sub = Inputs.checkbox(["Group non-CP-knowers together"])
kl_y = kl_sub.length ? "kl_subset" : "kl"

// language filter
lang_vals = Array.from(new Set(kl_data.language_countries)).sort() // options
lang_defs = lang_vals.filter(s => /English/.test(s))
viewof langs = Inputs.select(lang_vals, {label: "Languages", multiple: true, value: lang_defs})

// country filter
country_vals = Array.from(new Set(kl_data.country_languages)).sort() // options
country_defs = country_vals.filter(s => /English/.test(s))
viewof countries = Inputs.select(country_vals, {label: "Countries", multiple: true, value: country_defs})

// dataset filter
dataset_vals = Array.from(new Set(kl_data.dataset_id)).sort() // options
dataset_defs = dataset_vals // default
viewof datasets = Inputs.select(dataset_vals, {label: "Datasets", multiple: true, value: dataset_defs})
```

```{ojs}
// filter data using inputs (except age)
klf = kl.filter(d => langs.includes(d.language_countries))
        .filter(d => countries.includes(d.country_languages))
        .filter(d => datasets.includes(d.dataset_id))
        .filter(d => kls.includes(d.kl))
        .filter(d => d.age >= ages[0] && d.age <= ages[1])

// possible kl values in filtered data
klfv = Array.from(new Set(klf.map(d => d[kl_y]))).sort(cp_sort)

kl_found = klf.length > 0
```

:::

::: {.panel-fill}

::: {.panel-tabset}

## Give-N

::: {.panel-tabset .nav-pills}

### Plots -- Knower levels

::: {.disclaimer}
{{< include md/disclaimer-kl.md >}}
:::

```{ojs}
html`${kl_found ? '' : filter_error}`
```

```{ojs}
// sample size plot
ss_margin = 180
kl_found ? Plot.plot({
  title: "Counts of knower level in each dataset",
  style: { fontFamily: fontFamily, fontSize: fontSize },
  marginLeft: ss_margin,
  color: { legend: true, domain: klfv, marginLeft: ss_margin},
  x: { label: "", labelAnchor: "center", labelArrow: "none", axis: "top" },
  y: { label: "Dataset", labelAnchor: "top", tickSize: 0, tickPadding: 2 },
  marks: [
    Plot.barX(klf, Plot.groupY(
      { x: "count" },
      { fill: kl_y, y: "dataset_id", inset: 1, sort: { y: "x", reverse: true, } }
    )),
    Plot.textX(klf, Plot.stackX(Plot.groupY(
      { x: "count", text: "count" },
      { y: "dataset_id", z: kl_y, fill: "white" }
    ))),
  ]
}) : html``
```

```{ojs}
// boxplot
kl_found ? Plot.plot({
  title: "Distribution of knower level over age",
  style: { fontFamily: fontFamily, fontSize: fontSize },
  marginLeft: 60,
  marginRight: 100,
  x: { label: age_label, grid: true, inset: 10, line: true, labelAnchor: "center", labelArrow: "none" },
  y: { label: "Knower level", labelAnchor: "top", tickSize: 0, tickPadding: 2, domain: klfv },
  color: { domain: klfv },
  facet: { label: null },
  marks: [
    Plot.boxX(klf, {
      x: "age",
      y: kl_y,
      fx: fx,
      fy: fy,
      fill: kl_y
    })
  ]
}) : html``
```

```{ojs}
// cumulative probability plot
kl_found ? Plot.plot({
  title: "Cumulative probability of knower level over age",
  style: { fontFamily: fontFamily, fontSize: fontSize },
  marginRight: 100,
  color: { legend: true, domain: klfv },
  x: { label: age_label, grid: true, inset: 10, line: true, labelAnchor: "center", labelArrow: "none" },
  y: { label: "Cumulative probability of knower level", inset: 5, line: true, labelAnchor: "center", labelArrow: "none" },
  facet: { label: null },
  marks: [
    Plot.lineY(klf, Plot.normalizeY("extent", // scale to 0-1
                    Plot.mapY("cumsum", // cumulative sum
                    Plot.binY({ y: "count" }, { // count in each age bin
      x: "age",
      stroke: kl_y,
      fx: fx,
      fy: fy
    }))))
  ]
}) : html``
```

### Data -- Knower levels

<iframe width="100%" height="800" allowfullscreen src="https://redivis.com/embed/tables/yfaq-3ejgcvktz"></iframe>

### Plots -- Items

::: {.disclaimer}
{{< include md/disclaimer-items.md >}}
:::

```{ojs}
trf = tr.filter(d => langs.includes(d.language_countries))
        .filter(d => countries.includes(d.country_languages))
        .filter(d => datasets.includes(d.dataset_id))
        .filter(d => kls.includes(d.kl))
        .filter(d => d.age >= ages[0] && d.age <= ages[1])

tr_found = trf.length > 0
```

```{ojs}
html`${tr_found ? '' : filter_error}`
```

```{ojs}
rc_map = d3.rollup(trf, v => v.length, d => d[kl_y], d => d.query, d => d.response)

rc = Array.from(rc_map, ([kl, kl_responses]) =>
  Array.from(kl_responses, ([query, query_responses]) => 
    Array.from(query_responses, ([response, count]) =>
      ({ kl, query, response, count, total: d3.sum(query_responses.values())})
    ).map(d => ({ ...d, proportion: d.count / d.total }))
  ).flat()
).flat()

tr_found ? Plot.plot({
  title: "Distribution of responses by knower level",
  style: { fontFamily: fontFamily, fontSize: fontSize },
  width: 950,
  height: 120 * rc_map.size,
  marginRight: 100,
  x: { label: "Response" },
  y: { label: "Proportion responses", grid: true, domain: [0, 1] },
  fx: { label: "Query" },
  fy: { label: null, padding: 0.2, domain: klfv },
  color: { domain: klfv },
  marks: [
    Plot.rectY(rc, {
      x: "response",
      y: "proportion",
      fx: "query",
      fy: "kl",
      fill: "kl",
      padding: 0.03
    }),
    Plot.axisX({ facetAnchor: null }),
    Plot.axisY({ facetAnchor: "left", labelAnchor: "center", labelArrow: "none" }),
    Plot.ruleY([0])
  ]
}) : html``
```

### Data -- Items

<iframe width="100%" height="800" allowfullscreen src="https://redivis.com/embed/tables/4dg4-c1jq71v3c"></iframe>

:::

## Highest count

::: {.panel-tabset .nav-pills}

### Plots

::: {.disclaimer}
{{< include md/disclaimer-hc.md >}}
:::

```{ojs}
hcf = klf.filter(s => s.hc)
hc_found = hcf.length > 0
```

```{ojs}
html`${hc_found ? '' : filter_error}`
```

```{ojs}
// sample size plot
hc_found ? Plot.plot({
  title: "Counts in each dataset",
  style: { fontFamily: fontFamily, fontSize: fontSize },
  marginLeft: ss_margin,
  x: { label: "", labelAnchor: "center", labelArrow: "none", axis: "top" },
  y: { label: "Dataset", labelAnchor: "top", tickSize: 0, tickPadding: 2 },
  //x: { axis: "top", label: "Count" },
  //y: { label: "Dataset" },
  marks: [
    Plot.barX(hcf, Plot.groupY(
      { x: "count" },
      { y: "dataset_id", inset: 1, sort: { y: "x", reverse: true, } } //order: "sum"
    )),
    Plot.textX(hcf, Plot.stackX(Plot.groupY(
      { x: "count", text: "count" },
      { y: "dataset_id", fill: "white", } //order: "sum" }
    ))),
  ]
}) : html``
```

```{ojs}
hc_found ? Plot.plot({
  title: "Highest count over age",
  style: { fontFamily: fontFamily, fontSize: fontSize },
  marginRight: 100,
  //color: { legend: true, domain: klfv },
  x: { label: age_label, grid: true, inset: 10, line: true, labelAnchor: "center", labelArrow: "none" },
  y: { label: "Highest count", inset: 5, line: true, labelAnchor: "center", labelArrow: "none" },
  //x: { label: age_label, grid: true, inset: 10 },
  //y: { label: "Highest count", inset: 10 },
  facet: { label: null },
  marks: [
    //Plot.frame(),
    Plot.dot(hcf, {
      x: "age",
      y: "hc",
      fill: "black",
      fx: fx,
      fy: fy
    })
  ]
}) : html``
```

```{ojs}
hc_found ? Plot.plot({
  title: "Distribution of highest count",
  style: { fontFamily: fontFamily, fontSize: fontSize },
  marginRight: 100,
  //color: { legend: true, domain: klfv },
  x: { label: "Highest count", grid: true, inset: 10, line: true, labelAnchor: "center", labelArrow: "none" },
  y: { line: true, labelAnchor: "center", labelArrow: "none" },
  //x: { label: "Highest count", grid: true, inset: 10 },
  //y: { inset: 10 },
  facet: { label: null },
  marks: [
    //Plot.frame(),
    Plot.rectY(hcf, Plot.binX({y: "count"}, {
      x: "hc",
      fx: fx,
      fy: fy
    }))
  ]
}) : html``
```

```{ojs}
// boxplot
hc_found ? Plot.plot({
  title: "Distribution of highest count by knower level",
  style: { fontFamily: fontFamily, fontSize: fontSize },
  marginLeft: 60,
  marginRight: 100,
  x: { label: "Highest count", grid: true, inset: 10, line: true, labelAnchor: "center", labelArrow: "none" },
  y: { label: "Knower level", labelAnchor: "top", tickSize: 0, tickPadding: 2, domain: klfv },
  //x: { label: "Highest count", grid: true, inset: 10 },
  //y: { label: "Knower level", domain: klfv },
  color: { domain: klfv },
  facet: { label: null },
  marks: [
    Plot.boxX(hcf, {
      x: "hc",
      y: kl_y,
      fx: fx,
      fy: fy,
      fill: kl_y
    })
  ]
}) : html``
```

### Data

<iframe width="100%" height="800" allowfullscreen src="https://redivis.com/embed/tables/1ts7-1cm8mteff"></iframe>

:::

:::

:::