plotly (JS) お試し (続: Bar Chart と Pie Chart / + Donut Chart)

plotly (JS) お試し (Horizontal な Bar Chart と Pie Chart)plotly (JS) お試し (Horizontal な Bar Chart、のちょっとだけ続き)への追記にしようか迷ったが独立させちゃう。

plotly (JS) お試し (続: Bar Chart と Pie Chart / + Donut Chart)

最初のお試し時にやり残したこと

plotly (JS) お試し (Horizontal な Bar Chart と Pie Chart)の最後に書いたこと:

これだけなら別に Line Chart との手間の差はなし。けどね…、この2つを左右に並べた Subplots を作りたかったんですわ、ほんとは。これがうまくいってない。

あと Subplots が出来る出来ない以前の使い勝手の問題がいろいろあるよね。Pie Chart の方は、勝手に並べ替えないモードはないかなぁ、てのがあるし、Bar Chart の方は、Hover での表示だけでなく右側に表示しちゃうモードはないかしらね、とか。

あと Bar Chart、というよりは histgram、なわけだから、標準偏差やらの統計関数があって欲しいなぁと思ってるけどまだ調べてない。これはドキュメント斜め読みでそれっぽいのはあったから、きっと出来るんじゃないかなと期待はしている。

最初の subplot に関しては、plotly (JS) お試し (Scatterplot Matrix もどき)で個人的には出来たつもりにはなってる。

Bar Chart の方は、Hover での表示だけでなく右側に表示しちゃうモードはないかしら

「右側に」にこだわらず「テキストで表現する」ということとすれば、基本的には Bar Chart with Direct Labels そのものだが、ラベルの色を変えるのに苦労。この issue#34 から textfont の存在がわかりようやく。てことで:



なお、データは 気象庁の過去の気象データ・ダウンロードから持ってきた「本物の」データだけれど、「雲量ごと集計」はアタシが(matplotlib の助けを借りて)独自にやったものなので、信用し過ぎないように。(excel でさらっとみた感じでは大外しはしてなそうだけれど。)

標準偏差やらの統計関数…

探し回るも、「計算だけやってくれるもの」として公開はされてなさそう。ないということかな…。

ただ、boxplot にはこの機能、あるのだよねぇ…。上と同じ雲量のデータでやってみる:


boxmean: false でも出てる箱の中の線はこれは median (中央値)。あんまり見慣れない表現のような気がするが、慣れかもな。わかってしまえばわかりやすいよなこれ。

「可視化表現としてはヒストグラム、だけれども統計の要約値は出したい」というのは今のところ直接は出来なそうだけれど、まぁ色々工夫して使うしかなさそうだね。

Pie Chart の勝手に並べ替えないモード

「勝手に並べる」のが「悪だ」とは言ってない。多い順に並ぶのは自然だと思うし。けどそうでないほうがわかりやすい場合もあろう。

探すのずんげー苦労したがやっと この issue#2019 の中に見つけた。type: "pie" の場合は sort: false を与えることが出来る:


Donut Chart

正直なこと言っとくと…、ほんとは個人的に Pie Chart も Donut Chart もほとんど全然興味ないのよ。これってのは「どういうタイプの業種か」みたいなことに大きく影響されること。ワタシの場合はかなり自然科学系寄りのことをすることが多いので、WEB エンジニアが最も多く相手にする e-コマース系の顧客にとって最頻と思われる Pie Chart、Donut Chart はね、「ワタシは全然使わないし使う機会がない」のよ。

なんでこんなことをあえて言うかというと。たぶん plotly のデベロッパが、どうやらワタシと同じノリらしいのな。多分自然科学系に興味がある人たちなんじゃないかと思う。そもそもノリが matplotlib にすんげー似てるしね。

てわけで、plotly.js の Donut Chart はあんましイケてない。ドーナツるだけならまず「hole: 0.0~1.0」を付けるだけさ、簡単よ:


問題はここから。抜いた穴にさ、タイトルを埋め込みたいわけじゃないか。普通「そのためのドーナッツ」なんだから。けどこれは「Donut Chart に統合された機能」にはなくて、一般的な API の Text and Annotations を使って自分で描けやヲラなのよ。ひとまず失敗作てみれば何言いたいかわかるだろ?:


見ての通り位置決めに失敗している。というかあえて間違えてみせた。自動で穴の中に入れてくれるシカケがないからには、こうもなるわい。成功作、いる? わかるよね? annotations 内の x, y を頑張って調整するだけだよ。

というわけで plotly.js はあんまし Donut Chart に力入れてなくてちょい苦痛だけれど、まぁ出来ることは出来る、てことで頼む。