内容
- 業務で機械学習をやっています
- テキストマイニングのビジュアル化を検討していて、CYTOSCAPE.JSにたどり着きました。
- 今後はREACT+GATSBY+CYTOSCAPE+FASTAPI+PYTORCHを使ったＭＬアプリを作っていきます
Cytoscape.JS
- WEB-APIでPYTHONでWORDCLOUDをSVGで返し、CYTOSCAPEにマッピングします
- cy.filter('node[id = "a"]').css() ---> ここでCSSプロパティを追加できます
index.html
<body>
<div id="cy" ></div>
<button id="btn">image add</button>
</body>
<script>
var myData = [
{ data: { id: "a", parent: "o" } }
];
var cy = window.cy = cytoscape({
container: document.getElementById("cy"),
elements: myData
});
// htmlのオブジェクトボタン
// document.getElementById("btn").addEventListener("click", function () {
// cy.filter('node[id = "a"]').css('background-image', 'image.svg')
// });
//こっちの方がスマート
cy.on('mouseover', 'node', function(evt){
var node = evt.target;
node.css('background-image', 'image.svg');
});
</script>
VIZ.JS
- nodesは、オブジェクトとして宣言必要
- shapeの定義が無いと、SVGが表示されない
- imageはdummyを張り付けている → 無いとエラーがでる
index.html
<script>
var nodes = new vis.DataSet([
{ id: 1, shape: "circularImage", image: "dummy.png" },
{ id: 2, shape: "circularImage", image: "dummy.png" },
]);
network = new vis.Network(container, data, options);
network.on("click", function(properties) {
nodes.update({ id: properties.nodes[0], image: 'image.svg' });
});
});
SVGをAPIで持ってくる場合
index.js
const params = {
id: 番号,
};
const query = new URLSearchParams(params);//GETのクエリを渡す
fetch(apiurl + "/wordcloud?" + query.toString())
.then((r) => r.text())
.then((data) => {
data = data
.replaceAll("\\", "") //apiからのレスポンス中のゴミ削除
.slice(1) //apiからのレスポンス中のゴミ削除
.slice(0, -1); //apiからのレスポンス中のゴミ削除
svg = "data:image/svg+xml;utf8," + encodeURIComponent(data);//SVGストリングで渡す
API設計
事前にTEXTはTFIDFベクトル化して、テーブルに入っている前提
python.py
def get_wordcloud(dics, cutoff=5)->WordCloud:
df = pd.DataFrame(list(dics.items()),columns=['word', 'tfidf'])
df = df.astype({'word': 'str', 'tfidf': 'float'})
df = df.sort_values(by='tfidf', ascending=False).head(cutoff)
dict_parse = dict(zip(df['word'], df['tfidf']))
if dict_parse:
wc = WordCloud(
width=800,
prefer_horizontal=1,
background_color='white',
include_numbers=True,
font_path='C:\Windows\Fonts\meiryo.ttc',
stopwords=STOPWORDS).generate_from_frequencies(dict_parse)
return wc.to_svg()#SVG文字列としてresponse-bodyに返す