Word Cloud Widget

Readme.md

@kabe くんからもらった Word Cloud データを Bokeh で表示するまで。

• CSV のなかの第二欄 font-size という名称が JavaScript の識別子として不適切なので font_size に変更した．本当は Python で対応するべきだけれども，面倒だったので．

• SVG の DOM 木の構成は簡単だったけれども，最初，SVG が表示されなくて慌てた．いろいろ調べたところ，XML の名前空間というものがあって，HTML と SVG では名前空間が異なるらしい．細かいことはわからないけれども createElementNS('http://www.w3.org/2000/svg', SVGタグ名) を使わないといけないらしい．

cloud.ts

import {HTMLBox, HTMLBoxView} from "models/layouts/html_box"

//import {div, span} from "core/dom"
import * as p from "core/properties"

/*
   <svg xmlns:ns0="http://www.w3.org/2000/svg" height="600" width="800">
     <style>text{ font-family:'Ricty Diminished'; font-weight:bold; font-style:normal; }</style>
     <text font-size="251"
           style="fill:rgb(192, 223, 37)"
           transform="translate(197,540) rotate(-90)">
       青学</text>
   </svg>
 */

export class CloudView extends HTMLBoxView {
  model: Cloud

  render(): void {
    super.render()
    const m = this.model
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('xmlns:ns0', 'http://www.w3.org/2000/svg');
    svg.setAttribute('height', '600');
    svg.setAttribute('width', '800');
    this.el.appendChild(svg);

    const style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
    style.innerHTML = "text{ font-family:'Ricty Diminished'; font-weight:bold; font-style:normal; }";
    svg.appendChild(style);
    for (let i in m.word) {
      let text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      text.innerHTML = m.word[i];
      text.setAttribute('font-size', `${m.font_size[i]}`);
      text.setAttribute('style', `fill:rgb(${m.R[i]}, ${m.G[i]}, ${m.B[i]})`);
      text.setAttribute('transform', `translate(${m.x[i]}, ${m.y[i]})`);
      svg.appendChild(text);
    }
  }
}

export namespace Cloud {
  export type Attrs = p.AttrsOf<Props>
  export type Props = HTMLBox.Props & {
    word: p.Property<string[]>
    font_size: p.Property<number[]>
    R: p.Property<number[]>
    G: p.Property<number[]>
    B: p.Property<number[]>
    x: p.Property<number[]>
    y: p.Property<number[]>
  }
}

export interface Cloud extends Cloud.Attrs {}

export class Cloud extends HTMLBox {
  properties: Cloud.Props

  static init_Cloud(): void {
    this.prototype.default_view = CloudView
    this.define<Cloud.Props>({
      word: [p.Array, []],
      font_size: [p.Array, []],
      R: [p.Array, []],
      G: [p.Array, []],
      B: [p.Array, []],
      x: [p.Array, []],
      y: [p.Array, []],
    })
  }
}

main.py

import re

import pandas as pd

rx_style = re.compile(r'fill:rgb\((.*)\)')
rx_transform = re.compile(r'translate\((.*)\)')
def conv_style(s): return [int(n) for n in rx_style.sub(r'\1', s).split(', ')]
def conv_transform(s): return [int(n) for n in rx_transform.sub(r'\1', s).split(',')]

converters = dict(
    style=conv_style,
    transform=conv_transform,
)

df = pd.read_csv('topic0_1_svg.csv', sep='\t', converters=converters)
df['R'] = df['style'].map(lambda x: x[0])
df['G'] = df['style'].map(lambda x: x[1])
df['B'] = df['style'].map(lambda x: x[2])
df['x'] = df['transform'].map(lambda x: x[0])
df['y'] = df['transform'].map(lambda x: x[1])

FIELDS = 'word,font_size,R,G,B,x,y'.split(',')
df = df[FIELDS]

columns = dict(zip(FIELDS, [list(df[f]) for f in FIELDS]))


