Scicloj Meeting #5: Oz Demo

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.

^{: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"}
  }
}

How to Use Oz and Nextjournal

I don't want to open a browser, so I use the export! function rather than view!. I'm rendering the results to the /results directory so they display automatically. Everything else is the same.

(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")

Note the additional interactivity of these plots. Pretty Cool!

Vega Demos

Try some of Christopher's demos in Vega.

^{: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"}
  }
}
^{: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"}
  }
}

^{: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"}}}
       ]
}

Oz Demo

oz/export! is currently in alpha. 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.

(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")
Loading viewer…