ClojureScript实现交互式数据展示

本方演示如何使用ClojureScript实现交互式数据展示。本文结尾处有Demo,可使用本文自带的数据或使用你输入的数据测试。

创建ClojureScript项目

使用figwheel-main模板创建ClojureScript项目:

lein new figwheel-main cljsozplot.core -- --reagent

修改project.clj,添加我们将用到的库:

[testdouble/clojurescript.csv "0.4.5"]
[metasoarous/oz "1.6.0-alpha6"]
[alandipert/storage-atom "2.0.1"]

使用lein fig或在Emacs中使用cider-jack-in-cljs,选择figwheel-main进入REPL。

使用oz绘制图表

oz的绘图语句是:

[:div [oz/vega-lite plot-data]]

我们只需为oz生成用于绘图的结构数据即可。oz支持vega与vega-lite,后者封 装于前者上,语法更简洁。

vega-lite绘图的输入为Json数据。oz将我们的Clojure格式的输入,即上面的 plot-data转换为Json格式后交给vega-lite处理。由于Clojure数据结构可轻易转换 为Json数据,我们可以参考vega-lite的文档进行参数设定。

plot-data的格式如下。

{:data {:values data}
 :encoding {:x {:field x-field-name
                :type x-field-type}
            :y {:field y-field-name :type y-field-type}
            :color {:value "black"}}
 :mark "line"}

其中这几项需要关注:

  • data由CSV文本转换而来,是map组成的列表
  • x-field-namey-field-name 分别为X轴与Y轴的字段名,可以是字符串也可以是Clojure keyword。若带有-,建议使用字符串,避免oz/vega-lite转换时出错。
  • x-field-typey-field-type 分别为X轴与Y轴的类型。这里指的是vega-lite定义类型,常用的是quantitative(数字)与temporal(时间序列)。vega-lite通常会自动转换数据格式,也就是说,声明格式为quantitative时,我们不用写代码将字符串"122"转换为数字122。 注意:使用时间序列时,输入必须是带有年月日的字符串,若只有时和分,如HH:mm格式的数据将无法自动按时间序列解析。

Demo

Loading Demo....

源码及参考

Comment