### Clay Configuration Parameters Reference Source: https://scicloj.github.io/clay/index A comprehensive reference of configuration parameters available for the `make!` function in Clay, detailing each key's purpose and providing example values for common use cases. ```APIDOC :source-path: ["notebooks/index.clj"] (files to render) :title: "My Title" (sets the HTML title that appears in the browser tab bar) :favicon: "favicon.ico" (sets a page favicon) :show: false (when true (the default) updates the browser view (starts the HTML server if necessary)) :browse: false (when true (the default) opens a new browser tab when the HTML server is started for the first time) :ide: :calva ((experimental) causes make! to open a webview instead of browser, use :browse :browser to avoid) :single-form: (inc 1) (render just one form) :format: [:quarto :html] (output quarto markdown and/or html) :quarto: {:highlight-style :solarized} (adds configuration for Quarto) :base-target-path: "temp" (the output directory) :base-source-path: "notebooks" (where to find :source-path) :clean-up-target-dir: true (delete (!) target directory before repopulating it) :remote-repo: {:git-url "https://github.com/scicloj/clay" :branch "main"} (linking to source) :hide-info-line: true (hiding the source reference at the bottom) :hide-ui-header: true (hiding the ui info at the top) :pprint-margin: nil or 72 (result rendering will try to wrap anything going beyond this value) :post-process: #(str/replace "#3" "4") (post-processing the resulting HTML) :live-reload: true or :toggle (make automatically after its source file is changed) :flatten-targets: false ((experimental) whether to place the output in a subdirectory or not) :subdirs-to-sync: ["static"] ((experimental) subdirs to copy non-clojure files from) :keep-sync-root: false ((experimental) keep the subdir prefix) :render: true ((experimental) overrides :show :serve :browse and :live-reload to false) :aliases: [:markdown] ((experimental) a vector of aliases (sub maps in configuration) to merge) :config/transform: my.ns/my-fn ((experimental) hook to update config per namespace) ``` -------------------------------- ### Create Vega-Lite Visualization with Local Data in Clay Source: https://scicloj.github.io/clay/index Illustrates how to create a Vega-Lite visualization in Clay, referencing a local CSV data file from the 'notebooks/datasets/' directory. This example sets up a rule mark with quantitative and nominal encodings. ```Clojure (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"}) ``` -------------------------------- ### Create Quarto Book with Custom Favicon Source: https://scicloj.github.io/clay/index Extends the Quarto book creation example by demonstrating how to specify a custom favicon for the generated book. This allows for branding and visual customization of the output. ```Clojure (comment (clay/make! {:format [:quarto :html] :base-source-path "notebooks" :source-path ["index.clj" "chapter.clj" "another_chapter.md"] :base-target-path "book" :book {:title "Book Example" :favicon "notebooks/favicon.ico"} ;; Empty the target directory first: :clean-up-target-dir true})) ``` -------------------------------- ### Render Clojure Notebook with Clay (Default Path) Source: https://scicloj.github.io/clay/index Demonstrates rendering a Clojure notebook using Clay's `make!` function. This example shows how Clay automatically preserves the source directory structure in the target path by default. ```Clojure (clay/make! {:source-path "notebooks/subdir/another_demo.clj"}) ``` -------------------------------- ### Run Scicloj Clay CLI with Alias Source: https://scicloj.github.io/clay/index Executes the Scicloj Clay CLI using a previously defined `deps.edn` alias. This provides a more concise and user-friendly way to start Clay. ```Shell clojure -M:clay ``` -------------------------------- ### Start Clojure REPL with Clay Dependency Source: https://scicloj.github.io/clay/index This command initiates a Clojure REPL (Read-Eval-Print Loop) and includes the Clay library as a project dependency. It uses `clj` with the `-Sdeps` option to specify the Maven coordinates for `org.scicloj/clay` at a particular version, allowing immediate interaction with Clay functions. ```Shell clj -Sdeps "{:deps {org.scicloj/clay {:mvn/version \"2-beta23\"}}}" ``` -------------------------------- ### Render Tech.ML.Dataset (Plain Markdown) Source: https://scicloj.github.io/clay/index This snippet creates and renders a simple `tech.ml.dataset`. In Quarto-based rendering, datasets are typically converted to plain Markdown tables. This example highlights that direct HTML styling options, like background color, are not applied to datasets rendered this way. ```Clojure (tc/dataset {:x (range 3)}) ``` -------------------------------- ### Render Clojure Namespace to HTML (Default Format) Source: https://scicloj.github.io/clay/index Performs the same action as the previous example, rendering `notebooks/index.clj` to HTML. This demonstrates that `:format [:html]` is the default and can be omitted for HTML output. ```Clojure (comment (clay/make! {:source-path "notebooks/index.clj"})) ``` -------------------------------- ### Render Namespace with Quarto Config to HTML Source: https://scicloj.github.io/clay/index Evaluates and renders `notebooks/slides.clj` as a Quarto QMD file, utilizing its namespace-specific configuration from metadata. Quarto then renders this QMD to HTML, which is displayed in the browser. ```Clojure (comment (clay/make! {:format [:quarto :html] :source-path "notebooks/slides.clj"})) ``` -------------------------------- ### Use Same Source and Target Paths Source: https://scicloj.github.io/clay/index Illustrates a scenario where the `base-source-path` and `base-target-path` are set to the same directory (`notebooks`). This can be useful for in-place rendering or when the source files are already in their final desired location. ```Clojure (comment (clay/make! {:format [:quarto :html] :base-source-path "notebooks" :source-path "demo.clj" :base-target-path "notebooks"})) ``` -------------------------------- ### Render Single Clojure Notebook to HTML Source: https://scicloj.github.io/clay/index Illustrates rendering a specific Clojure notebook (`index.clj` within `notebooks/`) directly to HTML using `clay/make!`. This is a basic usage for individual file processing. ```Clojure (comment (clay/make! {:base-source-path "notebooks/" :source-path "index.clj"})) ``` -------------------------------- ### Render Specific Clojure Notebook and Watch (CLI) Source: https://scicloj.github.io/clay/index Shows how to immediately render a specific Clojure notebook via the Clay CLI. After rendering, Clay will continue to watch the 'notebooks' directory for further changes. ```Shell clojure -M -m scicloj.clay.v2.main notebooks/my_namespace.clj ``` -------------------------------- ### Render Namespace to GitHub Flavoured Markdown (GFM) Source: https://scicloj.github.io/clay/index Renders `notebooks/index.clj` to GitHub Flavoured Markdown (GFM). This feature is noted as having partial support and being a work-in-progress. ```Clojure (comment (clay/make! {:source-path "notebooks/index.clj" :format [:gfm]})) ``` -------------------------------- ### Launch Scicloj Clay CLI (Default Live Reload) Source: https://scicloj.github.io/clay/index Launches the Scicloj Clay application from the command line. By default, it initiates live-reload mode, watching the 'notebooks' directory for changes and automatically re-rendering. ```Shell clojure -M -m scicloj.clay.v2.main ``` -------------------------------- ### Render Clojure Namespace to HTML and Browse Source: https://scicloj.github.io/clay/index Evaluates and renders a specified Clojure namespace (`notebooks/index.clj`) as an HTML file. The generated HTML is then opened in a browser, creating a new tab if it's the first Clay session. ```Clojure (comment (clay/make! {:format [:html] :source-path "notebooks/index.clj"})) ``` -------------------------------- ### Create Quarto Book with Structured Parts Source: https://scicloj.github.io/clay/index Illustrates how to organize a Quarto book into distinct 'parts' using a structured `source-path` definition. This aligns with Quarto's book structure capabilities, allowing for logical grouping of chapters. ```Clojure (comment (clay/make! {:format [:quarto :html] :base-source-path "notebooks" :source-path [{:part "Part A" :chapters ["index.clj" "chapter.clj"]} {:part "Part B" :chapters ["another_chapter.md"]}] :base-target-path "book" :book {:title "Book Example"} ;; Empty the target directory first: :clean-up-target-dir true})) ``` -------------------------------- ### Create Quarto Book with Default Index Page Source: https://scicloj.github.io/clay/index Shows how to generate a Quarto book from a collection of source files (Clojure, Markdown, R Markdown, Jupyter) located in `notebooks/`. It includes a custom book title and cleans the target directory before rendering. ```Clojure (comment (clay/make! {:format [:quarto :html] :base-source-path "notebooks" :source-path ["chapter.clj" "another_chapter.md" "a_chapter_with_R_code.Rmd" "test.ipynb"] :base-target-path "book" :book {:title "Book Example"} ;; Empty the target directory first: :clean-up-target-dir true})) ``` -------------------------------- ### Clojure: Generate Multiple Items with `kind/fragment` and `mapcat` Source: https://scicloj.github.io/clay/index Demonstrates how `kind/fragment` processes a sequential value to generate multiple items, potentially of different kinds. This example uses `mapcat` to create a series of markdown subsections and styled HTML divs based on a list of colors. ```Clojure (->> ["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) ``` -------------------------------- ### Render Namespace to Quarto QMD and HTML Source: https://scicloj.github.io/clay/index Evaluates and renders `notebooks/index.clj` first as a Quarto QMD file. Then, Quarto is used to render that QMD file into HTML, which is subsequently displayed in the browser. ```Clojure (comment (clay/make! {:format [:quarto :html] :source-path "notebooks/index.clj"})) ``` -------------------------------- ### Configure Clay CLI Alias in deps.edn Source: https://scicloj.github.io/clay/index Illustrates how to define a convenient alias for the Clay CLI within a `deps.edn` file. This simplifies subsequent command-line invocations of Clay. ```Clojure {:aliases {:clay {:main-opts ["-m" "scicloj.clay.v2.main"]}}} ``` -------------------------------- ### Render Clojure Notebook as Quarto HTML with Custom Config Source: https://scicloj.github.io/clay/index Demonstrates how to use `clay/make!` to evaluate and render a Clojure namespace (`notebooks/index.clj`) as a Quarto QMD file, then render it to HTML with specific Quarto highlight style and theme settings. The output is displayed in the browser. ```Clojure (comment (clay/make! {:format [:quarto :html] :source-path "notebooks/index.clj" :quarto {:highlight-style :nord :format {:html {:theme :journal}}}})) ``` -------------------------------- ### Render All Notebooks in a Directory Source: https://scicloj.github.io/clay/index Demonstrates how to process and render all files found within a specified `base-source-path` (`other_notebooks`) by setting the `:render` option to `true`. This is useful for batch processing multiple notebooks. ```Clojure (comment (clay/make! {:base-source-path "other_notebooks" :render true})) ``` -------------------------------- ### Render Namespace to Quarto Reveal.js Slideshow Source: https://scicloj.github.io/clay/index Evaluates and renders `notebooks/slides.clj` as a Quarto QMD file, using its namespace-specific configuration. Quarto then renders this QMD into a reveal.js slideshow, which is displayed in the browser. ```Clojure (comment (clay/make! {:format [:quarto :revealjs] :source-path "notebooks/slides.clj"})) ``` -------------------------------- ### Demonstrate Horizontal Code/Value Layout Source: https://scicloj.github.io/clay/index This simple arithmetic expression serves as an example to demonstrate the effect of the previously configured horizontal code and value layout. When rendered, the code `(+ 1 2)` and its result `3` should appear on the same line. This illustrates the visual impact of the `:horizontal` setting. ```Clojure (+ 1 2) ``` -------------------------------- ### Further Demonstrate Horizontal Code/Value Layout Source: https://scicloj.github.io/clay/index Another arithmetic expression to further illustrate the horizontal layout. Similar to the previous example, `(+ 3 4)` and its result `7` are expected to render side-by-side. This reinforces the visual change enabled by the `:code-and-value :horizontal` option. ```Clojure (+ 3 4) ``` -------------------------------- ### Watch Multiple Directories with Clay CLI Source: https://scicloj.github.io/clay/index Demonstrates how to specify multiple directories for the Clay CLI to watch for file changes. This overrides the default 'notebooks' directory, allowing for flexible project structures. ```Shell clojure -M -m scicloj.clay.v2.main notebooks1 notebooks2 ``` -------------------------------- ### Define Clay Examples Namespace Source: https://scicloj.github.io/clay/clay_book.examples This Clojure code defines the `clay-book.examples` namespace, requiring various libraries such as `clojure.math`, `scicloj.kindly.v4.kind`, `tablecloth.api`, `scicloj.metamorph.ml.toydata`, and `scicloj.tableplot.v1.hanami`. It sets up the necessary dependencies for the examples presented in the Clay documentation. ```Clojure (ns clay-book.examples (:require [clojure.math :as math] [scicloj.kindly.v4.kind :as kind] [tablecloth.api :as tc] [scicloj.metamorph.ml.toydata :as toydata] [scicloj.tableplot.v1.hanami :as hanami])) ``` -------------------------------- ### Use Same Source/Target Paths with No Sync Source: https://scicloj.github.io/clay/index Further demonstrates using identical source and target paths, but with `:keep-sync-root` set to `false`. In this specific configuration, no file syncing will occur as the relevant files are assumed to already exist in the target location. ```Clojure (comment (clay/make! {:format [:quarto :html] :base-source-path "notebooks" :source-path "demo.clj" :base-target-path "notebooks" :keep-sync-root false})) ``` -------------------------------- ### Batch Render All Notebooks with Clay CLI Alias Source: https://scicloj.github.io/clay/index Shows how to use the Clay CLI alias with the `-r` flag to immediately render all notebooks found in the base-source-path and then exit. This is ideal for automated batch rendering tasks. ```Shell clojure -M:clay -r ``` -------------------------------- ### Require Clay API Namespace Source: https://scicloj.github.io/clay/index Imports the Clay API namespace, aliasing it as `clay` for convenient access to its functions throughout the project. ```Clojure (require '[scicloj.clay.v2.api :as clay]) ``` -------------------------------- ### Clojure/JavaScript: Echarts Example with Inline JavaScript Formatter Source: https://scicloj.github.io/clay/index Presents an Echarts visualization configured using Clojure, demonstrating how JavaScript functions can be embedded directly using Clojure's regex syntax (`#"..."`). This allows for custom tooltip formatting in the generated chart. ```Clojure (kind/echarts {:title {:text "Echarts Example"} :tooltip {:formatter #"(params) => 'hello: ' + params.name"} :legend {:data ["sales"]} :xAxis {:data ["Shirts", "Cardigans", "Chiffons", "Pants", "Heels", "Socks"]} :yAxis {} :series [{:name "sales" :type "bar" :data [5 20 36 10 10 20]}]}) ``` -------------------------------- ### Clojure: Embed Video with `kind/fn` Source: https://scicloj.github.io/clay/index Demonstrates using `kind/fn` to dynamically embed a video. The function takes a map containing the video source and returns a `kind/video` object, allowing for programmatic generation of multimedia content. ```Clojure (kind/fn {:my-video-src "https://file-examples.com/storage/fe58a1f07d66f447a9512f1/2017/04/file_example_MP4_480_1_5MG.mp4"} {:kindly/f (fn [{:keys [my-video-src]}] (kind/video {:src my-video-src}))}) ``` -------------------------------- ### Render Clojure Notebook with Clay (No Flattening, No Sync Root) Source: https://scicloj.github.io/clay/index Shows an advanced `make!` configuration for Clojure notebooks, combining disabled target flattening with disabling the synchronization root. This provides maximum control over the output file's location and path relative to the source. ```Clojure (comment (clay/make! {:source-path "notebooks/demo.clj" :flatten-targets false :keep-sync-root false})) ``` -------------------------------- ### Render Raw HTML using kind/html Source: https://scicloj.github.io/clay/clay_book.examples Explains how to embed and display raw HTML content using `kind/html`. Examples include simple `div` elements and more complex SVG graphics, demonstrating support for single strings, vectors of strings, and lists of strings. ```Clojure (kind/html "
") ``` ```Clojure (kind/html "\n\n\n ") ``` ```Clojure (kind/html ["" "" ""]) ``` ```Clojure (kind/html (list "" "" "")) ``` -------------------------------- ### Render Clojure Namespace with Custom Favicon Source: https://scicloj.github.io/clay/index Evaluates and renders `notebooks/index.clj` to HTML, incorporating a custom favicon specified by the `:favicon` option. This allows for branding the generated output. ```Clojure (comment (clay/make! {:source-path "notebooks/index.clj" :favicon "notebooks/favicon.ico"})) ``` -------------------------------- ### Render Namespace and Hide Info Line Source: https://scicloj.github.io/clay/index Renders `notebooks/index.clj` to HTML. The `:hide-info-line true` option hides the information line typically found at the bottom of the generated page. ```Clojure (comment (clay/make! {:source-path "notebooks/index.clj" :hide-info-line true})) ``` -------------------------------- ### Render Namespace to Quarto QMD (No Quarto HTML Render) Source: https://scicloj.github.io/clay/index Evaluates and renders `notebooks/index.clj` as a Quarto QMD file. The `:run-quarto false` option prevents Quarto from rendering the QMD to HTML, showing the QMD output directly in the browser (with limited features like live-reload). ```Clojure (comment (clay/make! {:format [:quarto :html] :source-path "notebooks/index.clj" :run-quarto false})) ``` -------------------------------- ### Create Table from a T.C. Dataset Source: https://scicloj.github.io/clay/clay_book.examples Explains how to integrate `:kind/table` with a `tech.ml.dataset` (T.C. dataset). Data can first be converted into a dataset, which then serves as a direct input for `:kind/table`, leveraging dataset functionalities. ```Clojure (def people-as-dataset (tc/dataset people-as-maps)) (-> people-as-dataset kind/table) ``` -------------------------------- ### Embed Image using kind/image in Clay Source: https://scicloj.github.io/clay/index Shows an alternative way to embed an image in a Clay notebook using the `kind/image` function. Similar to `kind/hiccup`, it references an image from the synced 'notebooks/' directory. ```Clojure (kind/image {:src "notebooks/images/Clay.svg.png"}) ``` -------------------------------- ### Handle Unsupported Image Formats Source: https://scicloj.github.io/clay/clay_book.examples Illustrates an attempt to display an unsupported image format using `kind/image`, which results in an error message, highlighting the limitations of the image rendering capabilities. ```Clojure (kind/image "AN IMAGE") ``` -------------------------------- ### Batch Render Specific Clojure Notebook (CLI) Source: https://scicloj.github.io/clay/index Illustrates using the `-r` or `--render` flag with the Clay CLI to immediately render a specific notebook and then exit. This is suitable for batch processing without live-reload. ```Shell clojure -M -m scicloj.clay.v2.main notebooks/my_namespace.clj -r ``` -------------------------------- ### Render Single Form in Namespace Context to HTML Source: https://scicloj.github.io/clay/index Evaluates and renders a single Clojure form (`'(+ 1 2)`) within the context of the `notebooks/index.clj` namespace. The result is displayed as HTML in the browser. ```Clojure (comment (clay/make! {:source-path "notebooks/index.clj" :single-form '(+ 1 2)})) ``` -------------------------------- ### Render Multiple Clojure Namespaces with Toggled Live Reload Source: https://scicloj.github.io/clay/index Evaluates and renders multiple Clojure namespaces to HTML. The `:live-reload :toggle` option allows for switching the live reload feature on or off dynamically. ```Clojure (comment (clay/make! {:source-path ["notebooks/slides.clj" "notebooks/index.clj"] :live-reload :toggle})) ``` -------------------------------- ### Render Clojure Notebook to Hiccup Format Source: https://scicloj.github.io/clay/index Demonstrates rendering a Clojure notebook into a Hiccup data structure instead of HTML. This allows for programmatic manipulation or integration with other Hiccup-based rendering systems. ```Clojure (comment (clay/make-hiccup {:source-path "notebooks/index.clj"})) ``` -------------------------------- ### Render Clojure Notebook with Clay (No Target Flattening) Source: https://scicloj.github.io/clay/index Illustrates rendering a Clojure notebook with Clay's `make!` function while explicitly disabling the default flattening behavior. This ensures the target HTML path mirrors the source file's directory structure. ```Clojure (comment (clay/make! {:source-path "notebooks/subdir/another_demo.clj" :flatten-targets false})) ``` -------------------------------- ### Define Clojure Namespace with Dependencies Source: https://scicloj.github.io/clay/index This snippet defines a Clojure namespace, `index`, and declares its dependencies on various libraries like `scicloj.kindly`, `scicloj.clay`, `scicloj.metamorph`, `scicloj.tableplot`, `tablecloth.api`, and `clojure.string`. It sets up the environment for a Clojure notebook. ```Clojure (ns index (:require [scicloj.kindly.v4.api :as kindly] [scicloj.kindly.v4.kind :as kind] [scicloj.clay.v2.quarto.highlight-styles :as quarto.highlight-styles] [scicloj.clay.v2.quarto.themes :as quarto.themes] [scicloj.metamorph.ml.toydata :as toydata] [scicloj.tableplot.v1.hanami :as hanami] [scicloj.clay.v2.main] [tablecloth.api :as tc] [clojure.string :as str])) ``` -------------------------------- ### Render Clojure Notebook as Quarto HTML with Namespaced Styles Source: https://scicloj.github.io/clay/index Shows how to render a Clojure notebook (`notebooks/index.clj`) to Quarto HTML, fetching highlight styles and themes from specific `scicloj.clay.v2.quarto` namespaces. This allows for programmatic selection of Quarto styling options. ```Clojure (comment (require '[scicloj.clay.v2.quarto.highlight-styles :as quarto.highlight-styles] '[scicloj.clay.v2.quarto.themes :as quarto.themes]) (clay/make! {:format [:quarto :html] :source-path "notebooks/index.clj" :quarto {:highlight-style quarto.highlight-styles/nord :format {:html {:theme quarto.themes/journal}}}})) ``` -------------------------------- ### Clojure: Generate Dataset with `kind/fn` from Vector Source: https://scicloj.github.io/clay/index Illustrates using `kind/fn` to produce a `kind/dataset` from a vector input. The `tc/dataset` function is the first element, followed by the data map, showcasing a concise way to create datasets. ```Clojure (kind/fn [tc/dataset {:x (range 3) :y (repeatedly 3 rand)}]) ``` -------------------------------- ### Apply Custom Rendering Options to Table Source: https://scicloj.github.io/clay/clay_book.examples Demonstrates how to pass additional options to `:kind/table` to customize its rendering behavior. This example sets a maximum height for the table element, allowing for fine-grained control over the visual presentation. ```Clojure (-> people-as-dataset (kind/table {:element/max-height "300px"})) ``` -------------------------------- ### Render Multiple Clojure Namespaces with Live Reload Source: https://scicloj.github.io/clay/index Evaluates and renders multiple Clojure namespaces to HTML. The `:live-reload true` option enables experimental live reloading, watching the source files for changes and updating the output automatically. ```Clojure (comment (clay/make! {:source-path ["notebooks/slides.clj" "notebooks/index.clj"] :live-reload true})) ``` -------------------------------- ### Apply CSS Classes and Styles to Table in Clay Source: https://scicloj.github.io/clay/index Demonstrates how to apply CSS classes and inline styles to a table generated by `kind/table` in Clay. The `:class` and `:style` options are passed as metadata to control the table's appearance. ```Clojure (kind/table {:column-names ["A" "B" "C"] :row-vectors [[1 2 3] [4 5 6]]} {:class "table-responsive" :style {:background "#f8fff8"}}) ``` -------------------------------- ### Enable DataTables Integration for Table Source: https://scicloj.github.io/clay/clay_book.examples Shows how to enable the use of DataTables.net for rendering the table, providing advanced features like sorting, searching, and pagination. This requires setting the `:use-datatables` option to `true`. ```Clojure (-> people-as-maps tc/dataset (kind/table {:use-datatables true})) ``` -------------------------------- ### VSCode Calva Custom Keyboard Shortcuts for Clay REPL Commands Source: https://scicloj.github.io/clay/index This JSON configuration snippet demonstrates how to add custom keyboard shortcuts in VSCode's settings.json for Calva's custom REPL commands related to Clay. It maps specific key combinations to Clay's 'make current form' and 'make Namespace' actions. ```JSON { "key": "alt+x", "command": "calva.runCustomREPLCommand", "args": ",", "when": "calva:connected && calva:keybindingsEnabled" }, { "key": "shift+alt+x", "command": "calva.runCustomREPLCommand", "args": "n", "when": "calva:connected && calva:keybindingsEnabled" } ``` -------------------------------- ### Embed Interactive Observable Visualization with Inputs and Plotting (Clojure & JavaScript) Source: https://scicloj.github.io/clay/clay_book.examples This comprehensive example demonstrates how to embed a full Observable notebook into a Clay/Quarto document. It includes interactive range and checkbox inputs, a Plot.rectY visualization with binning and facets, and data loading/filtering from a local CSV file ('palmer-penguins.csv') based on user selections. The Clojure snippet (kind/observable) wraps the entire Observable JavaScript code for seamless integration. ```Clojure (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); }) ") ``` ```JavaScript 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(), ] } ) ``` ```JavaScript Inputs.table(filtered) ``` ```JavaScript 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); }) ``` -------------------------------- ### Further Demonstrate Vertical Code/Value Layout Source: https://scicloj.github.io/clay/index Another arithmetic expression to further illustrate the vertical layout. Similar to the previous example, `(+ 3 4)` and its result `7` are expected to render on separate lines. This reinforces the default vertical display behavior. ```Clojure (+ 3 4) ``` -------------------------------- ### Render LaTeX TeX Formulae using kind/tex Source: https://scicloj.github.io/clay/clay_book.examples Illustrates the direct rendering of LaTeX mathematical expressions using the `kind/tex` function, providing a dedicated way to display complex equations. ```Clojure (kind/tex "x^2=\\alpha") ``` -------------------------------- ### Clojure: Process Sequential Data with `kind/fragment` Source: https://scicloj.github.io/clay/index Illustrates `kind/fragment`'s ability to process a simple sequential value (a range of numbers) and output each element as a separate item. This shows its utility for generating multiple distinct outputs from a single input sequence. ```Clojure (->> (range 3) kind/fragment) ``` -------------------------------- ### Advanced 3DMol.js Viewer Configuration with Reagent Source: https://scicloj.github.io/clay/clay_book.examples Creates a 3DMol.js viewer within a Reagent component with advanced programmatic configurations. It sets background color, view style, adds models from PDB data, draws a sphere, and adjusts zoom, demonstrating fine-grained control over 3D molecular visualization. ```Clojure (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]}) ``` -------------------------------- ### Configure Clay via Clojure Namespace Metadata Source: https://scicloj.github.io/clay/index This Clojure code snippet demonstrates how to embed Clay-specific configuration directly within a namespace definition using metadata. This method allows for fine-grained control over settings, such as Quarto front matter, applied at the namespace level. ```Clojure ^{:clay {:quarto {:myfrontmatterkey "myfrontmattervalue"}}} (ns index) ``` -------------------------------- ### Render Interactive Map with Leaflet in ClojureScript Source: https://scicloj.github.io/clay/clay_book.examples This ClojureScript example demonstrates how to initialize an interactive map using the Leaflet library within a Reagent component. It sets a view, adds a tile layer from OpenStreetMap, and places a marker with a popup. The example highlights the use of `js/L` for Leaflet functions and `clj->js` for data conversion. It also specifies the `:leaflet` HTML dependency. ```ClojureScript (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.
Easily customizable.") (.openPopup))))})] ;; Note we need to mention the dependency: {:html/deps [:leaflet]}) ``` -------------------------------- ### Render Basic HTML After Background Reset Source: https://scicloj.github.io/clay/index This Hiccup expression renders the same simple HTML `div` and paragraph as before. This example demonstrates that the background color has been successfully reset, and the output now appears without the custom background. It confirms the removal of the styling option. ```Clojure (kind/hiccup [:div [:p "hello"]]) ``` -------------------------------- ### Display first 5 elements of people-as-maps in Clojure Source: https://scicloj.github.io/clay/clay_book.examples This snippet demonstrates how to view the first 5 entries of the `people-as-maps` vector, showing the structure of the generated map data. ```Clojure (take 5 people-as-maps) ``` -------------------------------- ### Clojure/JavaScript: Embedding Blockly Dependencies Source: https://scicloj.github.io/clay/clay_book.examples Shows how to embed necessary JavaScript libraries and define Blockly blocks within a Clojure application using `kind/hiccup`. This prepares the environment for a Blockly workspace. ```Clojure (kind/hiccup [:div [:script {:src "https://kloimhardt.github.io/twotiles/twotiles_core.js"}] [:script "var parse = scittle.core.eval_string(twotiles.parse_clj);"] [:script {:src "https://unpkg.com/blockly/blockly_compressed.js"}] [:script "Blockly.defineBlocksWithJsonArray(twotiles.blocks);"]]) ``` -------------------------------- ### Load and Display Images from URLs Source: https://scicloj.github.io/clay/clay_book.examples Shows how to import Java classes for image handling, load an image from a URL into a `BufferedImage` object, and then display it. It also covers using `kind/image` with a map containing the image source URL. ```Clojure (import javax.imageio.ImageIO java.net.URL) ``` ```Clojure java.net.URL ``` ```Clojure (defonce clay-image (-> "https://upload.wikimedia.org/wikipedia/commons/2/2c/Clay-ss-2005.jpg" (URL.) (ImageIO/read))) ``` ```Clojure clay-image ``` ```Clojure (kind/image {:src "https://upload.wikimedia.org/wikipedia/commons/2/2c/Clay-ss-2005.jpg"}) ``` -------------------------------- ### Display first 5 elements of people-as-vectors in Clojure Source: https://scicloj.github.io/clay/clay_book.examples This snippet demonstrates how to view the first 5 entries of the `people-as-vectors` vector, showing the transformed vector data. ```Clojure (take 5 people-as-vectors) ``` -------------------------------- ### Demonstrate Vertical Code/Value Layout Source: https://scicloj.github.io/clay/index This arithmetic expression demonstrates the effect of reverting to the vertical code and value layout. After this code is evaluated, `(+ 1 2)` and its result `3` will render on separate lines. This confirms the successful application of the `:vertical` setting. ```Clojure (+ 1 2) ``` -------------------------------- ### Generate Dataset with Clojure Tablecloth Source: https://scicloj.github.io/clay/index This Clojure snippet uses the Tablecloth library to create and manipulate a dataset. It generates two columns, `:x` (a range of numbers) and `:y` (random numbers), converts them into a dataset, and assigns it a name 'my dataset'. This demonstrates basic data creation in Tablecloth. ```Clojure (-> {:x (range 5) :y (repeatedly 5 rand)} tc/dataset (tc/set-dataset-name "my dataset")) ``` -------------------------------- ### Embed Portal Viewer with Simple Data in Clojure Source: https://scicloj.github.io/clay/clay_book.examples Demonstrates embedding a Portal viewer with basic map data using `kind/portal`. This allows interactive exploration of Clojure data structures directly within Clay. ```Clojure (kind/portal {:x (range 3)}) ``` -------------------------------- ### Render Basic HTML with Applied Background Source: https://scicloj.github.io/clay/index This Hiccup expression renders a simple HTML `div` containing a paragraph with the text 'hello'. This example demonstrates how the previously set background color is applied to standard HTML content. The `kind/hiccup` function is used to embed custom HTML. ```Clojure (kind/hiccup [:div [:p "hello"]]) ``` -------------------------------- ### Generate Clay Document from Clojure File Source: https://scicloj.github.io/clay/index This Clojure code uses `clay/make!` to generate a document from an external Clojure source file. The `:source-path` option specifies the file's location, allowing Clay to render the content of an entire Clojure namespace or file as a dynamic document, which is ideal for larger projects. ```Clojure (clay/make! {:source-path "/tmp/demo.clj"}) ``` -------------------------------- ### Update Clay Document with New Single Clojure Form Source: https://scicloj.github.io/clay/index This Clojure expression demonstrates how to update an existing Clay document by calling `clay/make!` with a different single form. In this example, it concatenates 'hello' and 'world'. Clay automatically detects changes and refreshes the served web page. ```Clojure (clay/make! {:single-form '(str "hello" "world")}) ``` -------------------------------- ### Render Single Value to HTML Source: https://scicloj.github.io/clay/index Renders a single Clojure value (`3`) directly as HTML. The result is then displayed in the browser. ```Clojure (comment (clay/make! {:single-value 3})) ``` -------------------------------- ### Execute Random Vega-Lite Plot Generation in Clojure Source: https://scicloj.github.io/clay/clay_book.examples This Clojure snippet demonstrates the execution of the `random-vega-lite-plot` function. By calling it with an argument of 9, it generates and displays a Vega-Lite point plot containing 9 randomly generated data points. This serves as a simple example of the function's usage. ```Clojure (random-vega-lite-plot 9) ``` -------------------------------- ### Generate Dynamic Table with Nested Hiccup Elements in Clojure Source: https://scicloj.github.io/clay/clay_book.examples Example of creating a dynamic table where each row contains a `kind/hiccup` element (a colored square) whose size is determined programmatically. This demonstrates programmatic table generation and nesting of visual components. ```Clojure (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}) ``` -------------------------------- ### Require Tablecloth API for dataset operations in Clojure Source: https://scicloj.github.io/clay/clay_book.examples This snippet loads the `tablecloth.api` namespace, aliasing it as `tc`. This is a prerequisite for working with `tech.ml.dataset` datasets using the Tablecloth library. ```Clojure (require '[tablecloth.api :as tc]) ``` -------------------------------- ### Nest Various Kind Types within Hiccup in Clojure Source: https://scicloj.github.io/clay/clay_book.examples Comprehensive example demonstrating how `kind/hiccup` recursively processes other `kind` types like `kind/md` (Markdown), `kind/code` (code display), `kind/dataset` (data tables), `kind/table` (structured tables), `kind/vega-lite` (interactive plots), and `kind/reagent` (React components) to build complex UI structures. ```Clojure (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))])]) ``` -------------------------------- ### Render Markdown and LaTeX using kind/md Source: https://scicloj.github.io/clay/clay_book.examples Shows how to display Markdown formatted text, including lists and links, using `kind/md`. It also demonstrates support for embedding LaTeX mathematical formulae within Markdown. ```Clojure (kind/md "This is [markdown](https://www.markdownguide.org/).") ``` ```Clojure (kind/md [" * This is [markdown](https://www.markdownguide.org/). * *Isn't it??*" " * Here is **some more** markdown."]) ``` ```Clojure (kind/md (list " * This is [markdown](https://www.markdownguide.org/). * *Isn't it??*" " * Here is **some more** markdown.")) ``` ```Clojure (kind/md "Let $x=9$. Then $$x+11=20$$") ``` -------------------------------- ### Concatenate Strings in Clojure Source: https://scicloj.github.io/clay/clay_book.examples This Clojure code demonstrates string concatenation using the `str` function. It illustrates how Clay handles and pretty-prints string values when no specific kind information is provided. ```Clojure (str "abcd" "efgh") ``` -------------------------------- ### Embed YouTube Video with Custom Dimensions Source: https://scicloj.github.io/clay/clay_book.examples Embeds a YouTube video by ID and specifies custom `iframe-width` and `iframe-height` properties. This allows for precise control over the size of the embedded video player. ```Clojure (kind/video {:youtube-id "DAQnvAgBma8" :iframe-width 480 :iframe-height 270}) ``` -------------------------------- ### Clojure/JavaScript: Initializing and Loading Blockly Workspace Source: https://scicloj.github.io/clay/clay_book.examples Demonstrates how to dynamically create and populate a Blockly workspace using `kind/hiccup`. It converts a Clojure code string into an XML format suitable for Blockly and loads it into the workspace. ```Clojure (kind/hiccup [:div [:script (str "var xml1 = parse('" code "')")] [:div {:id "blocklyDiv1", :style {:height "100px"}}] [:script "var workspace1 = Blockly.inject('blocklyDiv1', {'toolbox': twotiles.toolbox, 'sounds': false})"] [:script "const xmlDom1 = Blockly.utils.xml.textToDom(xml1)"] [:script "Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom1,workspace1)"]]) ``` -------------------------------- ### Embed Video from URL using kind/video Source: https://scicloj.github.io/clay/clay_book.examples Demonstrates embedding a video directly from a URL using the `kind/video` component. It takes a `:src` parameter pointing to an MP4 file, providing a straightforward method to include external video content. ```Clojure (kind/video {:src "https://www.sample-videos.com/video321/mp4/240/big_buck_bunny_240p_30mb.mp4"}) ```