声明性数据可视化

在前一节中，我们展示了如何以命令式方式可视化数据。SMILE还支持声明性方法中的数据可视化。使用smile.plot.vega包(在工件smile-scala中)，我们可以创建一个规范，将可视化描述为从数据到图形标记(例如，点或条)属性的映射。该规范基于Vega-Lite。Vega-Lite编译器自动生成可视化组件，包括轴、图例和比例。然后，它根据一组精心设计的规则确定这些组件的属性。

这种方法允许规范简洁和富有表现力，但也提供了用户控制。由于Vega-Lite是为分析而设计的，因此它支持数据转换，例如聚合、装箱、过滤、排序，以及包括堆叠和分面在内的可视转换。此外，Vega-Lite规范可以组合成分层和多视图显示，并与选择进行交互。

Vega-Lite网站提供了有关该规范的详细文档。在下面，我们将通过示例来展示如何创建各种图表。

Val bar=VegaLite.view()。标记("；bar"；)。HeightStep(17)。X(field="；a"；，`type`="；序号"；，axis=JsObject("；labelAngel"；->；JsInt(0)。Y(field="；b"；，`type`="；量化"；)。数据(jsan"；"；"；[{"；a"；："；a"；：28}，{"；a"；："；b"；，"；b"；：55}，{"；a"；："；C"；，"；b"；：43}，{"；a"；："；D"；，"；b"；：91}，{"；E"；，"；b"；：81}，{"；a"；："；F"；，"；b"；：53}，{"；a"；："。G"；，"；b"；：19}，{"；a"；："；H"；，"；b"；：87}，{"；a"；："；i"；，"；b"；：52}]"；"；"；)。说明("；嵌入数据的简单条形图。"；)。

VAL聚合条=VegaLite("；https://vega.github.io/vega-lite/examples/data/population.json"；).。标记("；bar"；)。HeightStep(17)。X(field="；People&34；，`type`="；Quantity&34；，Aggregate="；SUM&34；，Title="；Population&34；)。Y(field="；age"；，`type`="；序号"；)。Transform(json"；"；"；{"；filter"；："；datum.year==2000"；}"；"；"；)。说明(显示2000年美国各年龄段人口分布的条形图。)。

ValortedAggregateBar=VegaLite("；https://vega.github.io/vega-lite/examples/data/population.json"；).。标记("；bar"；)。HeightStep(17)。X(field="；People&34；，`type`="；Quantity&34；，Aggregate="；SUM&34；，Title="；Population&34；)。Y(field="；age"；，`type`="；序号"；，Sort=Some("；-x"；))。Transform(json"；"；"；{"；filter"；："；datum.year==2000"；}"；"；"；)。说明("；按x值对y值进行排序的条形图。"；)show(SortedAggregateBar)。

VAL分组条=VegaLite.facet("；https://vega.github.io/vega-lite/examples/data/population.json"；).。列(field="；age"；，`type`="；序号"；，间距=某些(10))。标记("；bar"；)。WidthStep(12)。X(字段="；性别"；，`类型`="；名义"；，标题=空)。Y(field="；People"；，`type`="；Quantity"；，Aggregate="；sum"；，Axis=json"；"；"；{"；Title"；："；Population"；，"；Grid"；：false}"；"；"；)。颜色(field="；性别"；，`type`="；名义"；，scale=json"；"；{"；range"；：["；#675193"；，"；#ca8861"；]}"；"；"；"；)。转换(json"；"；"；{"；filter"；："；datum.year==2000"；}"；"；，json"；"；"；计算"；："；datum.sex==2？'；女性'；：'；男性&39；"；，"。性别#34；}"；"；"；)。配置(json"；"；"；{"；查看"；：{"；笔划"；："；透明"；}，"；轴"；：{"；域宽度"；：1}}"；"；"；)。

VAL堆积条形图=VegaLite("；https://vega.github.io/vega-lite/examples/data/seattle-weather.csv"；).。标记("；bar"；)。X(field="；date"；，`type`="；序号&34；，timeUnit="；月"；，title="；月份"；)。Y(field=NULL，Aggregate="；count"；，`type`="；量化"；)。颜色(字段="；天气"；，`type`="；标称"；，比例=json"；"；"；{"；域"；：["；太阳"；，"；雾"；，"；毛毛雨"；，"；雨"；，"；雪"；]，"；范围"；：[。#e7ba52"；，"；#c7c7c7"；，"；#aec7e8"；，"；#1f77b4"；，"；#9467bd"；]}"；"；"；，图例=JsObject("；标题"；->；JsString("；天气类型"

VAL STACKED_RoundedBar=VegaLite("；https://vega.github.io/vega-lite/examples/data/seattle-weather.csv"；).。标记(JsObject("；type"；-&>；&34；bar"；，"；cornerRadiusTopLeft"；->；3，"；cornerRadiusTopRight"；->；3))。X(field="；date"；，`type`="；序号"；，timeUnit="；月"；)。Y(field=NULL，Aggregate="；count"；，`type`="；量化"；)。颜色(字段="；天气"；，`类型`="；标称"；)。

VAL水平堆积栏=VegaLite("；https://vega.github.io/vega-lite/examples/data/barley.json"；).。标记("；bar"；)。X(字段="；收益率&34；，`类型‘="；量化"；，合计="；和"；)。Y(字段="；品种"；，`类型`="；标称"；)。颜色(字段="；站点"；，`类型`="；标称"；)。

ValLayeredBar=VegaLite("；https://vega.github.io/vega-lite/examples/data/population.json"；).。标记("；bar"；)。WidthStep(17)。X(field="；age"；，`type`="；序号"；)。Y(field="；People&34；，`type`="；Quantitional&34；，Aggregate="；sum"；，title="；opulation"；，stack=JsNull)。颜色(field="；性别"；，`type`="；名义"；，scale=json"；"；{"；range"；：["；#675193"；，"；#ca8861"；]}"；"；"；"；)。不透明度(0.7)。转换(json"；"；"；{"；filter"；："；datum.year==2000"；}"；"；，json"；"；"；计算"；："；datum.sex==2？'；女性'；：'；男性&39；"；，"。性别"；}"；"；"；)。

VAL规格化堆积条形图=VegaLite("；https://vega.github.io/vega-lite/examples/data/population.json"；).。标记("；bar"；)。WidthStep(17)。X(field="；age"；，`type`="；序号"；)。Y(field="；People&34；，`type`="；Quantitional&34；，Aggregate="；sum"；，Title="；Population&34；，Stack="；Normalize"；)。颜色(field="；性别"；，`type`="；名义"；，scale=json"；"；{"；range"；：["；#675193"；，"；#ca8861"；]}"；"；"；"；)。转换(json"；"；"；{"；filter"；："；datum.year==2000"；}"；"；，json"；"；"；计算"；："；datum.sex==2？'；女性'；：'；男性&39；"；，"。性别"；}"；"；"；)。

Val Gantt=VegaLite.view()。标记("；bar"；)。Y(field="；task"；，`type`="；序号"；)。X(field="；start"；，`type`="；数量"；)。X2(字段="；结束"；)。数据(jsan"；"；"；[{"；任务"；："；A"；，"；开始"；：1，"；结束"；：3}，{"；任务"；："；B"；，"；开始"；：3，"；结束"；：8}，{"；任务"；："；C"；，"；开始"；：8，"；结束"；：10}]"；"；"；)。

Val color Bar=VegaLite.view()。标记("；bar"；)。X(field="；color"；，`type`="；名义"；)。Y(field="；b"；，`type`="；量化"；)。颜色(field="；color"；，`type`="；Nominal"；，scale=JsNull)。数据(jsan"；"；"；[{"；color"；："；red"；，"；b"；：28}，{"；color"；，"；b"；：55}，{"；color"；："；Blue"；，"；b"；：43}]"；"；"；)。

VAL直方图=VegaLite("；https://vega.github.io/vega-lite/examples/data/movies.json"；).。标记("；bar"；)。X(field="；IMDB_Rating"；，`type`="；量化"；，bin=Left(True))。Y(field=null，`type`="；量化"；，聚合="；计数"；)。

VAL频率历史记录=VegaLite("；https://vega.github.io/vega-lite/examples/data/cars.json"；).。Mark(JsObject("；type"；->；&34；bar"；，"；ToolTip"；->；true))。X(FIELD="；BIN_HOSESPWOER"；，`type`="；QUALTIAL"；，BIN=Right(json"；"；"；{"；binned"；：true}"；"；"；)，TITLE="；马力"；)。X2(field="；bin_HorSepwoer_End"；)。Y(field="；PercentOfTotal"；，`type`="；量化"；，标题="；相对频率"；，轴=json"；"；"；{"；格式"；："；.1~%"；}"；"；"；"；)。转换(jsan"；"；"；[{"；bin"；：true，"；field"；："；horsepower"；，"；as"；："；bin_HorSepwoer"；}，{"；聚合"；：[{"；op"；："；count"；，"；as"；Count"；}]，"；groupby"；：["；bin_HorSepwoer"；，"；bin_HorSepwoer_End"；]}，{"；Joingregate"；：："；SUM"；，"；field"；："；count"；，"；As"；：&。}]}，{"；计算"；："；datum.Count/datum.TotalCount"；，"；作为"；："；PercentOfTotal"；}]"；"；"；)

VAL历史热图=VegaLite("；https://vega.github.io/vega-lite/examples/data/movies.json"；).。标记("；RECT"；)。X(FIELD="；IMDB_Rating"；，`type`="；Quantitional"；，bin=Right(json"；"；"；{"；maxbins"；：60}"；"；"；)，Title="；IMDB Rating"；)。Y(字段="；烂番茄评级"；，`类型`="；定量"；，bin=Right(json"；"；"；{"；maxbins"；：40}"；"；"；)).。Color(field=null，`type`="；Quantitional"；，Aggregate="；count"；)。宽度(300)。高度(200)。转换(json"；"；"；{"；Filter"；：{"；and"；：[{"；field"；："；IMDB_Rating"；，"；Valid"；：true}，{"；field"；："；Rotten_Tomatos_Rating"；，"；Valid"；：true}]}&#。"；"；)。Config(JsObject("；view"；->；json"；"；"；笔划"；："；透明"；}"；"；"；)。

VAL密度=VegaLite("；https://vega.github.io/vega-lite/examples/data/movies.json"；).。标记("；区域"；)。X(field="；value"；，`type`="；Quantitional"；，title="；IMDB Rating"；)。Y(字段="；密度"；，`类型`="；定量"；)。宽度(400)。高度(100)。变换(json"；"；"；{"；密度"；："；IMDB_Rating"；，"；带宽"；：0.3}"；"；"；)。

VAL CDF=VegaLite("；https://vega.github.io/vega-lite/examples/data/movies.json"；).。标记("；区域"；)。X(field="；IMDB_Rating"；，`type`="；量化"；)。Y(FIELD="；Cumulative_Count"；，`type`="；量化"；)。转换(json"；"；"；{"；排序"；：："；IMDB_Rating"；}]，"；窗口"；：[{"；操作"；："；计数"；，"；字段"；："；计数"；，"；作为"；："；Cumulative_Count"；}]，"；帧"；：[NULL，0]}"；"；"；)。

值散射=VegaLite("；https://vega.github.io/vega-lite/examples/data/cars.json"；).。标记("；点"；)。X(field="；马力"；，`type`="；定量"；)。Y(field="；Miles_per_garon"；，`type`="；定量"；)。颜色(field="；Origin"；，`type`="；Nominal"；)。形状(字段="；原点"；，`类型`="；标称"；)。

VAL气泡=VegaLite("；https://vega.github.io/vega-lite/examples/data/cars.json"；).。标记("；点"；)。X(field="；马力"；，`type`="；定量"；)。Y(field="；Miles_per_garon"；，`type`="；定量"；)。大小(字段="；加速度"；，`类型`="；定量"；)。

VAL灾难=VegaLite("；https://vega.github.io/vega-lite/examples/data/disasters.csv"；).。标记(JsObject("；type"；->；"；圆形"；，"；不透明度"；->；0.8，"；笔划"；->；"；黑色"；，"；strokeWidth"；->；1))。宽度(600)。高度(400)。X(field="；年"；，`type`="；序号"；，轴=json"；"；{"；labelangle"；：0}"；"；"；)。Y(field="；实体"；，`type`="；名义"；，标题=NULL)。大小(field="；死亡"；，`type`="；定量"；，图例=json"；"；"；{"；标题"；："；年度全球死亡"；，"；剪辑高度"；：30}"；"；"；，scale=json"；"；"；{"；range&#。"；)。颜色(field="；实体"；，`type`="；名义"；，图例=JsNull)。Transform(json"；"；"；{"；filter"；："；datum.Entity！=='；所有自然灾害'；"；}"；"；"；)。

ValTextPlot=VegaLite("；https://vega.github.io/vega-lite/examples/data/cars.json"；).。标记("；文本"；)。X(field="；马力"；，`type`="；定量"；)。Y(field="；Miles_per_garon"；，`type`="；定量"；)。颜色(字段="；品牌"；，`类型`="；标称"；)。Text(field="；Brand"；，`type`="；Nominal"；)。转换(json"；"；"；{"；计算"；："；Split(datum.Name，'；'；)[0]"；，"；AS"；："；品牌"；}"；"；"；)。

Val线=VegaLite("；https://vega.github.io/vega-lite/examples/data/stocks.csv"；).。标记("；行"；)。X(field="；date"；，`type`="；time"；)。Y(field="；Price"；，`type`="；量化"；)。Transform(json"；"；"；{"；filter"；："；datum.symbol==='；GOOG'；"；}"；"；"；)

VAL点直线=VegaLite("；https://vega.github.io/vega-lite/examples/data/stocks.csv"；).。Mark(JsObject("；type"；->；&34；line"；，"；point"；->；true))。X(field="；date"；，`type`="；time"；，timeUnit="；Year"；)。Y(字段="；价格&34；，`类型`="；数量&34；，合计="；平均值"；)。颜色(字段="；符号"；，`类型`="；标称"；)。

Val fifienceInterval=VegaLite.layer("；https://vega.github.io/vega-lite/examples/data/cars.json"；，&34；json&34；，VegaLite.view()。Mark(JsObject("；type"；->；&34；errorband"；，"；Extension"；->；"；ci"；))。Y(field="；Miles_per_garon"；，`type`="；Quantity"；，title="；每加仑里程平均值(95%顺)"；)，VegaLite.view()。标记("；行"；)。Y(字段="；每加仑里程"；，`类型`="；，定量"；，聚合="；平均值"；)).x(字段="；年"；，`类型`="；时间"；，时间单位="；年"；)。

VAL RollingAverages=VegaLite.layer("；https://vega.github.io/vega-lite/examples/data/seattle-weather.csv"；，"；csv&34；，VegaLite.view()。标记(JsObject("；类型"；->；&34；点"；，"；不透明度"；->；0.3))。X(field="；date"；，`type`="；time"；，title="；date"；)。Y(field="；temp_max"；，`type`="；量化"；，title="；最高温度"；)，VegaLite.view()。标记(JsObject("；color"；->；&34；红色"；，"；大小"；->；3，"；类型"；->；"；行"；))。X(field="；date"；，`type`="；time"；)。Y(FIELD="；ROLING_Mean"；，`type`="；量化"；)，)。宽度(400)。高度(300)。转换(json"；"；"；{"；Frame"；：[-15，15]，"；Window"；：[{"；field"；："；temp_max"；，"；op"；："；Mean"；，"；As"；："；Rolling_Mean"；}]}"；"；"；)。

VAL面积=VegaLite("；https://vega.github.io/vega-lite/examples/data/stocks.csv"；).。Mark(JsObject("；type"；->；&34；Area"；，"；line"；->；true，"；point"；->；true))。X(field="；date"；，`type`="；time"；)。Y(field="；Price"；，`type`="；量化"；)。Transform(json"；"；"；{"；filter"；："；datum.symbol==='；GOOG'；"；}"；"；"；)。

VAL热图=VegaLite("；https://vega.github.io/vega-lite/examples/data/seattle-temps.csv"；).。标记("；RECT"；)。X(FIELD="；日期"；，`type`="；序号"；，timeUnit="；日期"；，标题="；天"；，轴=json"；"；"；标签角度"；：0，"；格式"；："；%e"；}"；"；"；"；)。Y(field="；date"；，`type`="；序号"；，timeUnit="；月"；，标题="；月"；)。COLOR(FIELD="；TEMP"；，`type`="；QUALTIAL"；，Aggregate="；max"；，Legend=json"；"；"；{"；title"；：null}"；"；"；)。Config(json"；"；"；{"；view"；：{"；strokeWidth"；：0，"；step"；：13}，"；轴"；：{"；domain"；：false}}"；"；"；"；)。标题(华盛顿州西雅图2010年每日最高温度(F))。

VAL甜甜圈=VegaLite(jsan"；"；"；[{"；CATEGORY"；：1，"；Value"；：4}，{"；CATEGORY"；：2，"；Value"；：6}，{"；CATEGORY"；：3，"；Value"；：10}，{"；CATEGORY"；：4，"；：3}，{"；类别"；：5，"；值"；：7}，{"；类别"；：6，"；值"；：8}]"；"；"；)。标记(JsObject("；type"；->；&34；arc"；，"；innerRadius"；->；50))。视图(JsObject("；笔划"；->；JsNull))。Theta(field="；value"；，`type`="；量化"；)。颜色(字段="；类别"；，`类型`="；标称"；)。

Val Radius=VegaLite.layer(jsan"；"；"；[12，23，47，6，52，19]"；"；"；，VegaLite.view()。Mark(JsObject("；type"；->；"；arc"；，"；innerRadius"；->；20，"；笔划"；->；&34；#fff"；))，VegaLite.view().mark(JsObject("；type"；->；"；text"；，&##。Text(field="；data"；，`type`="；量化"；))。标记(JsObject("；type"；->；&34；arc"；，"；innerRadius"；->；50))。视图(JsObject("；笔划"；->；JsNull))。Theta(field="；data"；，`type`="；Quantitional"；，stack=true)。RADIUS(field="；data"；，`type`="；定量"；，scale=json"；"；type"；："；sqrt"；，"；零"；：true，"；range"；：[20,100]}"；"；"；"；)。颜色(字段="；数据"；，`类型`="；标称"；，图例=JsNull)。

VAL框图=VegaLite("；https://vega.github.io/vega-lite/examples/data/population.json"；).。Mark(JsObject("；type"；->；&34；boxlot"；，"；Extension"；->；"；min-max"；))。视图(JsObject("；笔划"；->；JsNull))。X(field="；age"；，`type`="；序号"；)。Y(field="；People"；，`type`=

Val geo=VegaLite("；https://vega.github.io/vega-lite/examples/data/us-10m.json"；，JsObject("；类型"；-&>；&34；拓扑"；，"；要素"；-&>；"；县"；))。标记("；地理形状"；)。颜色(field="；rate"；，`type`="；定量"；)。Projection(json"；"；"；{"；type"；："；albersUsa"；}"；"；"；)。宽度(500)。高度(300)。转换(JSON"；"；"；{"；查找"；："；id"；，"；来自"；：{"；数据"；：{"；URL"；："；https://vega.github.io/vega-lite/examples/data/unemployment.tsv"；}，"；键"；："；id"；，"；字段"；：["；Rate"；]}}"；"；"；)