scicloj.kindly.v4.kind — org.scicloj/kindly 4-beta21

Kinds for visualization

audio clj/s

(audio)

(audio value)

(audio value options)

display-as: an embedded audio examples:

{:src "https://audio-url.mp3"}

code clj/s

(code)

(code value)

(code value options)

display-as: a piece syntax highlighted Clojure code example:

(+ 1 2)

cytoscape clj/s

(cytoscape)

(cytoscape value)

(cytoscape value options)

display-as: a graph example:

{:nodes #{1 4 3 2 5}, :edges #{[4 3] [4 2] [1 2] [3 5]}}

docs: https://js.cytoscape.org/#notation/elements-json json-schema: https://raw.githubusercontent.com/AZaitzeff/cytoscape_js_schema/main/cytoscape_schema.json

dataset clj/s

(dataset)

(dataset value)

(dataset value options)

display-as: a table example:

(->> (System/getProperties) (map (fn [[k v]] {:k k, :v (apply str (take 40 (str v)))})) (tech.v3.dataset/->>dataset {:dataset-name "My Truncated System Properties"}))

docs: https://github.com/techascent/tech.ml.dataset

echarts clj/s

(echarts)

(echarts value)

(echarts value options)

display-as: a chart example:

[["a" "b" "c" "d"] [1 2 3 4]]

docs: https://echarts.apache.org/en/option.html

edn clj/s

(edn)

(edn value)

(edn value options)

display-as: a piece syntax highlighted EDN structure example:

{:x [1 2 3]}

emmy-viewers clj/s

(emmy-viewers)

(emmy-viewers value)

(emmy-viewers value options)

display-as: A reagent component corresponding to emmy-viewers

fn clj/s

(fn)

(fn value)

(fn value options)

display-as: the evaluation of the given function and arguments examples:

;; vector form
(kind/fn [+ 2 3]) ; => 5
(kind/fn [(fn [s] (kind/md s)) 
**hi**: ]) ; => bold hi
;; map form
(kind/fn {:kindly/f (fn [{:keys [x y]}] (+ x y)) :x 1 :y 2}) ; => 3
;; arbitrary value + custom view fn
(kind/fn ["**hi**"] {:kindly/f (fn [[txt]] (kind/md txt))) ; => bold hi

fragment clj/s

(fragment)

(fragment value)

(fragment value options)

display-as: one toplevel context with a sequential value considered as many toplevel contexts of various kinds example:

[["**hello**"] [:p [:b "hello"]]]

graphviz clj/s

(graphviz)

(graphviz value)

(graphviz value options)

display-as: Graphviz diagram example:

digraph G { a -> b -> c }

hiccup clj/s

(hiccup)

(hiccup value)

(hiccup value options)

display-as: HTML example:

[:div [:h3 "Hello " [:em "World"]]]

hidden clj/s

(hidden)

(hidden value)

(hidden value options)

display-as: do not display example:

["SECRET"]

highcharts clj/s

(highcharts)

(highcharts value)

(highcharts value options)

display-as: a chart example:

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

docs: https://www.highcharts.com/docs/index json-schema:

html clj/s

(html)

(html value)

(html value options)

display-as: HTML example:

<div><h3>Hello ><em>World</em></h3><div>

htmlwidgets-ggplotly clj/s

(htmlwidgets-ggplotly)

(htmlwidgets-ggplotly value)

(htmlwidgets-ggplotly value options)

display-as: a plot rendered by the JS client side of Plotly R, specifically for a ggplotly plot docs: https://plotly.com/ggplot2/

htmlwidgets-plotly clj/s

(htmlwidgets-plotly)

(htmlwidgets-plotly value)

(htmlwidgets-plotly value options)

display-as: a plot rendered by the JS client side of Plotly R docs: https://plotly.com/r/

image clj/s

(image)

(image value)

(image value options)

display-as: an image example:

At the moment, java BufferedImage objects are supported.

map clj/s

(map)

(map value)

(map value options)

display-as: associated values example:

{:key1 "value1", :key2 "value2"}

md clj/s

(md)

(md value)

(md value options)

display-as: a Markdown string example:

## Hello *World*

mermaid clj/s

(mermaid)

(mermaid value)

(mermaid value options)

display-as: Mermaid diagram example:

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
  

observable clj/s

(observable)

(observable value)

(observable value options)

display-as: Observable visualizations docs: https://observablehq.com/

plotly clj/s

(plotly)

(plotly value)

(plotly value options)

display-as: a plot example:

[{:x [1 2 3 4 5], :y [1 2 4 8 16]}]

docs: https://plotly.com/javascript/getting-started/ json-schema: https://plotly.com/chart-studio-help/json-chart-schema/

portal clj/s

(portal)

(portal value)

(portal value options)

display-as: portal example:

{:key1 "value1", :key2 [:div [:h3 "Hello " [:em "World"]]]}

pprint clj/s

(pprint)

(pprint value)

(pprint value options)

display-as: a formatted string of a pretty-printed value example:

{:key1 "value1", :key2 "value2"}

println clj/s

(println)

(println value)

(println value options)

display-as: a formatted string of a printed value example:

{:key1 "value1", :key2 "value2"}

reagent clj/s

(reagent)

(reagent value)

(reagent value options)

display-as: A reagent component inside HTML example:

[(fn [] [:button {:on-click (fn [ev] (js/alert "You pressed it"))} "Press me"])]

scittle clj/s

(scittle)

(scittle value)

(scittle value options)

display-as: Code to go into a <script type="application/x-scittle"> example:

(println "hello world")

seq clj/s

(seq)

(seq value)

(seq value options)

display-as: a sequence example:

(range 5)

set clj/s

(set)

(set value)

(set value options)

display-as: a bag example:

(set (range 5))

smile-model clj/s

(smile-model)

(smile-model value)

(smile-model value options)

display-as: the str value should be displayesd as code docs: https://haifengl.github.io/

table clj/s

(table)

(table value)

(table value options)

display-as: a table examples:

[{:col1 1, :col2 2} {:col1 3, :col2 4}]
{:col1 [1 3], :col2 [2 4]}
{:column-names [:col1 :col2], :row-vectors [[1 2] [3 4]]}

test clj/s

(test)

(test value)

(test value options)

display-as: success or failure example:

(deftest unity-test (is (= 1 1)))

test-last clj/s

(test-last)

(test-last value)

(test-last value options)

display-as: invisible (both code and value), but generates a test example:

[> 9]

tex clj/s

(tex)

(tex value)

(tex value options)

display-as: a TeX formula example:

x^2

var clj/s

(var)

(var value)

(var value options)

display-as: the name of a var example:

(def testvar 100)

vector clj/s

(vector)

(vector value)

(vector value options)

display-as: a sequence example:

(vec (range 5))

vega clj/s

(vega)

(vega value)

(vega value options)

display-as: a chart example:

{:description "A basic bar chart example, with value labels shown upon pointer hover.", :axes [{:orient "bottom", :scale "xscale"} {:orient "left", :scale "yscale"}], :width 400, :scales [{:name "xscale", :type "band", :domain {:data "table", :field "category"}, :range "width", :padding 0.05, :round true} {:name "yscale", :domain {:data "table", :field "amount"}, :nice true, :range "height"}], :padding 5, :marks [{:type "rect", :from {:data "table"}, :encode {:enter {:x {:scale "xscale", :field "category"}, :width {:scale "xscale", :band 1}, :y {:scale "yscale", :field "amount"}, :y2 {:scale "yscale", :value 0}}, :update {:fill {:value "steelblue"}}, :hover {:fill {:value "red"}}}} {:type "text", :encode {:enter {:align {:value "center"}, :baseline {:value "bottom"}, :fill {:value "#333"}}, :update {:x {:scale "xscale", :signal "tooltip.category", :band 0.5}, :y {:scale "yscale", :signal "tooltip.amount", :offset -2}, :text {:signal "tooltip.amount"}, :fillOpacity [{:test "datum === tooltip", :value 0} {:value 1}]}}}], :signals [{:name "tooltip", :value {}, :on [{:events "rect:pointerover", :update "datum"} {:events "rect:pointerout", :update "{}"}]}], :height 200, :data [{:name "table", :values [{:category "A", :amount 28} {:category "B", :amount 55} {:category "C", :amount 43} {:category "D", :amount 91} {:category "E", :amount 81} {:category "F", :amount 53} {:category "G", :amount 19} {:category "H", :amount 87}]}]}

docs: https://vega.github.io/vega/docs/ json-schema: https://vega.github.io/schema/vega/v5.json

vega-lite clj/s

(vega-lite)

(vega-lite value)

(vega-lite value options)

display-as: VegaLite chart example:

{:description "A simple bar chart with embedded data.", :data {:values [{"a" "A", "b" 28} {"a" "B", "b" 55} {"a" "C", "b" 43} {"a" "D", "b" 91} {"a" "E", "b" 81} {"a" "F", "b" 53} {"a" "G", "b" 19} {"a" "H", "b" 87} {"a" "I", "b" 52}]}, :mark "bar", :encoding {"x" {"field" "a", "type" "nominal", "axis" {"labelAngle" 0}}, "y" {"field" "b", "type" "quantitative"}}}

docs: https://vega.github.io/vega-lite/docs/ json-schema: https://vega.github.io/schema/vega-lite/v5.json

video clj/s

(video)

(video value)

(video value options)

display-as: an embedded video examples:

{:youtube-id "MXHI4mgfVk8"}
{:src "https://video-url.mp4"}