from bokeh.core.properties import Int, String, List
from bokeh.layouts import column
from bokeh.models.layouts import Column, HTMLBox
from bokeh.io import show

class Cloud(HTMLBox):
    __implementation__ = 'cloud.ts'
    word = List(String)
    font_size = List(Int)
    R = List(Int)
    G = List(Int)
    B = List(Int)
    x = List(Int)
    y = List(Int)

show(column(Cloud(**columns)))

topic0_1_svg.csv

word	font_size	style	transform
意外	4	fill:rgb(36, 170, 131)	translate(575,164)
相当	4	fill:rgb(40, 124, 142)	translate(722,480)
大学生	4	fill:rgb(178, 221, 45)	translate(232,582)
赤崎	4	fill:rgb(112, 207, 87)	translate(188,575)
半澤	4	fill:rgb(253, 231, 37)	translate(558,569)
順位予想	4	fill:rgb(213, 226, 26)	translate(573,544)
競走	4	fill:rgb(64, 70, 136)	translate(752,590)
展望	4	fill:rgb(55, 184, 120)	translate(82,38)
調べ	5	fill:rgb(42, 119, 142)	translate(418,92)
マガ	5	fill:rgb(71, 46, 124)	translate(270,517)
キャラ	5	fill:rgb(31, 159, 136)	translate(321,246)
声優	5	fill:rgb(173, 220, 48)	translate(17,232)
芦ノ湖	5	fill:rgb(37, 131, 142)	translate(231,546)
前回	5	fill:rgb(38, 173, 129)	translate(702,59)
好き	5	fill:rgb(56, 88, 140)	translate(320,585)
回数	5	fill:rgb(246, 230, 32)	translate(330,198)
ゲスト	5	fill:rgb(244, 230, 30)	translate(757,162)
本命	5	fill:rgb(70, 52, 128)	translate(92,432)
記者	5	fill:rgb(32, 163, 134)	translate(4,171)
神奈川	5	fill:rgb(181, 222, 43)	translate(317,212)
山下	5	fill:rgb(34, 168, 132)	translate(316,173)
体罰	5	fill:rgb(63, 71, 136)	translate(565,517)
速報	5	fill:rgb(39, 126, 142)	translate(188,505)
山の神	5	fill:rgb(71, 47, 125)	translate(326,96)
限定	5	fill:rgb(72, 27, 109)	translate(717,496)
チェック	5	fill:rgb(76, 194, 108)	translate(2,346)
正月	5	fill:rgb(55, 184, 120)	translate(571,260)
企画	5	fill:rgb(92, 200, 99)	translate(611,324)
ドラマ	5	fill:rgb(229, 228, 25)	translate(394,332)
最高	5	fill:rgb(47, 180, 124)	translate(140,307)
後輩	5	fill:rgb(69, 55, 129)	translate(525,38)
1月3日	5	fill:rgb(72, 35, 116)	translate(315,82)
主将	5	fill:rgb(34, 167, 133)	translate(272,301)
争い	5	fill:rgb(72, 37, 118)	translate(215,288)
令和	5	fill:rgb(103, 204, 92)	translate(126,511)
ガチ	5	fill:rgb(122, 209, 81)	translate(606,467)
山登り	5	fill:rgb(31, 161, 136)	translate(541,259)
大事	5	fill:rgb(62, 73, 137)	translate(167,68)
遠藤	5	fill:rgb(70, 7, 90)	translate(4,333)
9区	5	fill:rgb(46, 110, 142)	translate(221,552)
4年生	5	fill:rgb(149, 216, 64)	translate(534,506)
場所	5	fill:rgb(124, 210, 80)	translate(174,513)
オーダー	5	fill:rgb(60, 79, 138)	translate(670,525)
中学	5	fill:rgb(72, 23, 105)	translate(280,417)
チャンス	5	fill:rgb(72, 37, 118)	translate(53,321)
小野寺	5	fill:rgb(72, 40, 120)	translate(691,571)
時代	5	fill:rgb(72, 27, 109)	translate(272,410)
岸本	5	fill:rgb(37, 171, 130)	translate(539,35)
塩澤	5	fill:rgb(39, 128, 142)	translate(253,475)
戸塚	5	fill:rgb(67, 62, 133)	translate(6,17)
詳細	5	fill:rgb(71, 47, 125)	translate(309,198)
1時間	5	fill:rgb(31, 161, 135)	translate(775,118)
圭太	5	fill:rgb(213, 226, 26)	translate(56,311)
OB	5	fill:rgb(62, 74, 137)	translate(174,521)
インスタ	5	fill:rgb(55, 184, 120)	translate(686,455)
池田	5	fill:rgb(72, 40, 120)	translate(397,141)
勝負	5	fill:rgb(61, 78, 138)	translate(522,545)
藤木	5	fill:rgb(241, 229, 29)	translate(589,468)
付近	5	fill:rgb(241, 229, 29)	translate(375,498)
地点	5	fill:rgb(38, 130, 142)	translate(707,240)
届け	5	fill:rgb(144, 215, 67)	translate(290,428)
東京	5	fill:rgb(197, 224, 33)	translate(504,336)
エース	6	fill:rgb(200, 224, 32)	translate(779,175)
ゴール	6	fill:rgb(35, 136, 142)	translate(72,231)
担当	6	fill:rgb(66, 63, 133)	translate(569,175)
総合	6	fill:rgb(42, 119, 142)	translate(264,132)
浦野	6	fill:rgb(162, 218, 55)	translate(395,295)
10区	6	fill:rgb(42, 119, 142)	translate(574,595)
2日	6	fill:rgb(66, 63, 133)	translate(425,88)
混戦	6	fill:rgb(53, 94, 141)	translate(183,596)
目標	6	fill:rgb(71, 17, 100)	translate(326,184)
現地	6	fill:rgb(32, 146, 140)	translate(182,306)
鶴見	6	fill:rgb(40, 125, 142)	translate(153,517)
1日	6	fill:rgb(63, 72, 137)	translate(378,349)
日体	6	fill:rgb(63, 188, 115)	translate(4,422)
気持ち	6	fill:rgb(41, 123, 142)	translate(172,366)
個人的	6	fill:rgb(31, 161, 136)	translate(702,425)
リツイート	6	fill:rgb(42, 120, 142)	translate(354,326)
ブログ	6	fill:rgb(192, 223, 37)	translate(699,438)
神大	6	fill:rgb(60, 80, 139)	translate(251,431)
通過	6	fill:rgb(69, 56, 130)	translate(36,597)
阿部	6	fill:rgb(59, 82, 139)	translate(778,412)
競技	6	fill:rgb(34, 140, 141)	translate(2,432)
開始	6	fill:rgb(42, 176, 127)	translate(319,380)
練習	6	fill:rgb(70, 11, 94)	translate(442,588)
全員	6	fill:rgb(246, 230, 32)	translate(7,34)
ニュース	6	fill:rgb(42, 119, 142)	translate(348,319)
戦略	6	fill:rgb(144, 215, 67)	translate(593,264)
東京箱根間往復大学駅伝競走	6	fill:rgb(88, 199, 101)	translate(562,87)
小林	6	fill:rgb(244, 230, 30)	translate(260,413)
湯原	6	fill:rgb(122, 209, 81)	translate(4,322)
優勝候補	6	fill:rgb(213, 226, 26)	translate(471,585)
6区	6	fill:rgb(58, 84, 140)	translate(617,270)
最終	6	fill:rgb(42, 176, 127)	translate(187,521)
是非	6	fill:rgb(69, 53, 129)	translate(584,239)
コース	7	fill:rgb(70, 50, 126)	translate(385,204)
準備	7	fill:rgb(51, 98, 141)	translate(599,279)
想い	7	fill:rgb(58, 186, 118)	translate(114,62)
見どころ	7	fill:rgb(72, 38, 119)	translate(458,82)
中央学院	7	fill:rgb(31, 161, 135)	translate(84,467)
予定	7	fill:rgb(70, 7, 90)	translate(284,44)
7時	7	fill:rgb(72, 36, 117)	translate(760,155)
8区	7	fill:rgb(248, 230, 33)	translate(222,542)
例年	7	fill:rgb(78, 195, 107)	translate(94,561)
田母神	7	fill:rgb(72, 28, 110)	translate(774,495)
紹介	7	fill:rgb(181, 222, 43)	translate(570,270)
ファン	7	fill:rgb(108, 205, 90)	translate(6,187)
井川	7	fill:rgb(170, 220, 50)	translate(441,175)
日体大	7	fill:rgb(35, 137, 142)	translate(319,143)
日本テレビ	7	fill:rgb(36, 135, 142)	translate(18,323)
長距離	7	fill:rgb(70, 7, 90)	translate(721,163)
アメブロ	7	fill:rgb(41, 123, 142)	translate(629,435)
スポーツ	7	fill:rgb(49, 102, 142)	translate(428,184)
あけましておめでとうございます	7	fill:rgb(63, 188, 115)	translate(308,596)
記事	7	fill:rgb(36, 134, 142)	translate(357,338)
実況	8	fill:rgb(229, 228, 25)	translate(250,208)
名取	8	fill:rgb(32, 146, 140)	translate(339,413)
中谷	8	fill:rgb(63, 71, 136)	translate(533,12)
全力	8	fill:rgb(44, 115, 142)	translate(187,252)
最初	9	fill:rgb(44, 177, 126)	translate(244,144)
情報	9	fill:rgb(239, 229, 28)	translate(352,455)
上位	9	fill:rgb(223, 227, 24)	translate(469,261)
テレビ	9	fill:rgb(52, 97, 141)	translate(608,449)
沿道	9	fill:rgb(41, 121, 142)	translate(665,581)
最後	9	fill:rgb(54, 92, 141)	translate(202,306)
中央	9	fill:rgb(38, 129, 142)	translate(202,526)
2020年	9	fill:rgb(72, 24, 106)	translate(14,313)
国士舘	9	fill:rgb(147, 215, 65)	translate(382,314)
日大	9	fill:rgb(59, 187, 117)	translate(190,240)
吉田	9	fill:rgb(69, 56, 130)	translate(384,456)
太田	9	fill:rgb(71, 46, 124)	translate(615,480)
ヴィンセント	9	fill:rgb(44, 177, 126)	translate(490,297)
写真	9	fill:rgb(68, 191, 112)	translate(323,120)
更新	9	fill:rgb(99, 203, 95)	translate(183,223)
ポイント	10	fill:rgb(70, 51, 127)	translate(270,282)
解説	10	fill:rgb(72, 28, 110)	translate(679,501)
予選会	10	fill:rgb(55, 184, 120)	translate(56,516)
田澤	10	fill:rgb(35, 136, 142)	translate(621,494)
3区	10	fill:rgb(244, 230, 30)	translate(706,257)
期待	10	fill:rgb(37, 133, 142)	translate(6,84)
お正月	10	fill:rgb(53, 183, 121)	translate(357,422)
メンバー	10	fill:rgb(52, 182, 121)	translate(447,551)
2日間	10	fill:rgb(84, 197, 104)	translate(88,576)
大会	10	fill:rgb(70, 52, 128)	translate(283,26)
総合優勝	10	fill:rgb(46, 109, 142)	translate(2,515)
明けましておめでとうございます	11	fill:rgb(186, 222, 40)	translate(114,90)
番組	14	fill:rgb(49, 104, 142)	translate(246,180)
レース	14	fill:rgb(70, 10, 93)	translate(38,88)
ニューイヤー駅伝	14	fill:rgb(72, 37, 118)	translate(677,550)
鈴木	14	fill:rgb(68, 58, 131)	translate(645,513)
7区	14	fill:rgb(70, 192, 111)	translate(683,566)
1月2日	15	fill:rgb(67, 61, 132)	translate(365,124)
拓殖	15	fill:rgb(94, 201, 98)	translate(572,105)
皆さん	15	fill:rgb(32, 164, 134)	translate(753,98)
中継	15	fill:rgb(35, 138, 141)	translate(80,459)
4区	15	fill:rgb(64, 189, 114)	translate(587,185)
創価	15	fill:rgb(69, 53, 129)	translate(88,520)
中大	16	fill:rgb(35, 138, 141)	translate(573,132)
3日	16	fill:rgb(41, 175, 127)	translate(551,288)
大手町	16	fill:rgb(84, 197, 104)	translate(387,174)
母校	16	fill:rgb(253, 231, 37)	translate(166,175)
自分	16	fill:rgb(72, 23, 105)	translate(176,139)
よろしくお願いします	17	fill:rgb(57, 85, 140)	translate(614,345)
5区	27	fill:rgb(35, 169, 131)	translate(36,38)
日テレ	27	fill:rgb(48, 105, 142)	translate(410,537)
ランナー	28	fill:rgb(40, 124, 142)	translate(280,306)
お願い	31	fill:rgb(37, 172, 130)	translate(23,503)
HP	31	fill:rgb(72, 41, 121)	translate(174,204)
補欠	31	fill:rgb(30, 155, 138)	translate(384,242)
チーム	31	fill:rgb(72, 26, 108)	translate(16,24)
走り	31	fill:rgb(62, 74, 137)	translate(425,578)
出場	31	fill:rgb(64, 69, 136)	translate(315,370)
法政	32	fill:rgb(61, 188, 116)	translate(200,123)
帝京	32	fill:rgb(31, 151, 139)	translate(13,477)
注目	32	fill:rgb(39, 128, 142)	translate(336,402)
1区	32	fill:rgb(61, 77, 138)	translate(178,568)
筑波	34	fill:rgb(251, 231, 35)	translate(722,583)
明治	35	fill:rgb(76, 194, 108)	translate(342,104)
國學院	35	fill:rgb(39, 173, 129)	translate(24,358)
東京国際	36	fill:rgb(63, 72, 137)	translate(471,73)
順天堂	36	fill:rgb(45, 112, 142)	translate(2,72)
観戦	38	fill:rgb(72, 29, 111)	translate(17,441)
2区	38	fill:rgb(173, 220, 48)	translate(529,250)
スタート	38	fill:rgb(92, 200, 99)	translate(202,279)
シード	40	fill:rgb(72, 22, 104)	translate(478,38)
早稲田	41	fill:rgb(103, 204, 92)	translate(4,401)
96回	42	fill:rgb(105, 205, 91)	translate(693,533)
エントリー	43	fill:rgb(32, 146, 140)	translate(356,285)
楽しみ	62	fill:rgb(72, 23, 105)	translate(17,301)
大学	80	fill:rgb(41, 175, 127)	translate(638,488)
優勝	82	fill:rgb(39, 128, 142)	translate(621,413)
駒澤	82	fill:rgb(30, 157, 137)	translate(631,324)
変更	85	fill:rgb(152, 216, 62)	translate(15,586)
箱根	89	fill:rgb(71, 16, 99)	translate(242,583)
東洋	90	fill:rgb(31, 152, 139)	translate(298,70)
東海	91	fill:rgb(53, 95, 141)	translate(616,71)
予想	92	fill:rgb(92, 200, 99)	translate(107,70)
往路	94	fill:rgb(70, 51, 127)	translate(490,582)
青山学院	199	fill:rgb(72, 33, 115)	translate(2,237)
応援	265	fill:rgb(78, 195, 107)	translate(113,491)