料库零代码可视化编程 第4课时单词全景图

单词全景图制作

 数据大屏提供了一套高度灵活的页面布局机制，使大家能够通过简洁的URL参数配置，构建复杂的多区域布局的数据分析界面。页面上的每个box是独立的展示单元。每个box可以进一步分割成多个子box，或独立配置不同类型的数据及分析图表。

     solve单词全景图

以单词“solve”为例，单词全景图的页面制作流程如下：

访问数据大屏的基础配置页面：http://page.yulk.net/。该页面为数据大屏的初始画布，后续所有Box的分割与配置操作均在此页面进行。

每个Box内部提供以下操作按钮：

①自定义分割

②均分2列（快捷键）

③均分2行（快捷键）

④内容配置

在初始画布中，点击“自定义分割”图标，选择“按行分割”，将基础Box分割为四行。在分割比例设置中，输入四个数值（以英文逗号分隔），例如：10,20,30,40，分别表示各行占原有Box高度的百分比，数值总和须为100。系统将自动按比例分配显示空间，确保四部分紧密组合，铺满整个窗口，实现无滚动条、无空白区域的适配效果。

分成四行

接下来，将第三行（Box-3）进一步分割为三列：点击“自定义分割”图标，选择“按列分割”，输入比例数值，如30,30,40。

  分割三列

完成分割后，Box-3被划分为Box-3-1、Box-3-2和Box-3-3三个子Box。Box命名规则清晰反映层级关系，例如Box-3-1表示由Box-3分割所得。

完成布局分割后，为各Box配置具体内容：

box-1：点击“内容配置”，在数据来源中输入mytitle:solve单词全景图。其中，“mytitle”为文本可视化类型，冒号后为具体文本内容。

  box-1设置

box-2：输入metrics:lemlex('solve')。“metrics”为指标图可视化类型，“lemlex”为词形分布函数，括号内为查询单词。指标图以并列指标卡形式展示核心数据，适用于快速概览。

 box-2

box-3-1：输入wc:simv('solve')。“wc”为词云图类型，“simv”为相似动词函数。可通过“more”选项添加标题“相似动词”。词云图中词语大小与“solve”的语义相似度成正比，展示其主要近义词，如resolve、achieve等。

box-3-2：输入cumtrp:en.dobjvn('solve')。“cumtrp”为累积树状图类型，“en.dobjvn”为动宾搭配函数，检索词为动词，搭配词为宾语名词。添加标题“累计搭配”。该图展示动词“solve”在语料库中的宾语分布及累计占比，其中“problem”搭配比例达67%，体现其典型名词搭配特征。

box-3-3：输入dualbar:solve:dobjvn:problem。“dualbar”为双柱状图类型，“dobjvn”为动宾搭配函数。添加标题“搭配互粉”。该图展示动宾搭配“solve problem”的互现情况，分别统计“solve”后最常出现的名词TOP 10与“problem”前最常出现的动词TOP 10，反映动词与名词在自然语言中的高频共现模式。在自然语言中的共现模式，有助于理解语言中的习惯用法和常见表达方式。

box-4：输入wordtree:en.lemsnts('solve')。“wordtree”为单词树类型，“en.lemsnts”为例句检索函数。该图展示动词“solve”在句子中的常用结构，显示其前词主要集中在“to”。

完成以上配置后，整个“solve”单词全景图的各box内容即配置完毕。

为便于配置，数据大屏默认显示各Box的边界线及名称。在正式发布或分享时，可在URL中添加参数border=0，以隐藏边界线与名称。

可使用浏览器拓展程序“updateURL”辅助配置。该程序将URL中问号后的系统指令逐条拆分，便于清晰查看与编辑。编辑效果与直接修改URL一致。

点击“+”添加border=0，再点击“resend”提交，即可去除Box边界线与名称。

consider单词全景图

Box 支持通过 SQL 语句实现内容配置，其具体配置语法如下。在可视化类型方面，所有在函数内容配置中支持的可视化类型，在 SQL 中同样适用。

SQL配置语法：

可视化类型:SQL语句

示例：consider相似动词

bar:select word,lemmf(word) AS mf from simv where key='solve' order by mf desc

Box也支持通过输入完整的http网址来嵌入外部网页内容。当输入以"http"开头的网址时，系统会在当前Box中嵌入一个iframe（可理解为"网页中的网页"），直接加载并显示目标网址的内容。

嵌入网页配置语法：

box名称:data=完整的网页地址

嵌入网页配置示例:

pyramid金字塔数据单页：consider宾语分布中英对比

http://page.yulk.net/?box:data=http://data.yulk.net/pyramid:select+word,cn,en+from+dobjvn+where+key=%27consider%27+order+by+cn+desc+limit+30

input单页（code参数）：当 code参数存在时，input单页将忽略其他所有参数（如 input），并进入非交互状态，直接渲染代码的执行结果。

原始网址：http://input.yulk.net/?code=mermaid('treemap','"dobjvn"', en.dobjvn('consider').head(20).wordcnt())

http://page.yulk.net/?box:data=http://input.yulk.net/?code=mermaid(%27treemap%27,%27%22dobjvn%22%27,+en.dobjvn(%27consider%27).head(20).wordcnt())

ebar 柱状图

http://page.yulk.net/?box:data=http:%2F%2Fdata.yulk.net%2Febar:lemlex%28%27book%27%29

请自选一个英文单词，参照上述流程制作单词全景图。

（更多可视化类型及函数说明，请参考数据大屏。）

本周作业提交地址：https://yulkdata.feishu.cn/drive/folder/Hc5VfBJQmlqD2HdF3CycG5L5nVe?from=from_copylink