声明性数据可视化

2020-08-06 02:50:07

在前一节中,我们展示了如何以命令式方式可视化数据。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";]}}";";";)