數(shù)據(jù)可視化【免費(fèi)下載鏈接】vegaA visualization grammar.項(xiàng)目地址https://gitcode.com/gh_mirrors/ve/vega點(diǎn)擊查看免費(fèi)下載導(dǎo)讀詞云Word Cloud是一種以字號(hào)映射詞頻的文本可視化形式。在 Vega 生態(tài)中vega-wordcloud包為數(shù)據(jù)流dataflow提供了wordcloud數(shù)據(jù)變換負(fù)責(zé)計(jì)算類似 Wordle 風(fēng)格的詞云布局并將每個(gè)詞的位置、字體與旋轉(zhuǎn)角度寫回?cái)?shù)據(jù)項(xiàng)供 text 標(biāo)記 渲染。本文以 wordcloud 變換官方文檔 為主體結(jié)合 Wordcloud.js 與 CloudLayout.js 的源碼實(shí)現(xiàn)和測(cè)試用例講解參數(shù)含義、字號(hào)縮放原理、螺旋布局與碰撞檢測(cè)算法并給出可直接運(yùn)行的真實(shí)示例。讀完本文你將能夠獨(dú)立配置出一份帶詞頻映射、隨機(jī)旋轉(zhuǎn)與顏色編碼的 Vega 詞云圖。一、wordcloud 變換是什么根據(jù) wordcloud 變換文檔 的定義wordcloud變換計(jì)算詞云布局效果與 Wordle 類似其底層使用 Jason Davies 的 wordcloud 實(shí)現(xiàn)專門用于配合 text 標(biāo)記類型可視化單詞或短語(yǔ)。該變換將輸入數(shù)據(jù)中的每個(gè)詞視為一個(gè)待擺放的“標(biāo)簽”通過(guò)螺旋掃描尋找無(wú)碰撞的位置最終把布局結(jié)果寫回?cái)?shù)據(jù)字段。從包結(jié)構(gòu)看vega-wordcloud是一個(gè)標(biāo)準(zhǔn)的 Vega 數(shù)據(jù)變換子包入口文件 只導(dǎo)出一個(gè)wordcloud變換package.json 聲明其運(yùn)行時(shí)依賴為vega-canvas、vega-dataflow、vega-scale、vega-statistics與vega-util分別負(fù)責(zé)畫布上下文、數(shù)據(jù)流機(jī)制、比例尺用于字號(hào)縮放、隨機(jī)數(shù)源與工具函數(shù)它被 vega 聚合包 匯總導(dǎo)出因此使用完整 Vega 庫(kù)時(shí)可直接引用wordcloud變換類型。二、快速上手一個(gè)完整的詞云示例Vega 官方示例 word-cloud.vg.json 展示了 wordcloud 變換的完整用法先用countpattern變換統(tǒng)計(jì)論文摘要中的高頻詞再用formula變換生成旋轉(zhuǎn)角與字重最后交給wordcloud布局。其中詞云變換的核心片段如下{ type: wordcloud, size: [800, 400], text: {field: text}, rotate: {field: datum.angle}, font: Helvetica Neue, Arial, fontSize: {field: datum.count}, fontWeight: {field: datum.weight}, fontSizeRange: [12, 56], padding: 2 }配套的formula變換負(fù)責(zé)制造隨機(jī)角度與字重差異{ type: formula, as: angle, expr: [-45, 0, 45][~~(random() * 3)] }, { type: formula, as: weight, expr: if(datum.textVEGA, 600, 300) }這段表達(dá)式表示每個(gè)詞的旋轉(zhuǎn)角從-45°、0°、45°三個(gè)候選值中隨機(jī)選取對(duì)應(yīng) word-cloud.md 中“word angles are randomly selected from the set [-rotate, 0, rotate]”的描述詞 “VEGA” 使用 600 字重以突出顯示其余詞使用 300。text 標(biāo)記側(cè)需要設(shè)置居中對(duì)齊encode: { enter: { text: {field: text}, align: {value: center}, baseline: {value: alphabetic}, fill: {scale: color, field: text} } }上圖即該示例的真實(shí)渲染結(jié)果單詞按詞頻映射字號(hào)、隨機(jī)旋轉(zhuǎn)角度并按詞語(yǔ)分配顏色。完整規(guī)格見(jiàn) word-cloud.vg.json。三、變換參數(shù)詳解wordcloud 變換文檔 給出的參數(shù)表如下下表在繼承文檔全部參數(shù)的基礎(chǔ)上補(bǔ)充了 Wordcloud.Definition 中聲明的默認(rèn)值參數(shù)類型說(shuō)明默認(rèn)值fontString|Expr詞條使用的字體族sans-seriffontStyleString|Expr詞條使用的字體樣式normalfontWeightString|Expr詞條使用的字重normalfontSizeNumber|Expr詞條字號(hào)像素14fontSizeRangeNumber[]字號(hào)縮放范圍當(dāng)指定了 range 且fontSize不是數(shù)值常量時(shí)fontSize的值將按平方根比例尺自動(dòng)縮放到該區(qū)間內(nèi)[10, 50]paddingNumber|Expr詞條周圍的內(nèi)邊距像素1rotateNumber|Expr詞條旋轉(zhuǎn)角度度0textField承載詞文本的數(shù)據(jù)字段—必填sizeNumber[]布局尺寸[width, height]數(shù)組[500, 500]spiralString擺放詞條的螺旋方法archimedean默認(rèn)或rectangulararchimedeanasString[]變換寫出的輸出字段[x, y, font, fontSize, fontStyle, fontWeight, angle]注意事項(xiàng)文檔原文強(qiáng)調(diào)wordcloud 布局要求 text 標(biāo)記的align取center、baseline取alphabetic。如果使用其他設(shè)置文本定位將不準(zhǔn)確。此外從源碼可以看到兩個(gè)隱含約束size的兩個(gè)維度必須為非零。在 Wordcloud.js 中若_.size存在但任一維度為 0會(huì)直接拋出Wordcloud size dimensions must be non-zero.錯(cuò)誤size支持信號(hào)表達(dá)式例如文檔使用示例中的size: [{signal: width}, {signal: height}]即可讓詞云鋪滿整個(gè)視圖的寬高。四、fontSizeRange平方根比例尺的字號(hào)縮放原理fontSizeRange是詞云中最常用的“詞頻 → 字號(hào)”映射手段。官方文檔說(shuō)明當(dāng)指定了 range 且fontSize不是數(shù)值常量時(shí)fontSize的值會(huì)按平方根比例尺square root scale自動(dòng)縮放進(jìn)該區(qū)間。對(duì)應(yīng)源碼位于 Wordcloud.jslet fontSize _.fontSize || 14, range; isFunction(fontSize) ? (range _.fontSizeRange) : (fontSize constant(fontSize)); // create font size scaling function as needed if (range) { const fsize fontSize, sizeScale scale(sqrt)() .domain(extent(data, fsize)) .range(range); fontSize x sizeScale(fsize(x)); }其邏輯可概括為若fontSize是函數(shù)/表達(dá)式如{field: count}則啟用fontSizeRange若fontSize是數(shù)值常量則直接固定該字號(hào)啟用縮放時(shí)先對(duì)數(shù)據(jù)中所有fontSize取值求extent最小/最大值作為比例尺定義域再以sqrt比例尺映射到range指定的字號(hào)區(qū)間使用平方根而非線性比例尺是為了讓面積而非邊長(zhǎng)與詞頻近似成正比這是詞云“以面積感知權(quán)重”的視覺(jué)慣例。wordcloud 單元測(cè)試 驗(yàn)證了這一行為測(cè)試數(shù)據(jù)size字段取[49, 36, 25, 1]配置fontSize: size、fontSizeRange: [1, 7]斷言輸出data[i].fontSize Math.sqrt(data[i].size)49→7、36→6、25→5、1→1。這證明字號(hào)經(jīng)過(guò) sqrt 縮放后恰好落在[1, 7]區(qū)間內(nèi)且與原始值呈平方根關(guān)系。五、布局算法源碼解析螺旋、精靈位圖與碰撞檢測(cè)vega-wordcloud的核心布局實(shí)現(xiàn)在 CloudLayout.js 中。文件頭部版權(quán)注明該實(shí)現(xiàn)源自 Jason Davies 的 wordcloud算法出自 Jonathan Feinberg 的論文第 2 行注釋Algorithm due to Jonathan Feinberg整體可拆分為三層機(jī)制1. 螺旋掃描spiral默認(rèn)的archimedean螺旋按阿基米德螺旋線向外擴(kuò)展function archimedeanSpiral(size) { var e size[0] / size[1]; return function(t) { return [e * (t * .1) * Math.cos(t), t * Math.sin(t)]; }; }rectangular螺旋則以矩形路徑逐圈外擴(kuò)并利用三角數(shù)triangular numbers決定四個(gè)邊的轉(zhuǎn)向。布局時(shí)每個(gè)詞從畫布中心附近的隨機(jī)起點(diǎn)出發(fā)沿螺旋逐步外移尋找空位place函數(shù)一旦超出布局邊界Math.min(Math.abs(dx), Math.abs(dy)) maxDelta即放棄該詞。2. 精靈位圖sprite為了做像素級(jí)碰撞檢測(cè)布局器通過(guò)vega-canvas創(chuàng)建離屏 canvas把每個(gè)詞渲染成單色位圖cloudSprite批量渲染文本、measureText測(cè)量寬高、旋轉(zhuǎn)角通過(guò)c.rotate(d.rotate * cloudRadians)應(yīng)用padding通過(guò)c.lineWidth 2 * d.padding配合strokeText把描邊寫入位圖。最終把 1-bit 像素打包進(jìn) 32 位整數(shù)的sprite數(shù)組供碰撞檢測(cè)按位運(yùn)算快速判斷。3. 掩碼碰撞檢測(cè)mask-based collisioncloudCollide與place使用按位或|與移位、在整塊board位圖上檢測(cè)重疊新詞精靈與已占用的棋盤區(qū)域做位與運(yùn)算非零即發(fā)生碰撞無(wú)碰撞則通過(guò)位或?qū)懭肫灞P。布局完成后Wordcloud.js 將布局坐標(biāo)以畫布中心為原點(diǎn)換算回布局坐標(biāo)dx size[0] 1并把x、y、font、fontSize、fontStyle、fontWeight、angle七個(gè)字段寫回每個(gè)數(shù)據(jù)項(xiàng)。4. 隨機(jī)數(shù)來(lái)源隨機(jī)起點(diǎn)方向由random提供變換側(cè)在 Wordcloud.js 傳入vega-statistics的random函數(shù)保證隨機(jī)性可被 Vega 統(tǒng)計(jì)模塊統(tǒng)一管理。六、變換的觸發(fā)與增量更新機(jī)制作為 Vega 數(shù)據(jù)流變換wordcloud 繼承自vega-dataflow的Transform。在 transform 方法 中變換通過(guò)以下條件判斷是否需要重排const mod _.modified(); if (!(mod || pulse.changed(pulse.ADD_REM) || Params.some(modp))) return;即僅當(dāng)滿足三者之一時(shí)才重新計(jì)算布局參數(shù)被修改_.modified()、數(shù)據(jù)發(fā)生增刪pulse.changed(ADD_REM)、或text/font/rotate/fontSize/fontStyle/fontWeight等參數(shù)對(duì)應(yīng)字段被標(biāo)記為已修改modp會(huì)檢查pulse.modified(p.fields)。布局開(kāi)始前輸出字段會(huì)被初始化為NaN或 0避免殘留舊值布局完成后通過(guò)pulse.reflow(mod).modifies(as)標(biāo)記這些字段發(fā)生變化通知下游 mark 重繪。七、注意事項(xiàng)與運(yùn)行前提對(duì)齊設(shè)置text 標(biāo)記必須使用align: center與baseline: alphabetic否則詞條位置偏移見(jiàn) wordcloud 文檔 中的 Note依賴 canvas 環(huán)境布局依賴vega-canvas渲染離屏文本位圖因此運(yùn)行時(shí)需要有可用的 Canvas 實(shí)現(xiàn)。也正因如此packages/vega/test/scene-test.js 在跨平臺(tái)場(chǎng)景測(cè)試中特意過(guò)濾了wordcloud規(guī)格注釋filter wordcloud due to cross-platform canvas issues說(shuō)明在無(wú) DOM 的服務(wù)端環(huán)境下渲染詞云可能受 canvas 支持程度影響size非零任一維度為 0 會(huì)觸發(fā)報(bào)錯(cuò)隨機(jī)角度rotate通常配合formula生成如示例中的[-45, 0, 45][~~(random() * 3)]也可直接綁定數(shù)據(jù)字段布局尺寸不指定size時(shí)默認(rèn)[500, 500]生產(chǎn)中建議顯式綁定視圖寬高信號(hào)如[{signal: width}, {signal: height}]。八、測(cè)試驗(yàn)證如何確認(rèn)變換行為wordcloud 單元測(cè)試 提供了一個(gè)最小可復(fù)現(xiàn)的數(shù)據(jù)流實(shí)驗(yàn)構(gòu)建Dataflow將Collect與Wordcloud變換接入通過(guò)changeset().insert(data)推送數(shù)據(jù)df.pulse(...).run()執(zhí)行后斷言每個(gè)數(shù)據(jù)項(xiàng)都獲得了非NaN的x、y坐標(biāo)font、fontStyle、fontWeight使用默認(rèn)值sans-serif / normal / normalfontSize滿足平方根縮放關(guān)系angle正確寫入來(lái)自信號(hào)rot的旋轉(zhuǎn)角。該測(cè)試從側(cè)面給出了 wordcloud 變換的完整調(diào)用契約輸入數(shù)據(jù)項(xiàng)只需攜帶text字段與字號(hào)字段布局結(jié)果會(huì)以as指定的字段追加到原數(shù)據(jù)項(xiàng)上metadata: {modifies: true}即原數(shù)據(jù)被就地修改。結(jié)語(yǔ)vega-wordcloud用約 450 行代碼把“螺旋擺放 位圖碰撞檢測(cè) 平方根字號(hào)縮放”這一經(jīng)典詞云算法封裝成了 Vega 數(shù)據(jù)流中即插即用的wordcloud變換。配置層面只需關(guān)注text、fontSize/fontSizeRange、rotate、size與spiral幾個(gè)參數(shù)渲染層面則務(wù)必遵守 text 標(biāo)記的居中對(duì)齊約定。結(jié)合 word-cloud.vg.json 完整示例與 wordcloud 變換文檔你可以在自己的 Vega 規(guī)范中快速?gòu)?fù)現(xiàn)出同樣效果的高頻詞云圖。贊分享數(shù)據(jù)可視化【免費(fèi)下載鏈接】vegaA visualization grammar.項(xiàng)目地址https://gitcode.com/gh_mirrors/ve/vega點(diǎn)擊查看免費(fèi)下載相關(guān)推薦Vega Wordcloud Transform 詞云布局變換完整指南參數(shù)、原理與實(shí)戰(zhàn)示例Vega Wordcloud Transform 詞云布局變換完整指南參數(shù)、原理與實(shí)戰(zhàn)示例 詞云Word Cloud是一種以文字大小映射數(shù)據(jù)權(quán)重的可視化形數(shù)據(jù)可視化Vega 詞云Word Cloud可視化從 countpattern 文本統(tǒng)計(jì)到 wordcloud 布局的完整實(shí)戰(zhàn)Vega 詞云Word Cloud可視化從 countpattern 文本統(tǒng)計(jì)到 wordcloud 布局的完整實(shí)戰(zhàn) 詞云Word Cloud / Ta數(shù)據(jù)可視化Vega 回歸變換深入指南vega-regression 包的 Regression 與 Loess 數(shù)據(jù)變換Vega 回歸變換深入指南vega regression 包的 Regression 與 Loess 數(shù)據(jù)變換 vega regression 是 Vega數(shù)據(jù)可視化創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考