ManyBabies 4

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

yaml = require("js-yaml")
config_file = FileAttachment("_config.yml").text()
config = yaml.load(config_file)

distinct_cutoff = 10

disc_types = (['string', 'boolean'])
disc_filter = (config?.categorical_vars)
  ? d => config.categorical_vars.includes(d.name)
  : d => disc_types.includes(d.type) && d.numDistinct <= distinct_cutoff && d.numDistinct > 1
disc_vars = vars.filter(disc_filter)
disc_opts = new Map([['', null], ...disc_vars.map(d => [d.label ? d.label : d.name, d.name])])

cont_types = (['integer', 'float', 'date', 'datetime', 'time'])
cont_filter = (config?.numerical_vars)
  ? d => config.numerical_vars.includes(d.name)
  : d => cont_types.includes(d.type) && d.numDistinct > distinct_cutoff
cont_vars = vars.filter(cont_filter)
cont_opts = new Map(cont_vars.map(d => [d.label ? d.label : d.name, d.name]))

x_val = config?.defaults?.x || cont_vars[0].name
y_val = config?.defaults?.y || cont_vars[1].name
color_val = config?.defaults?.color || disc_vars[0].name

viewof x_var = Inputs.select(cont_opts, {value: x_val, label: "X axis"})
viewof y_var = Inputs.select(cont_opts, {value: y_val, label: "Y axis"})
viewof color_var = Inputs.select(disc_opts, {value: color_val, label: "Color"})

default_color = d3.schemeCategory10[0]
plt_color = color_var || default_color

all_vars = [...cont_vars, ...disc_vars]
channels = Object.fromEntries(all_vars.map(k => [k.name, k.name]))

viewof scatter = Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  inset: 8,
   grid: true,
      x: { tickFormat: "" },
  color: { legend: true },
  marks: [
    Plot.dot(d, {
      x: x_var,
      y: y_var,
      stroke: plt_color,
      tip: true,
      channels: channels
    }),
  ]
})

viewof x_hist = Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  width: 640/2,
      x: { tickFormat: "" },
      y: { grid: true },
  marks: [
    Plot.rectY(d, Plot.binX({y: "count"}, {x: x_var, fill: plt_color})),
    Plot.ruleY([0])
  ]
})

viewof y_hist = Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  width: 640/2,
      y: { grid: true },
  marks: [
    Plot.rectY(d, Plot.binX({y: "count"}, {x: y_var, fill: plt_color})),
    Plot.ruleY([0])
  ]
})

html`<div style="display: flex; flex-wrap: wrap; align-items: flex-end;">
 <div style="flex-basis: 25%"> ${viewof y_hist} </div>
 <div style="flex-basis: 50%"> ${viewof scatter} </div>
 <div style="flex-basis: 25%"> ${viewof x_hist} </div>
</div>`

e = transpose(effects_data)

_vars = ({
               lab_id: { label: "Lab"                        },
            condition: { label: "Condition"                  },
               tested: { label: "N tested"                   },
    chose_helper_mean: { label: "Proportion choosing helper" },
         chose_helper: { label: "N choosing helper"          },
             ci_lower: { label: "CI lower"                   },
             ci_upper: { label: "CI upper"                   },
               method: { label: "Method"                     },
   exclusion_eligible: { label: "Exclusion rate"             },
choice_exclusion_rate: { label: "Non-choice rate"            },
         visual_angle: { label: "Visual angle"               },
               //region: { label: "Region"                     },
})

effects_vars = ({
    y: "lab_id",
    x: "chose_helper_mean",
   x1: "ci_lower",
   x2: "ci_upper",
    r: "tested",
   fx: "condition",
  col: effects_color_var,
})


fx_ref = "social"

color_opts = ([
  "condition",
  "method",
  "region",
  "visual_angle",
  "exclusion_eligible",
  "choice_exclusion_rate"
])

effects_channels = Object.fromEntries(Object.entries(effects_vars).map(([k, v]) => [_vars[v].label, v]))
fx_vals = [...new Set(e.map(x => x[effects_vars.fx]))].map(x => ({v: x, ref: x === fx_ref}))
fx_vals_sorted = ([...fx_vals.filter(({ref}) => ref), ...fx_vals.filter(({ref}) => !ref)]).map(x => x.v)

viewof effects_color_var = Inputs.select(color_opts, {label: "Color"})

color_type = vars.filter(v => v.name === effects_color_var)[0].type
color_scheme = disc_types.includes(color_type) ? "observable10" : "viridis"

Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  marginLeft: 150,
  width: 1000,
  x: { label: _vars[effects_vars.x].label, line: true },
  y: { label: _vars[effects_vars.y].label },
  fx: { label: _vars[effects_vars.fx].label, domain: fx_vals_sorted },
  color: {
    label: _vars[effects_vars.col].label,
    legend: effects_vars.col !== effects_vars.fx,
    scheme: color_scheme
  },
  marks: [
    Plot.ruleX([0.5], { stroke: "lightgrey", strokeDasharray: [3, 3] }),
    Plot.ruleY(e, { y: effects_vars.y, stroke: "lightgrey" }),
    Plot.link(e, {
      fx: effects_vars.fx,
      y: effects_vars.y,
      x1: effects_vars.x1,
      x2: effects_vars.x2
    }),
    Plot.dot(e, {
      fx: effects_vars.fx,
      x: effects_vars.x,
      y: effects_vars.y,
      stroke: effects_vars.col,
      fill: effects_vars.col,
      r: effects_vars.r,
      // sort descending by x value within reference level of fx
      sort: {
          y: "data",
          reduce: (dy) => dy.find(v => v[effects_vars.fx] === fx_ref)?.[effects_vars.x],
          order: "descending"
      }
    }),
    Plot.tip(e, Plot.pointerY({
      fx: effects_vars.fx,
      x: effects_vars.x,
      y: effects_vars.y,
      stroke: effects_vars.col,
      channels: effects_channels
    })),
  ]
})