Kuroyagi飼育日誌

学んだことの備忘録

Python + D3.jsを利用したwebでのグラフ描画【その1】

PythonRubyか…



最近RubyPythonもさわり始めましたが、どっちもやるのは非効率的なのでまずはどちらかに絞らなければ!ということでちょっと触ってみた感じでPythonにします!笑



そうと決まればいろいろと真似して学習していきます。



直近で主にやることは以下を考えています。



(1)グラフ閲覧できるwebサイトの作成
(2)装置から送られてきた値をグラフ描画する



ということで、早速(1)からやっていきます。



Pythonでもグラフ描画出来るのになぜD3.jsを使うのか?そのあたりのことについては【記事1】に大変参考になることが書いてありました。



【記事1】
qiita.com



ふむふむ、インタラクション(覚えたての言葉を使いたい)が特徴なのですね。



同記事内に例が書いてあるので、これをやっていきます。



D3.jsの利用について、CDNでスクリプトが実行される度にwebから読み込む方法を他の記事などではよく見かけるのですが、webにつながっていないスタンドアロンの状態も想定して先にダウンロードしておく方法に倣います。インストールについて【記事1】では適切なところに保存!と書いてあり、わからないので調べます。



【記事2】
dackdive.hateblo.jp



【記事3】
UbuntuにGitをインストールする



【記事4】
mag.osdn.jp



なるほどーいろいろ見てみましたが、とりあえず【記事5】のModifyingに書いてある方法の通りやってみます。



【記事5】
github.com



お!作っておいたTestディレクトリにd3フォルダが出来ました!


pip-selfcheck.json  lib  include  home  graph_test.py  d3  bin

一歩進みました。それではD3.jsを使っていきます。



【記事1】ではhtmlファイルの中でローカルにあるd3を読み込み、d3.csvメソッドでcsvデータを読み込んでいます。ということで、Testディレクトリにindex.htmlファイルを作ります。また、同じディレクトリにdata.csvというファイルも作っておきます。



d3.csvを使いますと書いてあるのですがよくわかりません。とりあえずD3.jsファイルを同ディレクトリ内に作ってd3.csvソースコードを書き込んでみます。



とりあえずファイルは揃ったので、サーバーを立ち上げてみましょう。Rubyではサーバーを立ち上げたことがありますが、そういえばpythonではやったことがなかったので【記事6】を参考に実行します。



【記事6】
qiita.com



f:id:cocosuzu:20170402170606p:plain



あれ?何も表示されません…。見出ししか表示されていないです。


サーバーのログを見てみましょう。


127.0.0.1 - - [02/Apr/2017 17:02:55] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [02/Apr/2017 17:02:55] code 404, message File not found
127.0.0.1 - - [02/Apr/2017 17:02:55] "GET /d3/d3.min.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Apr/2017 17:02:55] code 404, message File not found
127.0.0.1 - - [02/Apr/2017 17:02:55] "GET /js/d3js.my.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Apr/2017 17:02:55] code 404, message File not found
127.0.0.1 - - [02/Apr/2017 17:02:55] "GET /favicon.ico HTTP/1.1" 404 -

d3のライブラリが読み込めていないのでしょうか。faviconは放置です(笑)



試しにローカルのd3をロードしているところをCDNによるロードにして実行してみます。


127.0.0.1 - - [02/Apr/2017 17:18:32] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [02/Apr/2017 17:18:32] code 404, message File not found
127.0.0.1 - - [02/Apr/2017 17:18:32] "GET /favicon.ico HTTP/1.1" 404 -

エラーは消えましたが、実行結果は変わりません。前に学んだキャッシュの問題かと考え、ひとまずhttpサーバーのポートを8000から8001に変更してサーバーを立ち上げましたが、結果は変わらず。



ということはディレクトリの問題か、データの問題あたりでしょうか。



よくよ見てみると、index.htmlではbodyでresultを呼び出しています。そのresultを作り出しているのはその後のscriptで呼び出している部分でしょうか。



ディレクトリがjs/d3js.my.jsとなっているので、試しにjsフォルダを作り、その中にd3.csvについて書いたd3js.my.jsファイルを作ります。また、d3.csvは./data.csvで呼び出されているので、jsフォルダに置いてみます。



これで実行してみると…



結果は変わりませんでした。



がらっと切り替えて、【記事7】、【記事8】でもやってみます。



【記事7】
D3.js 事始め(1)まずはサンプルコードをコピペしてブラウザで開いてみる - Qiita




【記事8】
qiita.com



このあたりは出来ました。出来るということはやはり、d3.jsの読み込みあたりが問題でしょう。



先に作ったd3フォルダを見てみるとd3.jsファイルはありません。index.jsの中にd3.jsについての表記があるのですがどう使っていいことやら。



d3フォルダ内のreadmeを見てみるとnmpでインストール出来るよと書いてあるので試してみます。



先ずはnmpをインストール


sudo apt-get install npm

続いて仮想環境で


npm install d3


っと,するとERRです。

npm ERR! Linux 4.4.0-71-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "test"
npm ERR! node v4.2.6
npm ERR! npm  v3.5.2
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! d3@4.7.4 pretest: `rimraf build && mkdir build && json2module package.json > build/package.js && node rollup.node`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the d3@4.7.4 pretest script 'rimraf build && mkdir build && json2module package.json > build/package.js && node rollup.node'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the d3 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     rimraf build && mkdir build && json2module package.json > build/package.js && node rollup.node
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs d3
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls d3
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/****/Documents/Test/d3/npm-debug.log

npm ERR! addLocal Could not install /home/*****/Documents/Test/d3
npm ERR! Linux 4.4.0-71-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install" "d3"
npm ERR! node v4.2.6
npm ERR! npm  v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! d3@4.7.4 prepublish: `npm run test && rollup -c --banner "$(preamble)" -f umd -n d3 -o build/d3.js -- index.js && uglifyjs --preamble "$(preamble)" build/d3.js -c negate_iife=false -m -o build/d3.min.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the d3@4.7.4 prepublish script 'npm run test && rollup -c --banner "$(preamble)" -f umd -n d3 -o build/d3.js -- index.js && uglifyjs --preamble "$(preamble)" build/d3.js -c negate_iife=false -m -o build/d3.min.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the d3 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run test && rollup -c --banner "$(preamble)" -f umd -n d3 -o build/d3.js -- index.js && uglifyjs --preamble "$(preamble)" build/d3.js -c negate_iife=false -m -o build/d3.min.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs d3
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls d3
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/****/Documents/Test/npm-debug.log

段々と迷走してきました!ここで仕切り直し!



CDNではD3を使えるので、欲張らずにCDNで進めていきます。



他の理解が進んで行けば自ずとこのあたりの問題は解けると思います。



ということで目的の再確認をします。



目的はD3.jsを使ったweb上でのグラフ描画です。D3.jsはCDNで利用する。



続きは後日やります。