Palmer Penguins

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

yaml = import("https://esm.run/js-yaml")

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

distinct_cutoff = 10

// variable's label if it has one, otherwise its name
var_label = name => vars.find(v => v.name === name)?.label || name

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]))

// with a legend, Plot wraps the chart in a <figure>, which gets a bottom margin
// from Bootstrap; the class name lets us remove it so the plots align
viewof scatter = Plot.plot({
  className: "scatter",
  style: { fontFamily: "var(--sans-serif)" },
  inset: 8,
   grid: true,
      x: { tickFormat: "", label: var_label(x_var) },
      y: { label: var_label(y_var) },
  color: { legend: true, style: { fontFamily: "var(--sans-serif)" } },
  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: "", label: var_label(x_var) },
      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,
      x: { label: var_label(y_var) },
      y: { grid: true },
  marks: [
    Plot.rectY(d, Plot.binX({y: "count"}, {x: y_var, fill: plt_color})),
    Plot.ruleY([0])
  ]
})

html`<style>.scatter-figure { margin-bottom: 0; }</style>
<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>`