Twitchストリーミンググラフ解析‐第2部
導入
このブログは、我々が構築しているアプリケーションの一部に応じて3つの部分に分かれています.
1 そしてこの投稿を読み続けます.さもなければ、既に実装されているbackend . この部分では、反応アプリケーションを作成し、一般的な可視化されます
Twitchデータセットからの統計といくつかの興味深い洞察あなたが見つけることができるブログのこの部分で言及されるすべての実装
the frontend プロジェクトのフォルダ.
反応アプリの作成
収集されたすべてのデータを視覚化する方法を理解しましょう.まず、我々のフラスコアプリケーションで動作する反応アプリを作成する必要があります.インストールNode.js これにより、
npx 反応アプリを作成するためのコマンド.プロジェクトルートフォルダに自分を置き、実行します.npm install -g [email protected]
npm init react-app frontend --use-npm
cd frontend
npm start
package.json フロントエンドフォルダから、ファイルの末尾に行を追加します."proxy": "http://localhost:5000" これは、バックポートが実装されているポート5000にそのポート3000で受信するすべての要求をリダイレクトするために反応アプリを教えてくれます.我々は、Webページを構築するためにセマンティックUIを使用しますので、反応アプリをDockerizingする前に、いくつかの詳細を行う必要があります.次のコマンドを実行します.npm uninstall semantic-ui semantic-ui-css
npm install @craco/craco @semantic-ui-react/craco-less semantic-ui-less --save-dev
package.json で{
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject"
}
}
craco.config.js フロントエンドフォルダで次のコンテンツをペーストします.module.exports = {
plugins: [{ plugin: require('@semantic-ui-react/craco-less') }],
}
semantic-ui/site フォルダ内のsrc 次にフォルダ全体をコピーするnode_modules/semantic-ui-less/_site folder 内容src/semantic-ui/site . また、theme.config ファイル名src/semantic-ui/ フォルダとしファイルをコピーする
node_modules/semantic-ui-less/theme.config.example to src/semantic-ui/theme.config .更新
theme.config ファイル:/*******************************
Folders
*******************************/
@themesFolder : 'themes';
@siteFolder : '../../src/semantic-ui/site';
@import (multiple) "~semantic-ui-less/theme.less";
@fontPath : '../../../themes/@{theme}/assets/fonts';
npm install semantic-ui-react --save-devこれで、意味のあるUIコンポーネントを使用できますButton (すべてのインポートをペーストすることを忘れないでください):import logo from "./logo.svg";
import "./App.css";
import "semantic-ui-less/semantic.less";
import { Button } from "semantic-ui-react";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<Button>Click me</Button>
</header>
</div>
);
}
export default App;
どのように反応アプリをDockerizeするには?
以前に作成したプロジェクトのいくつかの新しい行を追加する必要があります
docker-compose.ymlfile . ファイルの最後に追加します.react-app:
build: ./frontend
volumes:
- ./frontend:/app
- /app/node_modules
ports:
- "3000:3000"
depends_on:
- twitch-app
networks:
- app-tier
Dockerfile このようなフロントエンドフォルダでは# pull official base image
FROM node:14.17.5-alpine
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install [email protected] -g --silent
# add app
COPY . ./
# start app
CMD ["npm", "start"]
package.json コンテナに.すべての依存関係をインストールする最良の方法はコピーすることですpackage.json ファイルfrontend フォルダ.すべてのノードモジュールを正しくコンテナにインストールされてnpm start あなたの反応アプリを実行します.ノードモジュールのボリュームは、すべてのように追加されましたパッケージは、プロジェクトを構築するたびにインストールする必要はありません.
すべてを残すことを作成することです
.dockerignore ファイル名frontendディレクトリnode_modules
build
.dockerignore
Dockerfile
package.json プロキシの設定"proxy": "http://twitch-app:5000"ポート5000のドッキングサービスとしてのバックエンドtwitch-app (これはdocker-compose.yml そして、それはあなたがその変化をしなければならない理由です.プロジェクト構造は次のようになります.| docker-compose.yml
|
+---backend
| | app.py
| | models.py
| | twitch_data.py
| | requirements.txt
| | Dockerfile
| +---import-data
| | chatters.csv
| | moderators.csv
| | streamers.csv
| | teams.csv
| | vips.csv
|
+---frontend
| | .dockerignore
| | craco.config.js
| | Dockerfile
| | package.json
| | package-lock.json
| +---node_modules
| +---public
| +---src
|
+---memgraph
| | Dockerfile
| +---query_modules
| | twitch.py
| +---mg_log
| +---mg_lib
docker-compose build ルートプロジェクトフォルダからdocker-compose up その後.ファーストmemgraph-mage は実行されるtwitch-app . その後react-app が実行されます.今すぐあなたのフロントエンドからの要求を行うことができます.反応とD 3によるフロントエンド実装js
フォルダを作る
components あなたのsrcファイルで.ここでは、あなたのWebアプリケーションのパズルとして使用するコンポーネントを作成します.パズルの少しの部分を作りましょう、そして、フェッチ要求をすることによってノードとエッジカウンターをウェブページに加えましょう Counter.js . 以下のコードのように、親コンポーネントから転送された小道具に応じてリクエストをする必要があります. fetch() {
fetch("/" + this.props.count)
.then((res) => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
counter: result[this.props.count],
});
},
(error) => {
this.setState({
isLoaded: true,
error,
});
}
);
}
ゲームの統計情報については、バックエンドサーバーからトップゲームを取得する必要があります.
fetchData(number) {
fetch("/top-games/" + number)
.then((res) => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
games: result.games,
players: result.players,
});
},
(error) => {
this.setState({
isLoaded: true,
error,
});
}
);
this.setState({
numOfGames: number,
header: "Top " + number + " games",
});
}
あなたは同様の方法でトップチーム、VIP、モデレーターを取得することができます.Streamersの場合は、フォロワーやビューの数の数でそれらをランク付けすることができます.そのため、ドロップダウンメニューを作成します
ランキング.
もう少しでグラフの可視化について話しましょう.こちらでは
D3.js , データに基づく文書操作のためのJavaScriptライブラリあなたがグラフを使用して描画できるようにすべてを設定する必要がありますD3.js . フォルダを作るhooks インsrc フォルダと作成useD3.js ファイル(フックは通常、接頭辞"use "と命名されます.import React from "react";
import * as d3 from "d3";
export const useD3 = (renderGraph) => {
const ref = React.useRef();
React.useEffect(() => {
renderGraph(d3.select(ref.current));
return () => {};
});
return ref;
};
D3.js DOMと直接対話する.あなたは、利用できるuseRef and useEffect リンクするフックD3.js とsvg 作成した要素を指定します.D3.js関数を実行する.インポートを忘れないでくださいd3 . 今、カスタムフックを使用してグラフをレンダリングすることができますuseD3.js . チェックするGraph.js コンポーネントのグラフを描画する方法を参照してください.あなたの好きなストリーマーについての情報を得ることができるそのコンポーネントを使用して-そのチーム、ゲーム、および言語は、以下のイメージのように.
また、特定の言語でいくつかのゲームをプレイしているすべてのストリーマを検索することが可能です.使用
Graph.js コンポーネントを取得します.
お気軽にノードとその力を再生することによって周りをドラッグします.最後に、強力なチェックアウトMAGE クエリモジュール- PageRankとbetweenness中心部とはかなりクールな方法でデータを視覚化
D3.js . PageRankを計算するには、backend サーバーとフロントエンドでは、データが
PageRank.js コンポーネント.
fetchData(){
fetch("/page-rank")
.then((res) => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
nodes: result.page_rank,
});
},
(error) => {
this.setState({
isLoaded: true,
error,
});
}
);
}
GraphPR.js , どれがD3.js . グラフの横には、ストリームの名前とその計算されたランクの結果テーブルを見ることができます.
あなたは、可視化グラフの上にリフレッシュボタンを見ることができます.このチュートリアルのパート3では、カフカを使用してデータをストリームする方法を学びます.ユーザーBadBoyHaloの新しいチャットをストリームし、
彼のランクは、彼のネットワークのより多くのおしゃべりで改善します.PageRankのほかに、betweenness中心性を計算することができますし、下の画像として可視化します.
結論
そして今のところ!私はあなたがすべての権利を得たが、あなたが質問をしている場合、またはいくつかのフィードバックを与えたい場合は、無料でご参加くださいDiscord コミュニティサーバー.必ずフォローしてくださいlast part このブログのどこでどのようにカフカとあなたのストリーミングデータに取り組むために学ぶことができるとリアルタイムでMemgraphとそれを分析する.
Reference
この問題について(Twitchストリーミンググラフ解析‐第2部), 我々は、より多くの情報をここで見つけました https://dev.to/katelatte/twitch-streaming-graph-analysis-part-2-3d3dテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol