Clojure viewers

The Clojure viewer API enables you to visualize many different types of output, such as plots (using, e.g., Plotly and Vega-Lite), html, and so on. We currently support the following viewers: Plotly, Vega-Lite, Hiccup, HTML, LaTeX, and text.

How it works

Inside a Clojure cell, you'll need to specify the viewer type as metadata of the returned value, so something like the following: ^{:nextjournal/viewer <viewer-type>} , where viewer-type is a keyword. The shape of the value itself depends on the viewer, but it is typically a fairly straightforward conversion from, e.g., a JavaScript or JSON structure to a Clojure data structure.

For values that don't support metadata, such as strings (see the HTML, LaTeX, and text viewers), you need to wrap the value and the viewer type in a map consisting of the :nextjournal/viewer and :nextjournal/value keys.

See below concrete examples of all the different Clojure viewers we support, and, where needed, the shape of the value in the original library.

Plotly

Line Plot

Plotly.js syntax

data = [{y: [1 4 9 16 25 36 49]}]

Clojure viewer

^{:nextjournal/viewer :plotly}

{:data [{:y [1 4 9 16 25 36 49]}]}

Vega

Vega-Lite JSON syntax

{

"width": 500,

  "height": 300,

  "data": {

    "url": "https://vega.github.io/vega-datasets/data/us-10m.json",

    "format": {

      "type": "topojson",

      "feature": "counties"

    }

  },

  "transform": [{

    "lookup": "id",

    "from": {

      "data": {

        "url": "https://vega.github.io/vega-datasets/data/unemployment.tsv"

      },

      "key": "id",

      "fields": ["rate"]

    }

  }],

  "projection": {

    "type": "albersUsa"

  },

  "mark": "geoshape",

  "encoding": {

    "color": {

      "field": "rate",

      "type": "quantitative"

    }

  }

}

Clojure viewer

^{:nextjournal/viewer :vega-lite}

{:width 600

 :height 300

 :data

 {:url "https://vega.github.io/vega-datasets/data/us-10m.json"

  :format

  {:type "topojson" :feature "counties"}}

 :transform

 [{:lookup "id"

   :from

   {:data {:url "https://vega.github.io/vega-datasets/data/unemployment.tsv"}

    :key "id"

    :fields ["rate"]}}]

 :projection {:type "albersUsa"}

 :mark "geoshape"

 :encoding

 {:color {:field "rate" :type "quantitative"}}}

Hiccup

Hiccup syntax

[:h3 {:class "text-blue-500"} "Hello " [:code "Clojure"]]

Clojure viewer

^{:nextjournal/viewer :hiccup} 

[:h3 {:class "text-blue-500"} "Hello " [:code "Clojure"]]

HTML

{:nextjournal/viewer :html

 :nextjournal/value "<h3 class=\"text-blue-500\">Hello <code>Clojure</code></h3>"}

LaTeX

{:nextjournal/viewer :formula

 :nextjournal/value "h = \\varphi  - \\frac{1}{2\\varphi}\\left( 1 - \\frac{w}{w_\\varphi} \\right)"}

Text

{:nextjournal/viewer :text

 :nextjournal/value "Hello World!"}