Skip to content

Instantly share code, notes, and snippets.

@wakita

wakita/Readme.md

Last active October 23, 2020 14:22
Show Gist options
  • Save wakita/3e7375ef40dd56682c257c2041112dd8 to your computer and use it in GitHub Desktop.
Save wakita/3e7375ef40dd56682c257c2041112dd8 to your computer and use it in GitHub Desktop.
Download ZIP
Word Cloud Widget
Raw
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タグ名) を使わないといけないらしい．

Raw
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, []],
})
}
}
Raw
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)))
Raw
topic0_1_svg.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 2 should actually have 1 column, instead of 4 in line 1.
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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment