From 4a057808a2606ba1880b9da6d0f6892d85f15314 Mon Sep 17 00:00:00 2001 From: daslu Date: Sun, 9 Jun 2024 23:51:24 +0300 Subject: [PATCH] rerendered doc --- docs/index.html | 2302 +++++++++++++++++---------------- test/index_generated_test.clj | 302 ++--- 2 files changed, 1312 insertions(+), 1292 deletions(-) diff --git a/docs/index.html b/docs/index.html index 5304494..63d646a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -126,7 +126,10 @@

Table of contents

  • IntelliJ Cursive
  • Example notebook namespace
    • -
  • API
    • +
  • API +
  • Configuration
  • Kinds
  • Examples @@ -433,23 +436,23 @@

    Example noteboo 0 -0.21138066 +0.87967723 1 -0.33743501 +0.14688847 2 -0.47263050 +0.10094806 3 -0.43906648 +0.05021603 4 -0.45415993 +0.16497924 @@ -604,6 +607,15 @@

    API

    (comment
   (clay/browse!))
    +
    +

    Hiccup output

    +

    (experimental 🛠)

    +

    Render a notebook in Hiccup format and return the resulting Hiccup structure:

    +
    +
    (comment
+  (clay/make-hiccup {:source-path "notebooks/index.clj"}))
    +
    +

    Configuration

    @@ -630,35 +642,35 @@

    Examples

    Plain values

    By default, when there is no kind information provided by Kindly, values are simply pretty-printed.

    -
    (+ 4 5)
    +
    (+ 4 5)
    -
    9
    +
    9
    -
    (str "abcd" "efgh")
    +
    (str "abcd" "efgh")
    -
    "abcdefgh"
    +
    "abcdefgh"

    Hidden

    Values of :kind/hidden are not shown.

    -
    (kind/hidden 9)
    +
    (kind/hidden 9)

    Hiccup

    Hiccup, a popular Clojure way to represent HTML, can be specified by kind:

    -
    (kind/hiccup
- [:ul
-  [:li [:p "hi"]]
-  [:li [:big [:big [:p {:style ; https://www.htmlcsscolor.com/hex/7F5F3F
-                        {:color "#7F5F3F"}}
-                    "hello"]]]]])
    +
    (kind/hiccup
+ [:ul
+  [:li [:p "hi"]]
+  [:li [:big [:big [:p {:style ; https://www.htmlcsscolor.com/hex/7F5F3F
+                        {:color "#7F5F3F"}}
+                    "hello"]]]]])

    • hi

    • hello

    As we can see, this kind is displayed by converting Hiccup to HTML.

    @@ -666,40 +678,40 @@

    Hiccup

    Reagent

    -
    (kind/reagent
- ['(fn [numbers]
-     [:p {:style {:background "#d4ebe9"}}
-      (pr-str (map inc numbers))])
-  (vec (range 40))])
    +
    (kind/reagent
+ ['(fn [numbers]
+     [:p {:style {:background "#d4ebe9"}}
+      (pr-str (map inc numbers))])
+  (vec (range 40))])
    -
    +

    From the reagent tutorial:

    -
    (kind/reagent
- ['(fn []
-     (let [*click-count (reagent.core/atom 0)]
-       (fn []
-         [:div
-          "The atom " [:code "*click-count"] " has value: "
-          @*click-count ". "
-          [:input {:type "button" :value "Click me!"
-                   :on-click #(swap! *click-count inc)}]])))])
    -
    -
    +
    (kind/reagent
+ ['(fn []
+     (let [*click-count (reagent.core/atom 0)]
+       (fn []
+         [:div
+          "The atom " [:code "*click-count"] " has value: "
+          @*click-count ". "
+          [:input {:type "button" :value "Click me!"
+                   :on-click #(swap! *click-count inc)}]])))])
    + +

    HTML

    Raw html can be represented as a kind too:

    -
    (kind/html "<div style='height:40px; width:40px; background:purple'></div> ")
    +
    (kind/html "<div style='height:40px; width:40px; background:purple'></div> ")
    -
    (kind/html
- "
-<svg height=100 width=100>
-<circle cx=50 cy=50 r=40 stroke='purple' stroke-width=3 fill='floralwhite' />
-</svg> ")
    +
    (kind/html
+ "
+<svg height=100 width=100>
+<circle cx=50 cy=50 r=40 stroke='purple' stroke-width=3 fill='floralwhite' />
+</svg> ")
    @@ -710,17 +722,17 @@

    HTML

    Markdown

    Markdown text (a vector of strings) can be handled using a kind too.

    -
    (kind/md
- "This is [markdown](https://www.markdownguide.org/).")
    +
    (kind/md
+ "This is [markdown](https://www.markdownguide.org/).")

    This is markdown.

    -
    (kind/md
- ["
-* This is [markdown](https://www.markdownguide.org/).
-  * *Isn't it??*"
-  "
-* Here is **some more** markdown."])
    +
    (kind/md
+ ["
+* This is [markdown](https://www.markdownguide.org/).
+  * *Isn't it??*"
+  "
+* Here is **some more** markdown."])
    • This is markdown. @@ -731,8 +743,8 @@

      Markdown

    When rendering through Quarto, LaTeX formulae are supported as well.

    -
    (kind/md
- "Let $x=9$. Then $$x+11=20$$")
    +
    (kind/md
+ "Let $x=9$. Then $$x+11=20$$")

    Let \(x=9\). Then \[x+11=20\]

    One current known issue is that LaTeX would not render correctly when nesting kind/md inside other kinds.

    @@ -741,20 +753,20 @@

    Markdown

    Images

    Java BufferedImage objects are displayed as images.

    -
    (import javax.imageio.ImageIO
-        java.net.URL)
    +
    (import javax.imageio.ImageIO
+        java.net.URL)
    -
    java.net.URL
    +
    java.net.URL
    -
    (defonce clay-image
-  (->  "https://upload.wikimedia.org/wikipedia/commons/2/2c/Clay-ss-2005.jpg"
-       (URL.)
-       (ImageIO/read)))
    +
    (defonce clay-image
+  (->  "https://upload.wikimedia.org/wikipedia/commons/2/2c/Clay-ss-2005.jpg"
+       (URL.)
+       (ImageIO/read)))
    -
    clay-image
    +
    clay-image
    @@ -764,66 +776,66 @@

    Images

    Plain data structures

    Plain data structures (lists and sequnces, vectors, sets, maps) are pretty printed if there isn’t any value inside which needs to be displayed in special kind of way.

    -
    (def people-as-maps
-  (->> (range 29)
-       (mapv (fn [i]
-               {:preferred-language (["clojure" "clojurescript" "babashka"]
-                                     (rand-int 3))
-                :age (rand-int 100)}))))
    +
    (def people-as-maps
+  (->> (range 29)
+       (mapv (fn [i]
+               {:preferred-language (["clojure" "clojurescript" "babashka"]
+                                     (rand-int 3))
+                :age (rand-int 100)}))))
    -
    (def people-as-vectors
-  (->> people-as-maps
-       (mapv (juxt :preferred-language :age))))
    +
    (def people-as-vectors
+  (->> people-as-maps
+       (mapv (juxt :preferred-language :age))))
    -
    (take 5 people-as-maps)
    +
    (take 5 people-as-maps)
    -
    ({:preferred-language "clojure", :age 83}
- {:preferred-language "babashka", :age 15}
- {:preferred-language "babashka", :age 86}
- {:preferred-language "clojurescript", :age 66}
- {:preferred-language "clojure", :age 25})
    +
    ({:preferred-language "babashka", :age 91}
+ {:preferred-language "clojure", :age 71}
+ {:preferred-language "clojure", :age 21}
+ {:preferred-language "clojure", :age 51}
+ {:preferred-language "babashka", :age 53})
    -
    (take 5 people-as-vectors)
    +
    (take 5 people-as-vectors)
    -
    (["clojure" 83]
- ["babashka" 15]
- ["babashka" 86]
- ["clojurescript" 66]
- ["clojure" 25])
    +
    (["babashka" 91]
+ ["clojure" 71]
+ ["clojure" 21]
+ ["clojure" 51]
+ ["babashka" 53])
    -
    (->> people-as-vectors
-     (take 5)
-     set)
    +
    (->> people-as-vectors
+     (take 5)
+     set)
    -
    #{["clojure" 25]
-  ["babashka" 86]
-  ["clojurescript" 66]
-  ["clojure" 83]
-  ["babashka" 15]}
    +
    #{["babashka" 91]
+  ["clojure" 71]
+  ["clojure" 51]
+  ["babashka" 53]
+  ["clojure" 21]}

    When something inside needs to be displayed in a special kind of way, the data structures are printed in a way that makes that clear.

    -
    (def nested-structure-1
-  {:vector-of-numbers [2 9 -1]
-   :vector-of-different-things ["hi"
-                                (kind/hiccup
-                                 [:big [:big "hello"]])]
-   :map-of-different-things {:markdown (kind/md ["*hi*, **hi**"])
-                             :number 9999}
-   :hiccup (kind/hiccup
-            [:big [:big "bye"]])
-   :dataset (tc/dataset {:x (range 3)
-                         :y [:A :B :C]})})
    +
    (def nested-structure-1
+  {:vector-of-numbers [2 9 -1]
+   :vector-of-different-things ["hi"
+                                (kind/hiccup
+                                 [:big [:big "hello"]])]
+   :map-of-different-things {:markdown (kind/md ["*hi*, **hi**"])
+                             :number 9999}
+   :hiccup (kind/hiccup
+            [:big [:big "bye"]])
+   :dataset (tc/dataset {:x (range 3)
+                         :y [:A :B :C]})})
    -
    nested-structure-1
    +
    nested-structure-1

    {

    :vector-of-numbers [2 9 -1]
    @@ -955,21 +967,21 @@

    Plain data structure

    Pretty printing

    The :kind/pprint kind makes sure to simply pretty-print values:

    -
    (kind/pprint nested-structure-1)
    +
    (kind/pprint nested-structure-1)
    -
    {:vector-of-numbers [2 9 -1],
- :vector-of-different-things ["hi" [:big [:big "hello"]]],
- :map-of-different-things {:markdown ["*hi*, **hi**"], :number 9999},
- :hiccup [:big [:big "bye"]],
- :dataset _unnamed [3 2]:
-
-| :x | :y |
-|---:|----|
-|  0 | :A |
-|  1 | :B |
-|  2 | :C |
-}
    +
    {:vector-of-numbers [2 9 -1],
+ :vector-of-different-things ["hi" [:big [:big "hello"]]],
+ :map-of-different-things {:markdown ["*hi*, **hi**"], :number 9999},
+ :hiccup [:big [:big "bye"]],
+ :dataset _unnamed [3 2]:
+
+| :x | :y |
+|---:|----|
+|  0 | :A |
+|  1 | :B |
+|  2 | :C |
+}
    @@ -977,12 +989,12 @@

    Datasets

    tech.ml.dataset datasets currently use the default printing of the library,

    Let us create such a dataset using Tablecloth.

    -
    (require '[tablecloth.api :as tc])
    +
    (require '[tablecloth.api :as tc])
    -
    (-> {:x (range 6)
-     :y [:A :B :C :A :B :C]}
-    tc/dataset)
    +
    (-> {:x (range 6)
+     :y [:A :B :C :A :B :C]}
+    tc/dataset)

    _unnamed [6 2]:

    @@ -1022,9 +1034,9 @@

    Datasets

    -
    (-> {:x [1 [2 3] 4]
-     :y [:A :B :C]}
-    tc/dataset)
    +
    (-> {:x [1 [2 3] 4]
+     :y [:A :B :C]}
+    tc/dataset)

    _unnamed [3 2]:

    @@ -1052,9 +1064,9 @@

    Datasets

    -
    (-> [{:x 1 :y 2 :z 3}
-     {:y 4 :z 5}]
-    tc/dataset)
    +
    (-> [{:x 1 :y 2 :z 3}
+     {:y 4 :z 5}]
+    tc/dataset)

    _unnamed [2 3]:

    @@ -1081,8 +1093,8 @@

    Datasets

    -
    (-> people-as-maps
-    tc/dataset)
    +
    (-> people-as-maps
+    tc/dataset)

    _unnamed [29 2]:

    @@ -1095,101 +1107,101 @@

    Datasets

    -clojure -83 +babashka +91 -babashka -15 +clojure +71 -babashka -86 +clojure +21 -clojurescript -66 +clojure +51 -clojure -25 +babashka +53 -clojurescript -1 +clojure +70 clojurescript -98 +76 -clojurescript -87 +babashka +6 -clojure -39 +babashka +82 babashka -74 +29 … … -clojure -14 - - -clojure -75 - - -clojurescript -90 +babashka +57 clojure -37 +78 babashka -60 +17 -clojurescript -62 +clojure +38 clojurescript -93 +8 babashka -21 +89 -clojurescript +babashka 72 clojurescript -91 +42 -babashka -23 +clojure +70 + + +clojure +84 + + +clojure +76

    Some kind options of kind/dataset control the way a dataset is printed.

    -
    (-> {:x (range 30)}
-    tc/dataset
-    (kind/dataset {:dataset/print-range 6}))
    +
    (-> {:x (range 30)}
+    tc/dataset
+    (kind/dataset {:dataset/print-range 6}))

    _unnamed [30 1]:

    @@ -1233,9 +1245,9 @@

    Tables

    The :kind/table kind can be handy for an interactive table view. :kind/table understands many structures which can be rendered as a table.

    A map containing either :row-vectors (sequence of sequences) or row-maps (sequence of maps) keys with optional :column-names.

    -
    (kind/table
- {:column-names [:preferred-language :age]
-  :row-vectors people-as-vectors})
    +
    (kind/table
+ {:column-names [:preferred-language :age]
+  :row-vectors people-as-vectors})
    @@ -1248,120 +1260,120 @@

    Tables

    -clojure -83 - - -babashka -15 - - babashka -86 +91 -clojurescript -66 +clojure +71 clojure -25 +21 -clojurescript -1 +clojure +51 -clojurescript -98 +babashka +53 -clojurescript -87 +clojure +70 -clojure -39 +clojurescript +76 babashka -74 +6 babashka -95 +82 babashka -68 +29 babashka -57 +94 clojurescript -6 +88 -babashka -68 +clojurescript +48 clojure -4 +77 -clojurescript -88 +clojure +85 -clojurescript -73 +clojure +53 -clojure -14 +clojurescript +96 -clojure -75 +clojurescript +38 -clojurescript -90 +babashka +57 clojure -37 +78 babashka -60 +17 -clojurescript -62 +clojure +38 clojurescript -93 +8 babashka -21 +89 -clojurescript +babashka 72 clojurescript -91 +42 -babashka -23 +clojure +70 + + +clojure +84 + + +clojure +76 @@ -1369,32 +1381,32 @@

    Tables

    Lack of column names produces table without a header.

    -
    (kind/table
- {:row-vectors (take 5 people-as-vectors)})
    +
    (kind/table
+ {:row-vectors (take 5 people-as-vectors)})
    - - + + - - + + - - + + - - + + - - + +
    clojure83babashka91
    babashka15clojure71
    babashka86clojure21
    clojurescript66clojure51
    clojure25babashka53
    @@ -1402,8 +1414,8 @@

    Tables

    Column names are inferred from a sequence of maps

    -
    (kind/table
- {:row-maps (take 5 people-as-maps)})
    +
    (kind/table
+ {:row-maps (take 5 people-as-maps)})
    @@ -1416,24 +1428,24 @@

    Tables

    -clojure -83 +babashka +91 -babashka -15 +clojure +71 -babashka -86 +clojure +21 -clojurescript -66 +clojure +51 -clojure -25 +babashka +53 @@ -1441,9 +1453,9 @@

    Tables

    We can limit displayed columns for sequence of maps case.

    -
    (kind/table
- {:column-names [:preferred-language]
-  :row-maps (take 5 people-as-maps)})
    +
    (kind/table
+ {:column-names [:preferred-language]
+  :row-maps (take 5 people-as-maps)})
    @@ -1455,19 +1467,19 @@

    Tables

    -clojure +babashka -babashka +clojure -babashka +clojure -clojurescript +clojure -clojure +babashka @@ -1475,38 +1487,38 @@

    Tables

    Sequence of sequences and sequence of maps also work

    -
    (kind/table (take 5 people-as-vectors))
    +
    (kind/table (take 5 people-as-vectors))
    - - + + - - + + - - + + - - + + - - + +
    clojure83babashka91
    babashka15clojure71
    babashka86clojure21
    clojurescript66clojure51
    clojure25babashka53
    -
    (kind/table (take 5 people-as-maps))
    +
    (kind/table (take 5 people-as-maps))
    @@ -1519,24 +1531,24 @@

    Tables

    -clojure -83 +babashka +91 -babashka -15 +clojure +71 -babashka -86 +clojure +21 -clojurescript -66 +clojure +51 -clojure -25 +babashka +53 @@ -1544,8 +1556,8 @@

    Tables

    Additionally map of sequences is supported (unless it contains :row-vectors or :row-maps key, see such case above).

    -
    (kind/table {:x (range 6)
-             :y [:A :B :C :A :B :C]})
    +
    (kind/table {:x (range 6)
+             :y [:A :B :C :A :B :C]})
    @@ -1587,12 +1599,12 @@

    Tables

    A dataset can be also treated as a table input.

    -
    (def people-as-dataset
-  (tc/dataset people-as-maps))
    +
    (def people-as-dataset
+  (tc/dataset people-as-maps))
    -
    (-> people-as-dataset
-    kind/table)
    +
    (-> people-as-dataset
+    kind/table)
    @@ -1605,120 +1617,120 @@

    Tables

    -clojure -83 - - -babashka -15 - - babashka -86 +91 -clojurescript -66 +clojure +71 clojure -25 +21 -clojurescript -1 +clojure +51 -clojurescript -98 +babashka +53 -clojurescript -87 +clojure +70 -clojure -39 +clojurescript +76 babashka -74 +6 babashka -95 +82 babashka -68 +29 babashka -57 +94 clojurescript -6 +88 -babashka -68 +clojurescript +48 clojure -4 +77 -clojurescript -88 +clojure +85 -clojurescript -73 +clojure +53 -clojure -14 +clojurescript +96 -clojure -75 +clojurescript +38 -clojurescript -90 +babashka +57 clojure -37 +78 babashka -60 +17 -clojurescript -62 +clojure +38 clojurescript -93 +8 babashka -21 +89 -clojurescript +babashka 72 clojurescript -91 +42 -babashka -23 +clojure +70 + + +clojure +84 + + +clojure +76 @@ -1726,8 +1738,8 @@

    Tables

    Additional options may hint at way the table should be rendered.

    -
    (-> people-as-dataset
-    (kind/table {:element/max-height "300px"}))
    +
    (-> people-as-dataset
+    (kind/table {:element/max-height "300px"}))
    @@ -1741,120 +1753,120 @@

    Tables

    -clojure -83 - - -babashka -15 - - babashka -86 +91 -clojurescript -66 +clojure +71 clojure -25 +21 -clojurescript -1 +clojure +51 -clojurescript -98 +babashka +53 -clojurescript -87 +clojure +70 -clojure -39 +clojurescript +76 babashka -74 +6 babashka -95 +82 babashka -68 +29 babashka -57 +94 clojurescript -6 +88 -babashka -68 +clojurescript +48 clojure -4 +77 -clojurescript -88 +clojure +85 -clojurescript -73 +clojure +53 -clojure -14 +clojurescript +96 -clojure -75 +clojurescript +38 -clojurescript -90 +babashka +57 clojure -37 +78 babashka -60 +17 -clojurescript -62 +clojure +38 clojurescript -93 +8 babashka -21 +89 -clojurescript +babashka 72 clojurescript -91 +42 -babashka -23 +clojure +70 + + +clojure +84 + + +clojure +76 @@ -1863,105 +1875,105 @@

    Tables

    It is possible to use datatables to reneder kind/table, and in this case the user may specify datatables options (see the full list).

    -
    (-> people-as-maps
-    tc/dataset
-    (kind/table {:use-datatables true}))
    +
    (-> people-as-maps
+    tc/dataset
+    (kind/table {:use-datatables true}))
    -
    preferred-languageage
    clojure83
    babashka15
    babashka86
    clojurescript66
    clojure25
    clojurescript1
    clojurescript98
    clojurescript87
    clojure39
    babashka74
    babashka95
    babashka68
    babashka57
    clojurescript6
    babashka68
    clojure4
    clojurescript88
    clojurescript73
    clojure14
    clojure75
    clojurescript90
    clojure37
    babashka60
    clojurescript62
    clojurescript93
    babashka21
    clojurescript72
    clojurescript91
    babashka23
    +
    preferred-languageage
    babashka91
    clojure71
    clojure21
    clojure51
    babashka53
    clojure70
    clojurescript76
    babashka6
    babashka82
    babashka29
    babashka94
    clojurescript88
    clojurescript48
    clojure77
    clojure85
    clojure53
    clojurescript96
    clojurescript38
    babashka57
    clojure78
    babashka17
    clojure38
    clojurescript8
    babashka89
    babashka72
    clojurescript42
    clojure70
    clojure84
    clojure76
    -
    (-> people-as-dataset
-    (kind/table {:use-datatables true
-                 :datatables {:scrollY 300}}))
    +
    (-> people-as-dataset
+    (kind/table {:use-datatables true
+                 :datatables {:scrollY 300}}))
    -
    preferred-languageage
    clojure83
    babashka15
    babashka86
    clojurescript66
    clojure25
    clojurescript1
    clojurescript98
    clojurescript87
    clojure39
    babashka74
    babashka95
    babashka68
    babashka57
    clojurescript6
    babashka68
    clojure4
    clojurescript88
    clojurescript73
    clojure14
    clojure75
    clojurescript90
    clojure37
    babashka60
    clojurescript62
    clojurescript93
    babashka21
    clojurescript72
    clojurescript91
    babashka23
    +
    preferred-languageage
    babashka91
    clojure71
    clojure21
    clojure51
    babashka53
    clojure70
    clojurescript76
    babashka6
    babashka82
    babashka29
    babashka94
    clojurescript88
    clojurescript48
    clojure77
    clojure85
    clojure53
    clojurescript96
    clojurescript38
    babashka57
    clojure78
    babashka17
    clojure38
    clojurescript8
    babashka89
    babashka72
    clojurescript42
    clojure70
    clojure84
    clojure76

    ML models

    -
    (-> (toydata/iris-ds)
-    (noj.stats/linear-regression-model :sepal_length
-                                       [:sepal_width
-                                        :petal_width
-                                        :petal_length])
-    ml/thaw-model)
    +
    (-> (toydata/iris-ds)
+    (noj.stats/linear-regression-model :sepal_length
+                                       [:sepal_width
+                                        :petal_width
+                                        :petal_length])
+    ml/thaw-model)
    -
    Linear Model:
-
-Residuals:
-       Min          1Q      Median          3Q         Max
-   -0.8282     -0.2202      0.0191      0.1992      0.8457
-
-Coefficients:
-                  Estimate Std. Error    t value   Pr(>|t|)
-Intercept           1.8560     0.2508     7.4010     0.0000 ***
-sepal_width         0.6508     0.0666     9.7654     0.0000 ***
-petal_width        -0.5565     0.1275    -4.3629     0.0000 ***
-petal_length        0.7091     0.0567    12.5025     0.0000 ***
----------------------------------------------------------------------
-Significance codes:  0 '***' 0.001 '**' 0.01 '*' 0.05 '.' 0.1 ' ' 1
-
-Residual standard error: 0.3145 on 146 degrees of freedom
-Multiple R-squared: 0.8586,    Adjusted R-squared: 0.8557
-F-statistic: 295.5391 on 4 and 146 DF,  p-value: 8.588e-62
    +
    Linear Model:
+
+Residuals:
+       Min          1Q      Median          3Q         Max
+   -0.8282     -0.2202      0.0191      0.1992      0.8457
+
+Coefficients:
+                  Estimate Std. Error    t value   Pr(>|t|)
+Intercept           1.8560     0.2508     7.4010     0.0000 ***
+sepal_width         0.6508     0.0666     9.7654     0.0000 ***
+petal_width        -0.5565     0.1275    -4.3629     0.0000 ***
+petal_length        0.7091     0.0567    12.5025     0.0000 ***
+---------------------------------------------------------------------
+Significance codes:  0 '***' 0.001 '**' 0.01 '*' 0.05 '.' 0.1 ' ' 1
+
+Residual standard error: 0.3145 on 146 degrees of freedom
+Multiple R-squared: 0.8586,    Adjusted R-squared: 0.8557
+F-statistic: 295.5391 on 4 and 146 DF,  p-value: 8.588e-62

    Vega and Vega-Lite

    -
    (defn vega-lite-point-plot [data]
-  (-> {:data {:values data},
-       :mark "point"
-       :encoding
-       {:size {:field "w" :type "quantitative"}
-        :x {:field "x", :type "quantitative"},
-        :y {:field "y", :type "quantitative"},
-        :fill {:field "z", :type "nominal"}}}
-      kind/vega-lite))
    +
    (defn vega-lite-point-plot [data]
+  (-> {:data {:values data},
+       :mark "point"
+       :encoding
+       {:size {:field "w" :type "quantitative"}
+        :x {:field "x", :type "quantitative"},
+        :y {:field "y", :type "quantitative"},
+        :fill {:field "z", :type "nominal"}}}
+      kind/vega-lite))
    -
    (defn random-data [n]
-  (->> (repeatedly n #(- (rand) 0.5))
-       (reductions +)
-       (map-indexed (fn [x y]
-                      {:w (rand-int 9)
-                       :z (rand-int 9)
-                       :x x
-                       :y y}))))
    +
    (defn random-data [n]
+  (->> (repeatedly n #(- (rand) 0.5))
+       (reductions +)
+       (map-indexed (fn [x y]
+                      {:w (rand-int 9)
+                       :z (rand-int 9)
+                       :x x
+                       :y y}))))
    -
    (defn random-vega-lite-plot [n]
-  (-> n
-      random-data
-      vega-lite-point-plot))
    +
    (defn random-vega-lite-plot [n]
+  (-> n
+      random-data
+      vega-lite-point-plot))
    -
    (random-vega-lite-plot 9)
    +
    (random-vega-lite-plot 9)
    -
    +

    When the vega/vega-lite data is given in CSV format, Clay will serve it in a separate CSV file alongside the generated HTML.

    -
    (-> {:data {:values "x,y
-1,1
-2,4
-3,9
--1,1
--2,4
--3,9"
-            :format {:type :csv}},
-     :mark "point"
-     :encoding
-     {:x {:field "x", :type "quantitative"}
-      :y {:field "y", :type "quantitative"}}}
-    kind/vega-lite)
    +
    (-> {:data {:values "x,y
+1,1
+2,4
+3,9
+-1,1
+-2,4
+-3,9"
+            :format {:type :csv}},
+     :mark "point"
+     :encoding
+     {:x {:field "x", :type "quantitative"}
+      :y {:field "y", :type "quantitative"}}}
+    kind/vega-lite)
    @@ -1969,31 +1981,31 @@

    Cytoscape

    See the Cytoscape docs.

    -
    (def cytoscape-example
-  {:elements {:nodes [{:data {:id "a" :parent "b"} :position {:x 215 :y 85}}
-                      {:data {:id "b"}}
-                      {:data {:id "c" :parent "b"} :position {:x 300 :y 85}}
-                      {:data {:id "d"} :position {:x 215 :y 175}}
-                      {:data {:id "e"}}
-                      {:data {:id "f" :parent "e"} :position {:x 300 :y 175}}]
-              :edges [{:data {:id "ad" :source "a" :target "d"}}
-                      {:data {:id "eb" :source "e" :target "b"}}]}
-   :style [{:selector "node"
-            :css {:content "data(id)"
-                  :text-valign "center"
-                  :text-halign "center"}}
-           {:selector "parent"
-            :css {:text-valign "top"
-                  :text-halign "center"}}
-           {:selector "edge"
-            :css {:curve-style "bezier"
-                  :target-arrow-shape "triangle"}}]
-   :layout {:name "preset"
-            :padding 5}})
    -
    -
    -
    (kind/cytoscape
- cytoscape-example)
    +
    (def cytoscape-example
+  {:elements {:nodes [{:data {:id "a" :parent "b"} :position {:x 215 :y 85}}
+                      {:data {:id "b"}}
+                      {:data {:id "c" :parent "b"} :position {:x 300 :y 85}}
+                      {:data {:id "d"} :position {:x 215 :y 175}}
+                      {:data {:id "e"}}
+                      {:data {:id "f" :parent "e"} :position {:x 300 :y 175}}]
+              :edges [{:data {:id "ad" :source "a" :target "d"}}
+                      {:data {:id "eb" :source "e" :target "b"}}]}
+   :style [{:selector "node"
+            :css {:content "data(id)"
+                  :text-valign "center"
+                  :text-halign "center"}}
+           {:selector "parent"
+            :css {:text-valign "top"
+                  :text-halign "center"}}
+           {:selector "edge"
+            :css {:curve-style "bezier"
+                  :target-arrow-shape "triangle"}}]
+   :layout {:name "preset"
+            :padding 5}})
    +
    +
    +
    (kind/cytoscape
+ cytoscape-example)
    -
    (-> cytoscape-example
-    (kind/cytoscape {:element/style
-                     {:width "100px"
-                      :height "100px"}}))
    +
    (-> cytoscape-example
+    (kind/cytoscape {:element/style
+                     {:width "100px"
+                      :height "100px"}}))
    -
    (-> echarts-example
-    (kind/echarts {:element/style
-                   {:width "500px"
-                    :height "200px"}}))
    +
    (-> echarts-example
+    (kind/echarts {:element/style
+                   {:width "500px"
+                    :height "200px"}}))
    -
    (-> plotly-example
-    (kind/plotly {:element/style
-                  {:width "300px"
-                   :height "300px"}}))
    +
    (-> plotly-example
+    (kind/plotly {:element/style
+                  {:width "300px"
+                   :height "300px"}}))
    @@ -2085,43 +2097,43 @@

    Plotly

    Highcharts

    -
    (kind/highcharts
- {:title {:text "Line chart"}
-  :subtitle {:text "By Job Category"}
-  :yAxis {:title {:text "Number of Employees"}}
-  :series [{:name "Installation & Developers"
-            :data [43934, 48656, 65165, 81827, 112143, 142383,
-                   171533, 165174, 155157, 161454, 154610]}
-
-           {:name "Manufacturing",
-            :data [24916, 37941, 29742, 29851, 32490, 30282,
-                   38121, 36885, 33726, 34243, 31050]}
-
-           {:name "Sales & Distribution",
-            :data [11744, 30000, 16005, 19771, 20185, 24377,
-                   32147, 30912, 29243, 29213, 25663]}
-
-           {:name "Operations & Maintenance",
-            :data [nil, nil, nil, nil, nil, nil, nil,
-                   nil, 11164, 11218, 10077]}
-
-           {:name "Other",
-            :data [21908, 5548, 8105, 11248, 8989, 11816, 18274,
-                   17300, 13053, 11906, 10073]}]
-
-  :xAxis {:accessibility {:rangeDescription "Range: 2010 to 2020"}}
-
-  :legend {:layout "vertical",
-           :align "right",
-           :verticalAlign "middle"}
-
-  :plotOptions {:series {:label {:connectorAllowed false},
-                         :pointStart 2010}}
-
-  :responsive {:rules [{:condition {:maxWidth 500},
-                        :chartOptions {:legend {:layout "horizontal",
-                                                :align "center",
-                                                :verticalAlign "bottom"}}}]}})
    +
    (kind/highcharts
+ {:title {:text "Line chart"}
+  :subtitle {:text "By Job Category"}
+  :yAxis {:title {:text "Number of Employees"}}
+  :series [{:name "Installation & Developers"
+            :data [43934, 48656, 65165, 81827, 112143, 142383,
+                   171533, 165174, 155157, 161454, 154610]}
+
+           {:name "Manufacturing",
+            :data [24916, 37941, 29742, 29851, 32490, 30282,
+                   38121, 36885, 33726, 34243, 31050]}
+
+           {:name "Sales & Distribution",
+            :data [11744, 30000, 16005, 19771, 20185, 24377,
+                   32147, 30912, 29243, 29213, 25663]}
+
+           {:name "Operations & Maintenance",
+            :data [nil, nil, nil, nil, nil, nil, nil,
+                   nil, 11164, 11218, 10077]}
+
+           {:name "Other",
+            :data [21908, 5548, 8105, 11248, 8989, 11816, 18274,
+                   17300, 13053, 11906, 10073]}]
+
+  :xAxis {:accessibility {:rangeDescription "Range: 2010 to 2020"}}
+
+  :legend {:layout "vertical",
+           :align "right",
+           :verticalAlign "middle"}
+
+  :plotOptions {:series {:label {:connectorAllowed false},
+                         :pointStart 2010}}
+
+  :responsive {:rules [{:condition {:maxWidth 500},
+                        :chartOptions {:legend {:layout "horizontal",
+                                                :align "center",
+                                                :verticalAlign "bottom"}}}]}})
    @@ -2131,74 +2143,74 @@

    Observable

    The following is adapted from the Penguins example in Quarto’s documentation.

    Note that you can save your Clojure data as a csv file and refer to it from within your Observable code. See Referring to files for more information. In this case, we are using the local file, "notebooks/datasets/palmer-penguins.csv", which is transparently copied by Clay alongside the target HTML.

    -
    (kind/observable
- "
-//| panel: input
-viewof bill_length_min = Inputs.range(
-                                      [32, 50],
-                                      {value: 35, step: 1, label: 'Bill length (min):'}
-                                      )
-viewof islands = Inputs.checkbox(
-                                 ['Torgersen', 'Biscoe', 'Dream'],
-                                 { value: ['Torgersen', 'Biscoe'],
-                                  label: '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)
-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);
-                                           })
-")
    +
    (kind/observable
+ "
+//| panel: input
+viewof bill_length_min = Inputs.range(
+                                      [32, 50],
+                                      {value: 35, step: 1, label: 'Bill length (min):'}
+                                      )
+viewof islands = Inputs.checkbox(
+                                 ['Torgersen', 'Biscoe', 'Dream'],
+                                 { value: ['Torgersen', 'Biscoe'],
+                                  label: '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)
+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);
+                                           })
+")
    - +
    @@ -2220,7 +2232,7 @@

    Observable

    - +
    @@ -2228,11 +2240,11 @@

    Observable

    - +
    @@ -2250,11 +2262,11 @@

    Observable

    More examples from Quarto’s Observable documentation:

    -
    (kind/observable
- "athletes = FileAttachment('notebooks/datasets/athletes.csv').csv({typed: true})")
    +
    (kind/observable
+ "athletes = FileAttachment('notebooks/datasets/athletes.csv').csv({typed: true})")
    - +
    @@ -2262,11 +2274,11 @@

    Observable

    -
    (kind/observable
- "athletes")
    +
    (kind/observable
+ "athletes")
    - +
    @@ -2274,11 +2286,11 @@

    Observable

    -
    (kind/observable
- "Inputs.table(athletes)")
    +
    (kind/observable
+ "Inputs.table(athletes)")
    - +
    @@ -2286,39 +2298,39 @@

    Observable

    -
    (kind/observable
- "
-Plot.plot({
-  grid: true,
-  facet: {
-    data: athletes,
-    y: 'sex'
-  },
-  marks: [
-    Plot.rectY(
-      athletes,
-      Plot.binX({y: 'count'}, {x: 'weight', fill: 'sex'})
-    ),
-    Plot.ruleY([0])
-  ]
-})
-")
    +
    (kind/observable
+ "
+Plot.plot({
+  grid: true,
+  facet: {
+    data: athletes,
+    y: 'sex'
+  },
+  marks: [
+    Plot.rectY(
+      athletes,
+      Plot.binX({y: 'count'}, {x: 'weight', fill: 'sex'})
+    ),
+    Plot.ruleY([0])
+  ]
+})
+")
    - +
    @@ -2326,11 +2338,11 @@

    Observable

    -
    (kind/observable
- "population = FileAttachment('notebooks/datasets/population.json').json()")
    +
    (kind/observable
+ "population = FileAttachment('notebooks/datasets/population.json').json()")
    - +
    @@ -2338,11 +2350,11 @@

    Observable

    -
    (kind/observable
- "population")
    +
    (kind/observable
+ "population")
    - +
    @@ -2350,13 +2362,13 @@

    Observable

    -
    (kind/observable
- " import { chart } with { population as data } from '@d3/zoomable-sunburst'
- chart")
    +
    (kind/observable
+ " import { chart } with { population as data } from '@d3/zoomable-sunburst'
+ chart")
    - +
    @@ -2377,87 +2389,87 @@

    Observable

    Leaflet

    This example was adapted from the Leaflet website. Note we are defining a tile layer using leaflet-providers.

    -
    (kind/reagent
- ['(fn []
-     [:div {:style {:height "200px"}
-            :ref (fn [el]
-                   (let [m (-> js/L
-                               (.map el)
-                               (.setView (clj->js [51.505 -0.09])
-                                         13))]
-                     (-> js/L
-                         .-tileLayer
-                         (.provider "OpenStreetMap.Mapnik")
-                         (.addTo m))
-                     (-> js/L
-                         (.marker (clj->js [51.5 -0.09]))
-                         (.addTo m)
-                         (.bindPopup "A pretty CSS popup.<br> Easily customizable.")
-                         (.openPopup))))}])]
- ;; Note we need to mention the dependency:
- {:html/deps [:leaflet]})
    -
    -
    +
    (kind/reagent
+ ['(fn []
+     [:div {:style {:height "200px"}
+            :ref (fn [el]
+                   (let [m (-> js/L
+                               (.map el)
+                               (.setView (clj->js [51.505 -0.09])
+                                         13))]
+                     (-> js/L
+                         .-tileLayer
+                         (.provider "OpenStreetMap.Mapnik")
+                         (.addTo m))
+                     (-> js/L
+                         (.marker (clj->js [51.5 -0.09]))
+                         (.addTo m)
+                         (.bindPopup "A pretty CSS popup.<br> Easily customizable.")
+                         (.openPopup))))}])]
+ ;; Note we need to mention the dependency:
+ {:html/deps [:leaflet]})
    +
    +

    D3

    The following example is adapted from hiccup-d3. The code is a bit different, e.g. (.scaleOrdinal js/d3 (.-schemeCategory10 js/d3)) instead of (d3/scaleOrdinal d3/schemeCategory10). We still need to figure out how to make hiccup-d3’s examples work as they are.

    -
    (let [letter-frequencies [{:letter "A", :frequency 0.08167}
-                          {:letter "B", :frequency 0.01492}
-                          {:letter "C", :frequency 0.02782}
-                          {:letter "D", :frequency 0.04253}
-                          {:letter "E", :frequency 0.12702}
-                          {:letter "F", :frequency 0.02288}
-                          {:letter "G", :frequency 0.02015}
-                          {:letter "H", :frequency 0.06094}
-                          {:letter "I", :frequency 0.06966}
-                          {:letter "J", :frequency 0.00153}
-                          {:letter "K", :frequency 0.00772}
-                          {:letter "L", :frequency 0.04025}
-                          {:letter "M", :frequency 0.02406}
-                          {:letter "N", :frequency 0.06749}
-                          {:letter "O", :frequency 0.07507}
-                          {:letter "P", :frequency 0.01929}
-                          {:letter "Q", :frequency 0.00095}
-                          {:letter "R", :frequency 0.05987}
-                          {:letter "S", :frequency 0.06327}
-                          {:letter "T", :frequency 0.09056}
-                          {:letter "U", :frequency 0.02758}
-                          {:letter "V", :frequency 0.00978}
-                          {:letter "W", :frequency 0.0236}
-                          {:letter "X", :frequency 0.0015}
-                          {:letter "Y", :frequency 0.01974}
-                          {:letter "Z", :frequency 0.00074}]]
-  (kind/reagent
-   ['(fn [data]
-       (let [size 400
-             x (-> js/d3
-                   .scaleLinear
-                   (.range (into-array [0 size]))
-                   (.domain (into-array [0 (apply max (map :frequency data))])))
-             y (-> js/d3
-                   .scaleBand
-                   (.domain (into-array (map :letter data)))
-                   (.range (into-array [0 size])))
-             color (.scaleOrdinal js/d3 (.-schemeCategory10 js/d3))]
-         [:svg
-          {:viewBox (str "0 0 " size " " size)}
-          (map
-           (fn
-             [{:keys [letter frequency]}]
-             [:g
-              {:key letter, :transform (str "translate(" 0 "," (y letter) ")")}
-              [:rect
-               {:x (x 0),
-                :height (.bandwidth y),
-                :fill (color letter),
-                :width (x frequency)}]])
-           data)]))
-    letter-frequencies]
-   {:html/deps [:d3]}))
    -
    -
    +
    (let [letter-frequencies [{:letter "A", :frequency 0.08167}
+                          {:letter "B", :frequency 0.01492}
+                          {:letter "C", :frequency 0.02782}
+                          {:letter "D", :frequency 0.04253}
+                          {:letter "E", :frequency 0.12702}
+                          {:letter "F", :frequency 0.02288}
+                          {:letter "G", :frequency 0.02015}
+                          {:letter "H", :frequency 0.06094}
+                          {:letter "I", :frequency 0.06966}
+                          {:letter "J", :frequency 0.00153}
+                          {:letter "K", :frequency 0.00772}
+                          {:letter "L", :frequency 0.04025}
+                          {:letter "M", :frequency 0.02406}
+                          {:letter "N", :frequency 0.06749}
+                          {:letter "O", :frequency 0.07507}
+                          {:letter "P", :frequency 0.01929}
+                          {:letter "Q", :frequency 0.00095}
+                          {:letter "R", :frequency 0.05987}
+                          {:letter "S", :frequency 0.06327}
+                          {:letter "T", :frequency 0.09056}
+                          {:letter "U", :frequency 0.02758}
+                          {:letter "V", :frequency 0.00978}
+                          {:letter "W", :frequency 0.0236}
+                          {:letter "X", :frequency 0.0015}
+                          {:letter "Y", :frequency 0.01974}
+                          {:letter "Z", :frequency 0.00074}]]
+  (kind/reagent
+   ['(fn [data]
+       (let [size 400
+             x (-> js/d3
+                   .scaleLinear
+                   (.range (into-array [0 size]))
+                   (.domain (into-array [0 (apply max (map :frequency data))])))
+             y (-> js/d3
+                   .scaleBand
+                   (.domain (into-array (map :letter data)))
+                   (.range (into-array [0 size])))
+             color (.scaleOrdinal js/d3 (.-schemeCategory10 js/d3))]
+         [:svg
+          {:viewBox (str "0 0 " size " " size)}
+          (map
+           (fn
+             [{:keys [letter frequency]}]
+             [:g
+              {:key letter, :transform (str "translate(" 0 "," (y letter) ")")}
+              [:rect
+               {:x (x 0),
+                :height (.bandwidth y),
+                :fill (color letter),
+                :width (x frequency)}]])
+           data)]))
+    letter-frequencies]
+   {:html/deps [:d3]}))
    + +

    ggplotly

    @@ -2466,271 +2478,271 @@

    ggplotly

    The following is a work-in-progress attempt to generate JSON specs of the kind consumed by ggplotly’s client side.

    The following spec function was generaged by mimicking R’s ggplotly(ggplot(mtcars, aes(wt, mpg)) + geom_point()). Therefore, some parts are hard-coded and require generalization. Other parts are missing (e.g., specifying colours).

    -
    (defn ->ggplotly-spec [{:keys [layers labels]}]
-  (kind/htmlwidgets-ggplotly
-   (let [;; assuming a single layer for now:
-         {:keys [data xmin xmax ymin ymax]} (first layers)
-         ;; an auxiliary function to compute tick values:
-         ->tickvals (fn [l r]
-                      (let [jump (-> (- r l)
-                                     (/ 6)
-                                     math/floor
-                                     int
-                                     (max 1))]
-                        (-> l
-                            math/ceil
-                            (range r jump))))]
-     {:x
-      {:config
-       {:doubleClick "reset",
-        :modeBarButtonsToAdd ["hoverclosest" "hovercompare"],
-        :showSendToCloud false},
-       :layout
-       {:plot_bgcolor "rgba(235,235,235,1)",
-        :paper_bgcolor "rgba(255,255,255,1)",
-        :legend
-        {:bgcolor "rgba(255,255,255,1)",
-         :bordercolor "transparent",
-         :borderwidth 1.88976377952756,
-         :font {:color "rgba(0,0,0,1)", :family "", :size 11.689497716895}},
-        :xaxis (let [tickvals (->tickvals xmin xmax)
-                     ticktext (mapv str tickvals)
-                     range-len (- xmax xmin)
-                     range-expansion (* 0.1 range-len)
-                     expanded-range [(- xmin range-expansion)
-                                     (+ xmax range-expansion)]]
-                 {:linewidth 0,
-                  :nticks nil,
-                  :linecolor nil,
-                  :ticklen 3.65296803652968,
-                  :tickcolor "rgba(51,51,51,1)",
-                  :tickmode "array",
-                  :gridcolor "rgba(255,255,255,1)",
-                  :automargin true,
-                  :type "linear",
-                  :tickvals tickvals
-                  :zeroline false,
-                  :title
-                  {:text (:x labels),
-                   :font {:color "rgba(0,0,0,1)", :family "", :size 14.6118721461187}},
-                  :tickfont {:color "rgba(77,77,77,1)", :family "", :size 11.689497716895},
-                  :autorange false,
-                  :showticklabels true,
-                  :showline false,
-                  :showgrid true,
-                  :ticktext ticktext
-                  :ticks "outside",
-                  :gridwidth 0.66417600664176,
-                  :anchor "y",
-                  :domain [0 1],
-                  :hoverformat ".2f",
-                  :tickangle 0,
-                  :tickwidth 0.66417600664176,
-                  :categoryarray ticktext,
-                  :categoryorder "array",
-                  :range expanded-range},)
-        :font {:color "rgba(0,0,0,1)", :family "", :size 14.6118721461187},
-        :showlegend false,
-        :barmode "relative",
-        :yaxis (let [tickvals (->tickvals ymin ymax)
-                     ticktext (mapv str tickvals)
-                     range-len (- ymax ymin)
-                     range-expansion (* 0.1 range-len)
-                     expanded-range [(- ymin range-expansion)
-                                     (+ ymax range-expansion)]]
-                 {:linewidth 0,
-                  :nticks nil,
-                  :linecolor nil,
-                  :ticklen 3.65296803652968,
-                  :tickcolor "rgba(51,51,51,1)",
-                  :tickmode "array",
-                  :gridcolor "rgba(255,255,255,1)",
-                  :automargin true,
-                  :type "linear",
-                  :tickvals tickvals,
-                  :zeroline false,
-                  :title
-                  {:text (:y labels),
-                   :font {:color "rgba(0,0,0,1)", :family "", :size 14.6118721461187}},
-                  :tickfont {:color "rgba(77,77,77,1)", :family "", :size 11.689497716895},
-                  :autorange false,
-                  :showticklabels true,
-                  :showline false,
-                  :showgrid true,
-                  :ticktext ticktext,
-                  :ticks "outside",
-                  :gridwidth 0.66417600664176,
-                  :anchor "x",
-                  :domain [0 1],
-                  :hoverformat ".2f",
-                  :tickangle 0,
-                  :tickwidth 0.66417600664176,
-                  :categoryarray ticktext,
-                  :categoryorder "array",
-                  :range expanded-range},)
-        :hovermode "closest",
-        :margin
-        {:t 25.7412480974125,
-         :r 7.30593607305936,
-         :b 39.6955859969559,
-         :l 37.2602739726027},
-        :shapes
-        [{:yref "paper",
-          :fillcolor nil,
-          :xref "paper",
-          :y1 1,
-          :type "rect",
-          :line {:color nil, :width 0, :linetype []},
-          :y0 0,
-          :x1 1,
-          :x0 0}]},
-       :highlight
-       {:on "plotly_click",
-        :persistent false,
-        :dynamic false,
-        :selectize false,
-        :opacityDim 0.2,
-        :selected {:opacity 1},
-        :debounce 0},
-       :base_url "https://plot.ly",
-       :cur_data "1f2fea5b54d146",
-       :source "A",
-       :shinyEvents
-       ["plotly_hover"
-        "plotly_click"
-        "plotly_selected"
-        "plotly_relayout"
-        "plotly_brushed"
-        "plotly_brushing"
-        "plotly_clickannotation"
-        "plotly_doubleclick"
-        "plotly_deselect"
-        "plotly_afterplot"
-        "plotly_sunburstclick"],
-       :attrs {:1f2fea5b54d146 {:x {}, :y {}, :type "scatter"}},
-       :data
-       [{:y (:y data)
-         :hoveron "points",
-         :frame nil,
-         :hoverinfo "text",
-         :marker
-         {:autocolorscale false,
-          :color "rgba(0,0,0,1)",
-          :opacity 1,
-          :size 5.66929133858268,
-          :symbol "circle",
-          :line {:width 1.88976377952756, :color "rgba(0,0,0,1)"}},
-         :mode "markers"
-         :type "scatter",
-         :xaxis "x",
-         :showlegend false,
-         :yaxis "y",
-         :x (:x data)
-         :text (-> data
-                   (tc/select-columns [:x :y])
-                   (tc/rows :as-maps)
-                   (->> (mapv pr-str)))}]},
-      :evals [],
-      :jsHooks []})))
    -
    -
    -
    (require '[tech.v3.datatype.functional :as fun])
    +
    (defn ->ggplotly-spec [{:keys [layers labels]}]
+  (kind/htmlwidgets-ggplotly
+   (let [;; assuming a single layer for now:
+         {:keys [data xmin xmax ymin ymax]} (first layers)
+         ;; an auxiliary function to compute tick values:
+         ->tickvals (fn [l r]
+                      (let [jump (-> (- r l)
+                                     (/ 6)
+                                     math/floor
+                                     int
+                                     (max 1))]
+                        (-> l
+                            math/ceil
+                            (range r jump))))]
+     {:x
+      {:config
+       {:doubleClick "reset",
+        :modeBarButtonsToAdd ["hoverclosest" "hovercompare"],
+        :showSendToCloud false},
+       :layout
+       {:plot_bgcolor "rgba(235,235,235,1)",
+        :paper_bgcolor "rgba(255,255,255,1)",
+        :legend
+        {:bgcolor "rgba(255,255,255,1)",
+         :bordercolor "transparent",
+         :borderwidth 1.88976377952756,
+         :font {:color "rgba(0,0,0,1)", :family "", :size 11.689497716895}},
+        :xaxis (let [tickvals (->tickvals xmin xmax)
+                     ticktext (mapv str tickvals)
+                     range-len (- xmax xmin)
+                     range-expansion (* 0.1 range-len)
+                     expanded-range [(- xmin range-expansion)
+                                     (+ xmax range-expansion)]]
+                 {:linewidth 0,
+                  :nticks nil,
+                  :linecolor nil,
+                  :ticklen 3.65296803652968,
+                  :tickcolor "rgba(51,51,51,1)",
+                  :tickmode "array",
+                  :gridcolor "rgba(255,255,255,1)",
+                  :automargin true,
+                  :type "linear",
+                  :tickvals tickvals
+                  :zeroline false,
+                  :title
+                  {:text (:x labels),
+                   :font {:color "rgba(0,0,0,1)", :family "", :size 14.6118721461187}},
+                  :tickfont {:color "rgba(77,77,77,1)", :family "", :size 11.689497716895},
+                  :autorange false,
+                  :showticklabels true,
+                  :showline false,
+                  :showgrid true,
+                  :ticktext ticktext
+                  :ticks "outside",
+                  :gridwidth 0.66417600664176,
+                  :anchor "y",
+                  :domain [0 1],
+                  :hoverformat ".2f",
+                  :tickangle 0,
+                  :tickwidth 0.66417600664176,
+                  :categoryarray ticktext,
+                  :categoryorder "array",
+                  :range expanded-range},)
+        :font {:color "rgba(0,0,0,1)", :family "", :size 14.6118721461187},
+        :showlegend false,
+        :barmode "relative",
+        :yaxis (let [tickvals (->tickvals ymin ymax)
+                     ticktext (mapv str tickvals)
+                     range-len (- ymax ymin)
+                     range-expansion (* 0.1 range-len)
+                     expanded-range [(- ymin range-expansion)
+                                     (+ ymax range-expansion)]]
+                 {:linewidth 0,
+                  :nticks nil,
+                  :linecolor nil,
+                  :ticklen 3.65296803652968,
+                  :tickcolor "rgba(51,51,51,1)",
+                  :tickmode "array",
+                  :gridcolor "rgba(255,255,255,1)",
+                  :automargin true,
+                  :type "linear",
+                  :tickvals tickvals,
+                  :zeroline false,
+                  :title
+                  {:text (:y labels),
+                   :font {:color "rgba(0,0,0,1)", :family "", :size 14.6118721461187}},
+                  :tickfont {:color "rgba(77,77,77,1)", :family "", :size 11.689497716895},
+                  :autorange false,
+                  :showticklabels true,
+                  :showline false,
+                  :showgrid true,
+                  :ticktext ticktext,
+                  :ticks "outside",
+                  :gridwidth 0.66417600664176,
+                  :anchor "x",
+                  :domain [0 1],
+                  :hoverformat ".2f",
+                  :tickangle 0,
+                  :tickwidth 0.66417600664176,
+                  :categoryarray ticktext,
+                  :categoryorder "array",
+                  :range expanded-range},)
+        :hovermode "closest",
+        :margin
+        {:t 25.7412480974125,
+         :r 7.30593607305936,
+         :b 39.6955859969559,
+         :l 37.2602739726027},
+        :shapes
+        [{:yref "paper",
+          :fillcolor nil,
+          :xref "paper",
+          :y1 1,
+          :type "rect",
+          :line {:color nil, :width 0, :linetype []},
+          :y0 0,
+          :x1 1,
+          :x0 0}]},
+       :highlight
+       {:on "plotly_click",
+        :persistent false,
+        :dynamic false,
+        :selectize false,
+        :opacityDim 0.2,
+        :selected {:opacity 1},
+        :debounce 0},
+       :base_url "https://plot.ly",
+       :cur_data "1f2fea5b54d146",
+       :source "A",
+       :shinyEvents
+       ["plotly_hover"
+        "plotly_click"
+        "plotly_selected"
+        "plotly_relayout"
+        "plotly_brushed"
+        "plotly_brushing"
+        "plotly_clickannotation"
+        "plotly_doubleclick"
+        "plotly_deselect"
+        "plotly_afterplot"
+        "plotly_sunburstclick"],
+       :attrs {:1f2fea5b54d146 {:x {}, :y {}, :type "scatter"}},
+       :data
+       [{:y (:y data)
+         :hoveron "points",
+         :frame nil,
+         :hoverinfo "text",
+         :marker
+         {:autocolorscale false,
+          :color "rgba(0,0,0,1)",
+          :opacity 1,
+          :size 5.66929133858268,
+          :symbol "circle",
+          :line {:width 1.88976377952756, :color "rgba(0,0,0,1)"}},
+         :mode "markers"
+         :type "scatter",
+         :xaxis "x",
+         :showlegend false,
+         :yaxis "y",
+         :x (:x data)
+         :text (-> data
+                   (tc/select-columns [:x :y])
+                   (tc/rows :as-maps)
+                   (->> (mapv pr-str)))}]},
+      :evals [],
+      :jsHooks []})))
    +
    +
    +
    (require '[tech.v3.datatype.functional :as fun])

    A random walk example:

    -
    (let [n 100
-      xs (range n)
-      ys (reductions + (repeatedly n #(- (rand) 0.5)))
-      xmin (fun/reduce-min xs)
-      xmax (fun/reduce-max xs)
-      ymin (fun/reduce-min ys)
-      ymax (fun/reduce-max ys)
-      data (tc/dataset {:x xs
-                        :y ys})]
-  (->ggplotly-spec
-   {:layers [{:data data
-              :xmin xmin :xmax xmax
-              :ymin ymin :ymax ymax}]
-    :labels {:x "wt"
-             :y "mpg"}}))
    -
    -
    +
    (let [n 100
+      xs (range n)
+      ys (reductions + (repeatedly n #(- (rand) 0.5)))
+      xmin (fun/reduce-min xs)
+      xmax (fun/reduce-max xs)
+      ymin (fun/reduce-min ys)
+      ymax (fun/reduce-max ys)
+      data (tc/dataset {:x xs
+                        :y ys})]
+  (->ggplotly-spec
+   {:layers [{:data data
+              :xmin xmin :xmax xmax
+              :ymin ymin :ymax ymax}]
+    :labels {:x "wt"
+             :y "mpg"}}))
    + +

    3DMol.js

    Embedding a 3Dmol Viewer (original example):

    -
    (kind/reagent
- ['(fn [{:keys [data-pdb]}]
-     [:div {:style {:height "400px"
-                    :width "400px"
-                    :position :relative}
-            :class "viewer_3Dmoljs"
-            :data-pdb data-pdb
-            :data-backgroundcolor "0xffffff"
-            :data-style "stick"
-            :data-ui true}])
-  {:data-pdb "2POR"}]
- ;; Note we need to mention the dependency:
- {:html/deps [:three-d-mol]})
    -
    -
    +
    (kind/reagent
+ ['(fn [{:keys [data-pdb]}]
+     [:div {:style {:height "400px"
+                    :width "400px"
+                    :position :relative}
+            :class "viewer_3Dmoljs"
+            :data-pdb data-pdb
+            :data-backgroundcolor "0xffffff"
+            :data-style "stick"
+            :data-ui true}])
+  {:data-pdb "2POR"}]
+ ;; Note we need to mention the dependency:
+ {:html/deps [:three-d-mol]})
    + +

    Using 3Dmol within your code (inspired by these examples):

    -
    (defonce pdb-2POR
-(slurp "https://files.rcsb.org/download/2POR.pdb"))
    -
    -
    -
    (kind/reagent
-['(fn [{:keys [pdb-data]}]
-    [:div
-     {:style {:width "100%"
-              :height "500px"
-              :position "relative"}
-      :ref (fn [el]
-             (let [config (clj->js
-                           {:backgroundColor "0xffffff"})
-                   viewer (.createViewer js/$3Dmol el)]
-               (.setViewStyle viewer (clj->js
-                                      {:style "outline"}))
-               (.addModelsAsFrames viewer pdb-data "pdb")
-               (.addSphere viewer (clj->js
-                                   {:center {:x 0
-                                             :y 0
-                                             :z 0}
-                                    :radius 5
-                                    :color "green"
-                                    :alpha 0.2}))
-               (.zoomTo viewer)
-               (.render viewer)
-               (.zoom viewer 0.8 2000)))}])
- {:pdb-data pdb-2POR}]
-;; Note we need to mention the dependency:
-{:html/deps [:three-d-mol]})
    -
    -
    +
    (defonce pdb-2POR
+(slurp "https://files.rcsb.org/download/2POR.pdb"))
    + +
    +
    (kind/reagent
+['(fn [{:keys [pdb-data]}]
+    [:div
+     {:style {:width "100%"
+              :height "500px"
+              :position "relative"}
+      :ref (fn [el]
+             (let [config (clj->js
+                           {:backgroundColor "0xffffff"})
+                   viewer (.createViewer js/$3Dmol el)]
+               (.setViewStyle viewer (clj->js
+                                      {:style "outline"}))
+               (.addModelsAsFrames viewer pdb-data "pdb")
+               (.addSphere viewer (clj->js
+                                   {:center {:x 0
+                                             :y 0
+                                             :z 0}
+                                    :radius 5
+                                    :color "green"
+                                    :alpha 0.2}))
+               (.zoomTo viewer)
+               (.render viewer)
+               (.zoom viewer 0.8 2000)))}])
+ {:pdb-data pdb-2POR}]
+;; Note we need to mention the dependency:
+{:html/deps [:three-d-mol]})
    +
    +

    Video

    -
    (kind/video {:youtube-id "DAQnvAgBma8"})
    +
    (kind/video {:youtube-id "DAQnvAgBma8"})
    -
    (kind/video {:youtube-id "DAQnvAgBma8"
-             :allowfullscreen false})
    +
    (kind/video {:youtube-id "DAQnvAgBma8"
+             :allowfullscreen false})
    -
    (kind/video {:youtube-id "DAQnvAgBma8"
-             :iframe-width 480
-             :iframe-height 270})
    +
    (kind/video {:youtube-id "DAQnvAgBma8"
+             :iframe-width 480
+             :iframe-height 270})
    -
    (kind/video {:youtube-id "DAQnvAgBma8"
-             :embed-options {:mute 1
-                             :controls 0}})
    +
    (kind/video {:youtube-id "DAQnvAgBma8"
+             :embed-options {:mute 1
+                             :controls 0}})

    See, e.g., HTML Youtube Videos on w3schools.

    @@ -2739,88 +2751,88 @@

    Video

    Embedded Portal

    We may embed Portal’s data-navigating viewers using kind/portal.

    -
    (kind/portal {:x (range 3)})
    +
    (kind/portal {:x (range 3)})

    Note that kind/portal applies the kind-portal adapter to nested kinds.

    -
    (kind/portal
-[(kind/hiccup [:img {:height 50 :width 50
-                     :src "https://clojure.org/images/clojure-logo-120b.png"}])
- (kind/hiccup [:img {:height 50 :width 50
-                     :src "https://raw.githubusercontent.com/djblue/portal/fbc54632adc06c6e94a3d059c858419f0063d1cf/resources/splash.svg"}])])
    +
    (kind/portal
+[(kind/hiccup [:img {:height 50 :width 50
+                     :src "https://clojure.org/images/clojure-logo-120b.png"}])
+ (kind/hiccup [:img {:height 50 :width 50
+                     :src "https://raw.githubusercontent.com/djblue/portal/fbc54632adc06c6e94a3d059c858419f0063d1cf/resources/splash.svg"}])])
    -
    (kind/portal
-[(kind/hiccup [:big [:big "a plot"]])
- (random-vega-lite-plot 9)])
    +
    (kind/portal
+[(kind/hiccup [:big [:big "a plot"]])
+ (random-vega-lite-plot 9)])

    Nesting kinds in Hiccup

    Kinds are treated recursively inside Hiccup:

    -
    (kind/hiccup
- [:div {:style {:background "#f5f3ff"
-                :border "solid"}}
-
-  [:hr]
-  [:pre [:code "kind/md"]]
-  (kind/md "*some text* **some more text**")
-
-  [:hr]
-  [:pre [:code "kind/code"]]
-  (kind/code "{:x (1 2 [3 4])}")
-
-  [:hr]
-  [:pre [:code "kind/dataset"]]
-  (tc/dataset {:x (range 33)
-               :y (map inc (range 33))})
-
-  [:hr]
-  [:pre [:code "kind/table"]]
-  (kind/table
-   (tc/dataset {:x (range 33)
-                :y (map inc (range 33))}))
-
-  [:hr]
-  [:pre [:code "kind/vega-lite"]]
-  (random-vega-lite-plot 9)
-
-  [:hr]
-  [:pre [:code "kind/vega-lite"]]
-  (-> {:data {:values "x,y
-1,1
-2,4
-3,9
--1,1
--2,4
--3,9"
-              :format {:type :csv}},
-       :mark "point"
-       :encoding
-       {:x {:field "x", :type "quantitative"}
-        :y {:field "y", :type "quantitative"}}}
-      kind/vega-lite)
-
-  [:hr]
-  [:pre [:code "kind/reagent"]]
-  (kind/reagent
-   ['(fn [numbers]
-       [:p {:style {:background "#d4ebe9"}}
-        (pr-str (map inc numbers))])
-    (vec (range 40))])])
    +
    (kind/hiccup
+ [:div {:style {:background "#f5f3ff"
+                :border "solid"}}
+
+  [:hr]
+  [:pre [:code "kind/md"]]
+  (kind/md "*some text* **some more text**")
+
+  [:hr]
+  [:pre [:code "kind/code"]]
+  (kind/code "{:x (1 2 [3 4])}")
+
+  [:hr]
+  [:pre [:code "kind/dataset"]]
+  (tc/dataset {:x (range 33)
+               :y (map inc (range 33))})
+
+  [:hr]
+  [:pre [:code "kind/table"]]
+  (kind/table
+   (tc/dataset {:x (range 33)
+                :y (map inc (range 33))}))
+
+  [:hr]
+  [:pre [:code "kind/vega-lite"]]
+  (random-vega-lite-plot 9)
+
+  [:hr]
+  [:pre [:code "kind/vega-lite"]]
+  (-> {:data {:values "x,y
+1,1
+2,4
+3,9
+-1,1
+-2,4
+-3,9"
+              :format {:type :csv}},
+       :mark "point"
+       :encoding
+       {:x {:field "x", :type "quantitative"}
+        :y {:field "y", :type "quantitative"}}}
+      kind/vega-lite)
+
+  [:hr]
+  [:pre [:code "kind/reagent"]]
+  (kind/reagent
+   ['(fn [numbers]
+       [:p {:style {:background "#d4ebe9"}}
+        (pr-str (map inc numbers))])
+    (vec (range 40))])])
    kind/md

    some text some more text

    kind/code
    {:x (1 2 [3 4])}
    kind/dataset

    _unnamed [33 2]:

    @@ -3066,25 +3078,25 @@

    Nesting kinds in H

    -
    kind/vega-lite
    kind/vega-lite
    kind/reagent
    +
    kind/vega-lite
    kind/vega-lite
    kind/reagent

    Nesting kinds in Tables

    Kinds are treated recursively inside Tables:

    -
    (kind/table
-{:column-names [(kind/hiccup
-                 [:div {:style {:background-color "#ccaabb"}} [:big ":x"]])
-                (kind/hiccup
-                 [:div {:style {:background-color "#aabbcc"}} [:big ":y"]])]
- :row-vectors [[(kind/md "*some text* **some more text**")
-                (kind/code "{:x (1 2 [3 4])}")]
-               [(tc/dataset {:x (range 3)
-                             :y (map inc (range 3))})
-                (random-vega-lite-plot 9)]
-               [(kind/hiccup [:div.clay-limit-image-width
-                              clay-image])
-                (kind/md "$x^2$")]]})
    +
    (kind/table
+{:column-names [(kind/hiccup
+                 [:div {:style {:background-color "#ccaabb"}} [:big ":x"]])
+                (kind/hiccup
+                 [:div {:style {:background-color "#aabbcc"}} [:big ":y"]])]
+ :row-vectors [[(kind/md "*some text* **some more text**")
+                (kind/code "{:x (1 2 [3 4])}")]
+               [(tc/dataset {:x (range 3)
+                             :y (map inc (range 3))})
+                (random-vega-lite-plot 9)]
+               [(kind/hiccup [:div.clay-limit-image-width
+                              clay-image])
+                (kind/md "$x^2$")]]})
    @@ -3117,7 +3129,7 @@

    Nesting kinds in T 12
    23
    - +
    @@ -3131,17 +3143,17 @@

    Nesting kinds in T

    -
    (kind/table
-{:column-names ["size" "square"]
- :row-vectors (for [i (range 20)]
-                (let [size (* i 10)
-                      px (str size "px")]
-                  [size
-                   (kind/hiccup
-                    [:div {:style {:height px
-                                   :width px
-                                   :background-color "purple"}}])]))}
-{:use-datatables true})
    +
    (kind/table
+{:column-names ["size" "square"]
+ :row-vectors (for [i (range 20)]
+                (let [size (* i 10)
+                      px (str size "px")]
+                  [size
+                   (kind/hiccup
+                    [:div {:style {:height px
+                                   :width px
+                                   :background-color "purple"}}])]))}
+{:use-datatables true})
    @@ -3152,9 +3164,9 @@

    Nesting kinds in T

    More nesting examples

    -
    {:plot (random-vega-lite-plot 9)
- :dataset (tc/dataset {:x (range 3)
-                       :y (repeatedly 3 rand)})}
    +
    {:plot (random-vega-lite-plot 9)
+ :dataset (tc/dataset {:x (range 3)
+                       :y (repeatedly 3 rand)})}

    {

    @@ -3169,7 +3181,7 @@

    More nesting example

    @@ -3198,15 +3210,15 @@

    More nesting example

    - + - + - +
    - +
    00.722024840.28186983
    10.175793780.35073134
    20.391052020.93817708
    @@ -3217,11 +3229,11 @@

    More nesting example

    }

    -
    [(random-vega-lite-plot 9)
- (tc/dataset {:x (range 3)
-              :y (repeatedly 3 rand)})]
    +
    [(random-vega-lite-plot 9)
+ (tc/dataset {:x (range 3)
+              :y (repeatedly 3 rand)})]
    -

    [

    _unnamed [3 2]:

    +

    [

    _unnamed [3 2]:

    @@ -3232,15 +3244,15 @@

    More nesting example

    - + - + - +
    00.353235700.94464030
    10.103153390.61329607
    20.781526810.28293901
    @@ -3251,13 +3263,13 @@

    More nesting example

    Fragments

    kind/fragment is a special kind. It expects a sequential value and generates multiple items, of potentially multiple kinds, from its elements.

    -
    (->> ["purple" "darkgreen" "brown"]
-     (mapcat (fn [color]
-               [(kind/md (str "### subsection: " color))
-                (kind/hiccup [:div {:style {:background-color color
-                                            :color "lightgrey"}}
-                              [:big [:p color]]])]))
-     kind/fragment)
    +
    (->> ["purple" "darkgreen" "brown"]
+     (mapcat (fn [color]
+               [(kind/md (str "### subsection: " color))
+                (kind/hiccup [:div {:style {:background-color color
+                                            :color "lightgrey"}}
+                              [:big [:p color]]])]))
+     kind/fragment)

    subsection: purple

    @@ -3271,17 +3283,17 @@

    subsection: darkgreen

    subsection: brown

    brown

    -
    (->> (range 3)
-     kind/fragment)
    +
    (->> (range 3)
+     kind/fragment)
    -
    0
    +
    0
    -
    1
    +
    1
    -
    2
    +
    2

    Importantly, markdown subsections affect the Quarto table of contents.

    @@ -3290,27 +3302,27 @@

    subsection: brown

    Functions

    kind/fn is a special kind. It is displayed by first evaluating the given function and arguments, then proceeding recursively with the resulting value.

    -
    (kind/fn
-  [+ 1 2])
    +
    (kind/fn
+  [+ 1 2])
    -
    3
    +
    3
    -
    (kind/fn
-  {:kindly/f (fn [{:keys [x y]}]
-               (+ x y))
-   :x 1
-   :y 2})
    +
    (kind/fn
+  {:kindly/f (fn [{:keys [x y]}]
+               (+ x y))
+   :x 1
+   :y 2})
    -
    3
    +
    3
    -
    (kind/fn
-  [tc/dataset
-   {:x (range 3)
-    :y (repeatedly 3 rand)}])
    +
    (kind/fn
+  [tc/dataset
+   {:x (range 3)
+    :y (repeatedly 3 rand)}])

    _unnamed [3 2]:

    @@ -3324,24 +3336,24 @@

    Functions

    0 -0.36037476 +0.97731233 1 -0.42103896 +0.49258800 2 -0.18919006 +0.63308486
    -
    (kind/fn
-  {:kindly/f tc/dataset
-   :x (range 3)
-   :y (repeatedly 3 rand)})
    +
    (kind/fn
+  {:kindly/f tc/dataset
+   :x (range 3)
+   :y (repeatedly 3 rand)})

    _unnamed [3 2]:

    @@ -3355,15 +3367,15 @@

    Functions

    0 -0.85106753 +0.64442619 1 -0.21247374 +0.98455412 2 -0.52824681 +0.62577222 @@ -3375,12 +3387,12 @@

    Delays

    Clay makes sure to dererence Delays when passing values for visualization.

    This is handy for slow example snippets and explorations, that one would typically not like to slow down the evaluation of the whole namespace, but would like to visualize them on demand and also include in them in the final document.

    -
    (delay
-  (Thread/sleep 500)
-  (+ 1 2))
    +
    (delay
+  (Thread/sleep 500)
+  (+ 1 2))
    -
    3
    +
    3
    @@ -3388,22 +3400,22 @@

    Referring to files

    In data visualizations, one can directly refrer to files places under "notebooks/" or "src/". By default, all files except of these directories, except for Clojure files, are copied alongside the HTML target.

    This default can be overridden using the :subdirs-to-sync config option. E.g., :subdirs-to-sync ["notebooks" "data"] will copy files from the "notebooks" and "data" directories, but not from "src".

    -
    (kind/hiccup
- [:img {:src "notebooks/images/Clay.svg.png"}])
    +
    (kind/hiccup
+ [:img {:src "notebooks/images/Clay.svg.png"}])
    -
    (kind/vega-lite
- {:data {:url "notebooks/datasets/iris.csv"},
-  :mark "rule",
-  :encoding {:opacity {:value 0.2}
-             :size {:value 3}
-             :x {:field "sepal_width", :type "quantitative"},
-             :x2 {:field "sepal_length", :type "quantitative"},
-             :y {:field "petal_width", :type "quantitative"},
-             :y2 {:field "petal_length", :type "quantitative"},
-             :color {:field "species", :type "nominal"}}
-  :background "floralwhite"})
    +
    (kind/vega-lite
+ {:data {:url "notebooks/datasets/iris.csv"},
+  :mark "rule",
+  :encoding {:opacity {:value 0.2}
+             :size {:value 3}
+             :x {:field "sepal_width", :type "quantitative"},
+             :x2 {:field "sepal_length", :type "quantitative"},
+             :y {:field "petal_width", :type "quantitative"},
+             :y2 {:field "petal_length", :type "quantitative"},
+             :color {:field "species", :type "nominal"}}
+  :background "floralwhite"})
    @@ -3420,20 +3432,20 @@

    Hiding code

    Test generation

    (experimental 🛠)

    -
    (+ 1 2)
    +
    (+ 1 2)
    -
    3
    +
    3

    We generate tests checking whether this last value is greater than 2.9. We can do it in a few ways.

    We include the test annotations in the markdown text, since the annotations themselves are invisible.

    -
    (kind/test-last [> 2.9])
-
-^kind/test-last
-[> 2.9]
-
-(kindly/check > 2.9)
    +
    (kind/test-last [> 2.9])
+
+^kind/test-last
+[> 2.9]
+
+(kindly/check > 2.9)

    See the generated test/index_generated_test.clj.

    For a detailed example using this mechanism, see the source of the ClojisR tutorial.

    diff --git a/test/index_generated_test.clj b/test/index_generated_test.clj index 6b7ecbf..da98b82 100644 --- a/test/index_generated_test.clj +++ b/test/index_generated_test.clj @@ -327,34 +327,42 @@ (def var53 nil) -(def var54 (+ 4 5)) +(def + var54 + (comment (clay/make-hiccup {:source-path "notebooks/index.clj"}))) -(def var55 (str "abcd" "efgh")) +(def var55 nil) -(def var56 nil) +(def var56 (+ 4 5)) -(def var57 (kind/hidden 9)) +(def var57 (str "abcd" "efgh")) (def var58 nil) +(def var59 (kind/hidden 9)) + + +(def var60 nil) + + (def - var59 + var61 (kind/hiccup [:ul [:li [:p "hi"]] [:li [:big [:big [:p {:style {:color "#7F5F3F"}} "hello"]]]]])) -(def var60 nil) +(def var62 nil) (def - var61 + var63 (kind/reagent ['(fn [numbers] @@ -362,11 +370,11 @@ (vec (range 40))])) -(def var62 nil) +(def var64 nil) (def - var63 + var65 (kind/reagent ['(fn [] @@ -386,50 +394,50 @@ :on-click (fn* [] (swap! *click-count inc))}]])))])) -(def var64 nil) +(def var66 nil) (def - var65 + var67 (kind/html "
    ")) (def - var66 + var68 (kind/html "\n\n\n ")) -(def var67 nil) +(def var69 nil) (def - var68 + var70 (kind/md "This is [markdown](https://www.markdownguide.org/).")) (def - var69 + var71 (kind/md ["\n* This is [markdown](https://www.markdownguide.org/).\n * *Isn't it??*" "\n* Here is **some more** markdown."])) -(def var70 nil) +(def var72 nil) -(def var71 (kind/md "Let $x=9$. Then $$x+11=20$$")) +(def var73 (kind/md "Let $x=9$. Then $$x+11=20$$")) -(def var72 nil) +(def var74 nil) -(def var73 (import javax.imageio.ImageIO java.net.URL)) +(def var75 (import javax.imageio.ImageIO java.net.URL)) (def - var74 + var76 (defonce clay-image (-> @@ -438,14 +446,14 @@ (ImageIO/read)))) -(def var75 clay-image) +(def var77 clay-image) -(def var76 nil) +(def var78 nil) (def - var77 + var79 (def people-as-maps (->> @@ -459,26 +467,26 @@ (def - var78 + var80 (def people-as-vectors (->> people-as-maps (mapv (juxt :preferred-language :age))))) -(def var79 (take 5 people-as-maps)) +(def var81 (take 5 people-as-maps)) -(def var80 (take 5 people-as-vectors)) +(def var82 (take 5 people-as-vectors)) -(def var81 (->> people-as-vectors (take 5) set)) +(def var83 (->> people-as-vectors (take 5) set)) -(def var82 nil) +(def var84 nil) (def - var83 + var85 (def nested-structure-1 {:vector-of-numbers [2 9 -1], @@ -490,128 +498,128 @@ :dataset (tc/dataset {:x (range 3), :y [:A :B :C]})})) -(def var84 nested-structure-1) +(def var86 nested-structure-1) -(def var85 nil) +(def var87 nil) -(def var86 (kind/pprint nested-structure-1)) +(def var88 (kind/pprint nested-structure-1)) -(def var87 nil) +(def var89 nil) -(def var88 (require '[tablecloth.api :as tc])) +(def var90 (require '[tablecloth.api :as tc])) -(def var89 (-> {:x (range 6), :y [:A :B :C :A :B :C]} tc/dataset)) +(def var91 (-> {:x (range 6), :y [:A :B :C :A :B :C]} tc/dataset)) -(def var90 (-> {:x [1 [2 3] 4], :y [:A :B :C]} tc/dataset)) +(def var92 (-> {:x [1 [2 3] 4], :y [:A :B :C]} tc/dataset)) -(def var91 (-> [{:x 1, :y 2, :z 3} {:y 4, :z 5}] tc/dataset)) +(def var93 (-> [{:x 1, :y 2, :z 3} {:y 4, :z 5}] tc/dataset)) -(def var92 (-> people-as-maps tc/dataset)) +(def var94 (-> people-as-maps tc/dataset)) -(def var93 nil) +(def var95 nil) (def - var94 + var96 (-> {:x (range 30)} tc/dataset (kind/dataset #:dataset{:print-range 6}))) -(def var95 nil) +(def var97 nil) (def - var96 + var98 (kind/table {:column-names [:preferred-language :age], :row-vectors people-as-vectors})) -(def var97 nil) +(def var99 nil) -(def var98 (kind/table {:row-vectors (take 5 people-as-vectors)})) +(def var100 (kind/table {:row-vectors (take 5 people-as-vectors)})) -(def var99 nil) +(def var101 nil) -(def var100 (kind/table {:row-maps (take 5 people-as-maps)})) +(def var102 (kind/table {:row-maps (take 5 people-as-maps)})) -(def var101 nil) +(def var103 nil) (def - var102 + var104 (kind/table {:column-names [:preferred-language], :row-maps (take 5 people-as-maps)})) -(def var103 nil) +(def var105 nil) -(def var104 (kind/table (take 5 people-as-vectors))) +(def var106 (kind/table (take 5 people-as-vectors))) -(def var105 (kind/table (take 5 people-as-maps))) +(def var107 (kind/table (take 5 people-as-maps))) -(def var106 nil) +(def var108 nil) -(def var107 (kind/table {:x (range 6), :y [:A :B :C :A :B :C]})) +(def var109 (kind/table {:x (range 6), :y [:A :B :C :A :B :C]})) -(def var108 nil) +(def var110 nil) -(def var109 (def people-as-dataset (tc/dataset people-as-maps))) +(def var111 (def people-as-dataset (tc/dataset people-as-maps))) -(def var110 (-> people-as-dataset kind/table)) +(def var112 (-> people-as-dataset kind/table)) -(def var111 nil) +(def var113 nil) (def - var112 + var114 (-> people-as-dataset (kind/table #:element{:max-height "300px"}))) -(def var113 nil) +(def var115 nil) (def - var114 + var116 (-> people-as-maps tc/dataset (kind/table {:use-datatables true}))) (def - var115 + var117 (-> people-as-dataset (kind/table {:use-datatables true, :datatables {:scrollY 300}}))) -(def var116 nil) +(def var118 nil) (def - var117 + var119 (-> (toydata/iris-ds) (noj.stats/linear-regression-model @@ -620,11 +628,11 @@ ml/thaw-model)) -(def var118 nil) +(def var120 nil) (def - var119 + var121 (defn vega-lite-point-plot [data] @@ -640,7 +648,7 @@ (def - var120 + var122 (defn random-data [n] @@ -652,21 +660,21 @@ (def - var121 + var123 (defn random-vega-lite-plot [n] (-> n random-data vega-lite-point-plot))) -(def var122 (random-vega-lite-plot 9)) +(def var124 (random-vega-lite-plot 9)) -(def var123 nil) +(def var125 nil) (def - var124 + var126 (-> {:data {:values "x,y\n1,1\n2,4\n3,9\n-1,1\n-2,4\n-3,9", @@ -678,11 +686,11 @@ kind/vega-lite)) -(def var125 nil) +(def var127 nil) (def - var126 + var128 (def cytoscape-example {:elements @@ -709,21 +717,21 @@ :layout {:name "preset", :padding 5}})) -(def var127 (kind/cytoscape cytoscape-example)) +(def var129 (kind/cytoscape cytoscape-example)) (def - var128 + var130 (-> cytoscape-example (kind/cytoscape #:element{:style {:width "100px", :height "100px"}}))) -(def var129 nil) +(def var131 nil) (def - var130 + var132 (def echarts-example {:title {:text "Echarts Example"}, @@ -735,21 +743,21 @@ :series [{:name "sales", :type "bar", :data [5 20 36 10 10 20]}]})) -(def var131 (kind/echarts echarts-example)) +(def var133 (kind/echarts echarts-example)) (def - var132 + var134 (-> echarts-example (kind/echarts #:element{:style {:width "500px", :height "200px"}}))) -(def var133 nil) +(def var135 nil) (def - var134 + var136 (def plotly-example {:data @@ -764,21 +772,21 @@ :layout {:title "Plotly example"}})) -(def var135 (kind/plotly plotly-example)) +(def var137 (kind/plotly plotly-example)) (def - var136 + var138 (-> plotly-example (kind/plotly #:element{:style {:width "300px", :height "300px"}}))) -(def var137 nil) +(def var139 nil) (def - var138 + var140 (kind/highcharts {:title {:text "Line chart"}, :subtitle {:text "By Job Category"}, @@ -853,56 +861,56 @@ :verticalAlign "bottom"}}}]}})) -(def var139 nil) +(def var141 nil) (def - var140 + var142 (kind/observable "\n//| panel: input\nviewof bill_length_min = Inputs.range(\n [32, 50],\n {value: 35, step: 1, label: 'Bill length (min):'}\n )\nviewof islands = Inputs.checkbox(\n ['Torgersen', 'Biscoe', 'Dream'],\n { value: ['Torgersen', 'Biscoe'],\n label: 'Islands:'\n }\n )\n\nPlot.rectY(filtered,\n Plot.binX(\n {y: 'count'},\n {x: 'body_mass_g', fill: 'species', thresholds: 20}\n ))\n .plot({\n facet: {\n data: filtered,\n x: 'sex',\n y: 'species',\n marginRight: 80\n },\n marks: [\n Plot.frame(),\n ]\n }\n )\nInputs.table(filtered)\npenguins = FileAttachment('notebooks/datasets/palmer-penguins.csv').csv({ typed: true })\nfiltered = penguins.filter(function(penguin) {\n return bill_length_min < penguin.bill_length_mm &&\n islands.includes(penguin.island);\n })\n")) -(def var141 nil) +(def var143 nil) (def - var142 + var144 (kind/observable "athletes = FileAttachment('notebooks/datasets/athletes.csv').csv({typed: true})")) -(def var143 (kind/observable "athletes")) +(def var145 (kind/observable "athletes")) -(def var144 (kind/observable "Inputs.table(athletes)")) +(def var146 (kind/observable "Inputs.table(athletes)")) (def - var145 + var147 (kind/observable "\nPlot.plot({\n grid: true,\n facet: {\n data: athletes,\n y: 'sex'\n },\n marks: [\n Plot.rectY(\n athletes,\n Plot.binX({y: 'count'}, {x: 'weight', fill: 'sex'})\n ),\n Plot.ruleY([0])\n ]\n})\n")) (def - var146 + var148 (kind/observable "population = FileAttachment('notebooks/datasets/population.json').json()")) -(def var147 (kind/observable "population")) +(def var149 (kind/observable "population")) (def - var148 + var150 (kind/observable " import { chart } with { population as data } from '@d3/zoomable-sunburst'\n chart")) -(def var149 nil) +(def var151 nil) (def - var150 + var152 (kind/reagent ['(fn [] @@ -927,11 +935,11 @@ #:html{:deps [:leaflet]})) -(def var151 nil) +(def var153 nil) (def - var152 + var154 (let [letter-frequencies [{:letter "A", :frequency 0.08167} @@ -998,11 +1006,11 @@ #:html{:deps [:d3]}))) -(def var153 nil) +(def var155 nil) (def - var154 + var156 (defn ->ggplotly-spec [{:keys [layers labels]}] @@ -1198,14 +1206,14 @@ :jsHooks []})))) -(def var155 (require '[tech.v3.datatype.functional :as fun])) +(def var157 (require '[tech.v3.datatype.functional :as fun])) -(def var156 nil) +(def var158 nil) (def - var157 + var159 (let [n 100 @@ -1229,11 +1237,11 @@ :labels {:x "wt", :y "mpg"}}))) -(def var158 nil) +(def var160 nil) (def - var159 + var161 (kind/reagent ['(fn [{:keys [data-pdb]}] @@ -1248,16 +1256,16 @@ #:html{:deps [:three-d-mol]})) -(def var160 nil) +(def var162 nil) (def - var161 + var163 (defonce pdb-2POR (slurp "https://files.rcsb.org/download/2POR.pdb"))) (def - var162 + var164 (kind/reagent ['(fn [{:keys [pdb-data]}] @@ -1287,40 +1295,40 @@ #:html{:deps [:three-d-mol]})) -(def var163 nil) +(def var165 nil) -(def var164 (kind/video {:youtube-id "DAQnvAgBma8"})) +(def var166 (kind/video {:youtube-id "DAQnvAgBma8"})) (def - var165 + var167 (kind/video {:youtube-id "DAQnvAgBma8", :allowfullscreen false})) (def - var166 + var168 (kind/video {:youtube-id "DAQnvAgBma8", :iframe-width 480, :iframe-height 270})) (def - var167 + var169 (kind/video {:youtube-id "DAQnvAgBma8", :embed-options {:mute 1, :controls 0}})) -(def var168 nil) +(def var170 nil) -(def var169 (kind/portal {:x (range 3)})) +(def var171 (kind/portal {:x (range 3)})) -(def var170 nil) +(def var172 nil) (def - var171 + var173 (kind/portal [(kind/hiccup [:img @@ -1336,16 +1344,16 @@ (def - var172 + var174 (kind/portal [(kind/hiccup [:big [:big "a plot"]]) (random-vega-lite-plot 9)])) -(def var173 nil) +(def var175 nil) (def - var174 + var176 (kind/hiccup [:div {:style {:background "#f5f3ff", :border "solid"}} @@ -1386,11 +1394,11 @@ (vec (range 40))])])) -(def var175 nil) +(def var177 nil) (def - var176 + var178 (kind/table {:column-names [(kind/hiccup @@ -1407,7 +1415,7 @@ (def - var177 + var179 (kind/table {:column-names ["size" "square"], :row-vectors @@ -1423,26 +1431,26 @@ {:use-datatables true})) -(def var178 nil) +(def var180 nil) (def - var179 + var181 {:plot (random-vega-lite-plot 9), :dataset (tc/dataset {:x (range 3), :y (repeatedly 3 rand)})}) (def - var180 + var182 [(random-vega-lite-plot 9) (tc/dataset {:x (range 3), :y (repeatedly 3 rand)})]) -(def var181 nil) +(def var183 nil) (def - var182 + var184 (->> ["purple" "darkgreen" "brown"] (mapcat @@ -1456,44 +1464,44 @@ kind/fragment)) -(def var183 (->> (range 3) kind/fragment)) +(def var185 (->> (range 3) kind/fragment)) -(def var184 nil) +(def var186 nil) -(def var185 (kind/fn [+ 1 2])) +(def var187 (kind/fn [+ 1 2])) (def - var186 + var188 (kind/fn {:kindly/f (fn [{:keys [x y]}] (+ x y)), :x 1, :y 2})) (def - var187 + var189 (kind/fn [tc/dataset {:x (range 3), :y (repeatedly 3 rand)}])) (def - var188 + var190 (kind/fn {:kindly/f tc/dataset, :x (range 3), :y (repeatedly 3 rand)})) -(def var189 nil) +(def var191 nil) -(def var190 (delay (Thread/sleep 500) (+ 1 2))) +(def var192 (delay (Thread/sleep 500) (+ 1 2))) -(def var191 nil) +(def var193 nil) -(def var192 (kind/hiccup [:img {:src "notebooks/images/Clay.svg.png"}])) +(def var194 (kind/hiccup [:img {:src "notebooks/images/Clay.svg.png"}])) (def - var193 + var195 (kind/vega-lite {:data {:url "notebooks/datasets/iris.csv"}, :mark "rule", @@ -1508,29 +1516,29 @@ :background "floralwhite"})) -(def var194 nil) +(def var196 nil) -(def var195 (+ 1 2)) +(def var197 (+ 1 2)) -(deftest test196 (is (> var195 2.9))) +(deftest test198 (is (> var197 2.9))) -(deftest test197 (is (> var195 2.9))) +(deftest test199 (is (> var197 2.9))) -(deftest test198 (is (> var195 2.9))) +(deftest test200 (is (> var197 2.9))) -(def var199 nil) +(def var201 nil) (def - var200 + var202 (kindly/hide-code (kind/code "(kind/test-last [> 2.9])\n\n^kind/test-last\n[> 2.9]\n\n(kindly/check > 2.9)"))) -(def var201 nil) +(def var203 nil)