This is part of the Scicloj Clojure Data Scrapbook.

Observable examples - DRAFT

(ns index
  (:require [codegen :refer [obs]]
            [scicloj.kindly.v4.kind :as kind]))

We will use the draft codegen namespace.

A basic example

Note that we read the data from a file, that we can conveniently generate in Clojure.

We follow a basic example from Quarto’s Observable docs.

(obs
 '(def athletes
    (. (FileAttachment "notebooks/datasets/athletes.csv")
       (csv {:typed true}))))

athletes = FileAttachment("notebooks/datasets/athletes.csv").csv({typed: true})

athletes = Array(11538) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

(obs
 '(Plot.plot {:grid true
              :facet {:data athletes
                      :y "sex"}
              :marks [(Plot.rectY athletes
                                  (Plot.binX {:y "count"}
                                             {:x "weight" :fill "sex"}))
                      (Plot.ruleY [0])]}))

Plot.plot({grid: true, facet: {data: athletes, y: "sex"}, marks: [Plot.rectY(athletes, Plot.binX({y: "count"}, {x: "weight", fill: "sex"})), Plot.ruleY([0])]})

Interactions across components

Here, we reproduce the penguins example from the Quarto docs.

(obs
 '(viewof bill_length_min
          (Inputs.range [32 50]
                        {:value 35
                         :step 1
                         :label "Bill length (min):"}))
 '(viewof islands
          (Inputs.checkbox ["Torgersen" "Biscoe" "Dream"]
                           {:value ["Torgensen" "Biscoe"]
                            :lable "Islands:"}))
 '(. (Plot.rectY filtered
                 (Plot.binX {:y "count"}
                            {:x "body_mass_g"
                             :fill "species"
                             :thresholds 20}))
     (plot {:facet {:data filtered
                    :x "sex"
                    :y "species"
                    :marginRight 80}
            :marks [(Plot.frame)]}))
 '(Inputs.table filtered)
 '(def penguins (. (FileAttachment "notebooks/datasets/palmer-penguins.csv")
                   (csv {:typed true})))
 '(def filtered (. penguins
                   (filter [:js "function(penguin) {
                                           return bill_length_min < penguin.bill_length_mm &&
                                           islands.includes(penguin.island);
                                           }"]))))

viewof bill_length_min = Inputs.range([32, 50], {value: 35, step: 1, label: "Bill length (min):"})

viewof islands = Inputs.checkbox(["Torgersen", "Biscoe", "Dream"], {value: ["Torgensen", "Biscoe"], lable: "Islands:"})

Plot.rectY(filtered, Plot.binX({y: "count"}, {x: "body_mass_g", fill: "species", thresholds: 20})).plot({facet: {data: filtered, x: "sex", y: "species", marginRight: 80}, marks: [Plot.frame()]})

bill_length_min = 35

islands = Array(1) ["Biscoe"]

Inputs.table(filtered)

species	island	bill_length_mm	bill_depth_mm	flipper_length_mm	body_mass_g	sex	year
Adelie	Biscoe	37.8	18.3	174	3,400	female	2,007
Adelie	Biscoe	37.7	18.7	180	3,600	male	2,007
Adelie	Biscoe	35.9	19.2	189	3,800	female	2,007
Adelie	Biscoe	38.2	18.1	185	3,950	male	2,007
Adelie	Biscoe	38.8	17.2	180	3,800	male	2,007
Adelie	Biscoe	35.3	18.9	187	3,800	female	2,007
Adelie	Biscoe	40.6	18.6	183	3,550	male	2,007
Adelie	Biscoe	40.5	17.9	187	3,200	female	2,007
Adelie	Biscoe	37.9	18.6	172	3,150	female	2,007
Adelie	Biscoe	40.5	18.9	180	3,950	male	2,007
Adelie	Biscoe	39.6	17.7	186	3,500	female	2,008
Adelie	Biscoe	40.1	18.9	188	4,300	male	2,008
Adelie	Biscoe	42	19.5	200	4,050	male	2,008
Adelie	Biscoe	41.4	18.6	191	3,700	male	2,008
Adelie	Biscoe	39	17.5	186	3,550	female	2,008
Adelie	Biscoe	40.6	18.8	193	3,800	male	2,008
Adelie	Biscoe	36.5	16.6	181	2,850	female	2,008
Adelie	Biscoe	37.6	19.1	194	3,750	male	2,008
Adelie	Biscoe	35.7	16.9	185	3,150	female	2,008
Adelie	Biscoe	41.3	21.1	195	4,400	male	2,008
Adelie	Biscoe	37.6	17	185	3,600	female	2,008
Adelie	Biscoe	41.1	18.2	192	4,050	male	2,008
Adelie	Biscoe	36.4	17.1	184	2,850	female	2,008

penguins = FileAttachment("notebooks/datasets/palmer-penguins.csv").csv({typed: true})

filtered = penguins.filter(function(penguin) {
                                           return bill_length_min < penguin.bill_length_mm &&
                                           islands.includes(penguin.island);
                                           })

penguins = Array(344) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

filtered = Array(164) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

source: projects/datavis/observable/notebooks/index.clj