# Scicloj Meeting #5: Oz Demo

<h2 class="pm-node nj-subtitle">with Christopher Small</h2>

# How to Use Vega and Nextjournal

Vega-lite is available in Nextjournal at any time by adding `^{:nextjournal/viewer "vega-lite"}` metadata above the data you want to plot.

```clojure id=3b82049f-b05a-452a-9388-6fe255f6bf38
^{:nextjournal/viewer "vega-lite"}
{
  "data" {"url" "https://vega.github.io/editor/data/cars.json"},
  "mark" "point",
  "encoding" {
    "x" {"field" "Horsepower", "type" "quantitative"},
    "y" {"field" "Miles_per_Gallon", "type" "quantitative"}
  }
}
```

[result][nextjournal#output#3b82049f-b05a-452a-9388-6fe255f6bf38#result]

# How to Use Oz and Nextjournal

I don't want to open a browser, so I use the [`export!` function](https://cljdoc.org/d/metasoarous/oz/1.6.0-alpha3/api/oz.core#export!) rather than `view!`. I'm rendering the results to the `/results` directory so they display automatically. Everything else is the same.

```clojure id=190b743e-768b-4cbb-ab64-48af2ea5b9a3
(require '[oz.core :as oz])

(oz/export!
{
  "data" {"url" "https://vega.github.io/editor/data/cars.json"},
  "mark" "point",
  "encoding" {
    "x" {"field" "Horsepower", "type" "quantitative"},
    "y" {"field" "Miles_per_Gallon", "type" "quantitative"}
  }
}
 "/results/oz-demo.html")
```

[oz-demo.html][nextjournal#output#190b743e-768b-4cbb-ab64-48af2ea5b9a3#oz-demo.html]

Note the additional interactivity of these plots. Pretty Cool!

# Vega Demos

Try some of Christopher's demos in Vega.

```clojure id=4217c61d-8610-4a22-8699-b3257f658603
^{:nextjournal/viewer "vega-lite"}
{
  "data" {"url" "https://vega.github.io/editor/data/cars.json"},
  "mark" "point",
  "encoding" {
    "x" {"field" "Horsepower", "type" "quantitative"},
    "y" {"field" "Miles_per_Gallon", "type" "quantitative"}
    "color" {"field" "Origin"}
    "column" {"field" "Origin"}
  }
}
```

[result][nextjournal#output#4217c61d-8610-4a22-8699-b3257f658603#result]

```clojure id=6961ab69-9087-4f75-b30b-c774e31ca493
^{:nextjournal/viewer "vega-lite"}
{
  "data" {"url" "https://vega.github.io/editor/data/cars.json"},
  "mark" "point",
  "encoding" {
    "x" {"field" "Horsepower", "bin" "true"},
    "y" {"field" "Miles_per_Gallon", "aggregate" "mean"}
    "color" {"field" "Origin"}
  }
}
```

[result][nextjournal#output#6961ab69-9087-4f75-b30b-c774e31ca493#result]

```clojure id=eaefba21-b853-41c0-b149-420190715be7
^{:nextjournal/viewer "vega-lite"}
{
  :width 800
  :height 600
  "data" {"url" "https://vega.github.io/editor/data/cars.json"},
  "layer" [
      {"mark" "point",
       "encoding" {
       "x" {"field" "Horsepower"},
       "y" {"field" "Miles_per_Gallon"}
       "color" {"field" "Origin"}}}
      {"mark" "line",
       "encoding" {
           "x" {"field" "Horsepower", "bin" "true"},
           "y" {"field" "Miles_per_Gallon", "aggregate" "mean"}
       "color" {"field" "Origin"}}}
       ]
}
```

[result][nextjournal#output#eaefba21-b853-41c0-b149-420190715be7#result]

# Oz Demo

`oz/export!` is currently [in alpha](https://cljdoc.org/d/metasoarous/oz/1.6.0-alpha3/api/oz.core#export!). This may be the source of the `Invalid spec` error but I haven't had the time to take a look. The output still renders correctly.

```clojure id=d749281d-0b2f-4769-b47b-473fb69bb91d
(def line-plot
{
  "data" {"url" "https://vega.github.io/editor/data/cars.json"},
  "mark" "point",
  "encoding" {
    "x" {"field" "Horsepower", "type" "quantitative"},
    "y" {"field" "Miles_per_Gallon", "type" "quantitative"}
  }
})

(def viz
  [:div
    [:h1 "Look ye and behold"]
    [:p "A couple of small charts"]
    [:vega-lite line-plot]
    [:h2 "If ever, oh ever a viz there was, the vizard of oz is one because, because, because..."]
    [:p "Because of the wonderful things it does"]])

(oz/export! viz "/results/oz-demo-3.html")
```

[oz-demo-3.html][nextjournal#output#d749281d-0b2f-4769-b47b-473fb69bb91d#oz-demo-3.html]

# Appendix

```edn no-exec id=ffcf0396-b3f9-40e6-a0c2-654401879781
{:deps
 {org.clojure/clojure {:mvn/version "1.10.0"}
  org.clojure/tools.deps.alpha
  {:git/url "https://github.com/clojure/tools.deps.alpha.git"
   :sha "f6c080bd0049211021ea59e516d1785b08302515"}
  metasoarous/oz {:mvn/version "1.6.0-alpha3"}
  compliment {:mvn/version "0.3.9"}}}
```

[nextjournal#output#3b82049f-b05a-452a-9388-6fe255f6bf38#result]:
<https://nextjournal.com/data/QmWM4yq8YDESjzCnf7YobfMPcdTVeDoPXPGgZkSWUAFx2R?content-type=application/vnd.vegalite.v3%2Bjson&node-id=3b82049f-b05a-452a-9388-6fe255f6bf38&node-kind=output>

[nextjournal#output#190b743e-768b-4cbb-ab64-48af2ea5b9a3#oz-demo.html]:
<https://nextjournal.com/data/QmPxqsrBmbSgQWgGK6oFV6p83U5jmdDgWTWs7mRhtVui9L?content-type=text/html&node-id=190b743e-768b-4cbb-ab64-48af2ea5b9a3&filename=oz-demo.html&node-kind=output>

[nextjournal#output#4217c61d-8610-4a22-8699-b3257f658603#result]:
<https://nextjournal.com/data/QmWiDVdemeBRf6RuKYW6EZKeZqXsrsoeX2P76wm19ALsNT?content-type=application/vnd.vegalite.v3%2Bjson&node-id=4217c61d-8610-4a22-8699-b3257f658603&node-kind=output>

[nextjournal#output#6961ab69-9087-4f75-b30b-c774e31ca493#result]:
<https://nextjournal.com/data/QmNWVRuyE8kPJgXoFvpmNhTYSeKj1pP6MXzVzhhzvMkLm9?content-type=application/vnd.vegalite.v3%2Bjson&node-id=6961ab69-9087-4f75-b30b-c774e31ca493&node-kind=output>

[nextjournal#output#eaefba21-b853-41c0-b149-420190715be7#result]:
<https://nextjournal.com/data/QmWzxzLk4QUZ4iinGRbeBhF1otG8KuTcqKLFdtJP1fzgJ1?content-type=application/vnd.vegalite.v3%2Bjson&node-id=eaefba21-b853-41c0-b149-420190715be7&node-kind=output>

[nextjournal#output#d749281d-0b2f-4769-b47b-473fb69bb91d#oz-demo-3.html]:
<https://nextjournal.com/data/QmTBEcNq5xFCpAs8C18BZuP59XWqLLmF3NDxMV48R6Xju3?content-type=text/html&node-id=d749281d-0b2f-4769-b47b-473fb69bb91d&filename=oz-demo-3.html&node-kind=output>

<details id="com.nextjournal.article">
<summary>This notebook was exported from <a href="https://nextjournal.com/a/LWPCDfSSsnM196sxR2bui?change-id=CXFVcc8TohzBsbB3rbaP3y">https://nextjournal.com/a/LWPCDfSSsnM196sxR2bui?change-id=CXFVcc8TohzBsbB3rbaP3y</a></summary>

```edn nextjournal-metadata
{:article
 {:settings {:subtitle? true},
  :nodes
  {"190b743e-768b-4cbb-ab64-48af2ea5b9a3"
   {:compute-ref #uuid "cfa9270f-f07c-4828-92eb-f4cfc925eec9",
    :exec-duration 37,
    :id "190b743e-768b-4cbb-ab64-48af2ea5b9a3",
    :kind "code",
    :output-log-lines {},
    :runtime [:runtime "80403b0a-1226-48ff-9bcc-624ed02e3635"]},
   "3b82049f-b05a-452a-9388-6fe255f6bf38"
   {:compute-ref #uuid "c804d4f6-40d2-4a8d-a094-52f5d1bba0df",
    :exec-duration 77,
    :id "3b82049f-b05a-452a-9388-6fe255f6bf38",
    :kind "code",
    :output-log-lines {},
    :runtime [:runtime "80403b0a-1226-48ff-9bcc-624ed02e3635"]},
   "4217c61d-8610-4a22-8699-b3257f658603"
   {:compute-ref #uuid "f2a45b73-22a3-4b68-bc54-07c4b6af397a",
    :exec-duration 609,
    :id "4217c61d-8610-4a22-8699-b3257f658603",
    :kind "code",
    :output-log-lines {},
    :runtime [:runtime "80403b0a-1226-48ff-9bcc-624ed02e3635"]},
   "6961ab69-9087-4f75-b30b-c774e31ca493"
   {:compute-ref #uuid "825a4a23-fca0-4c67-b18b-bfe2e0d6c8d9",
    :exec-duration 594,
    :id "6961ab69-9087-4f75-b30b-c774e31ca493",
    :kind "code",
    :output-log-lines {},
    :runtime [:runtime "80403b0a-1226-48ff-9bcc-624ed02e3635"]},
   "80403b0a-1226-48ff-9bcc-624ed02e3635"
   {:environment
    [:environment
     {:article/nextjournal.id
      #uuid "5b45eb52-bad4-413d-9d7f-b2b573a25322",
      :change/nextjournal.id
      #uuid "5cd52af1-7a79-4804-a169-d6ffcdb6eb7a",
      :node/id "0ae15688-6f6a-40e2-a4fa-52d81371f733"}],
    :id "80403b0a-1226-48ff-9bcc-624ed02e3635",
    :kind "runtime",
    :language "clojure",
    :type :nextjournal,
    :runtime/mounts
    [{:src [:node "ffcf0396-b3f9-40e6-a0c2-654401879781"],
      :dest "/deps.edn"}]},
   "d749281d-0b2f-4769-b47b-473fb69bb91d"
   {:compute-ref #uuid "d8d6558a-151d-4e5c-9676-3f0a45d7f19f",
    :exec-duration 32,
    :id "d749281d-0b2f-4769-b47b-473fb69bb91d",
    :kind "code",
    :output-log-lines {},
    :runtime [:runtime "80403b0a-1226-48ff-9bcc-624ed02e3635"]},
   "eaefba21-b853-41c0-b149-420190715be7"
   {:compute-ref #uuid "0f2a5eb3-9734-4589-b32d-b2c781fa4fae",
    :exec-duration 504,
    :id "eaefba21-b853-41c0-b149-420190715be7",
    :kind "code",
    :output-log-lines {},
    :runtime [:runtime "80403b0a-1226-48ff-9bcc-624ed02e3635"]},
   "ffcf0396-b3f9-40e6-a0c2-654401879781"
   {:id "ffcf0396-b3f9-40e6-a0c2-654401879781",
    :kind "code-listing",
    :name "deps.edn"}},
  :nextjournal/id #uuid "02b93d44-a132-4a6c-b55d-691bfe3f30c1",
  :article/change
  {:nextjournal/id #uuid "5d4dc52b-d0bd-44b0-8a3e-93b61c125c2c"}}}

```
</details>