どうも、まさとらん（@0310lan）です！ 今回は、URLだけで多種多様なチャートやグラフを生成できる無料のWebサービスをご紹介します！ 棒グラフ・折れ線グラフ・レーダーチャート・バブルチャート…など、さまざまな種類を生成できるだけでなく、細かいスタイリングやサイズ・レイアウトまでURLに追記するだけで調整可能なのが特徴です。 手っ取り早くデータの可視化をしたい人も含めて、ご興味ある方はぜひ参考にしてみてください！ 【 Image-Charts 】 ■「Image-Charts」の使い方 それでは、「Image-Charts」をどのように使えばいいのか詳しく見ていきましょう！ まず最初に「Image-Charts」を使うためのユーザー登録やAPIキーの設定などは一切不要です（フリープランの場合） 覚えておく必要があるのは次のURLのみです！ https://image-charts.c

Facebook AI Researchが開発してきたリアルタイムにデータをグラフ化する「Visdom」が、Open Source Initiative傘下のFOSSASIAに寄贈され、オープンソースとして公開されたことが発表されました。 Visdomは上の画面例のように、データをさまざまなグラフとして表示し、ダッシュボード化して見せることができるソフトウェアです。 下の画面のように、ライブデータをリアルタイムにグラフ化可能です。

どうも、まさとらん（@0310lan）です！ 今回は、テキストデータを編集するだけでリッチな「ガントチャート」や複雑なダイアグラムを素早く作成できる無料のWebサービスをご紹介します。 複雑な操作方法は一切不要で、単なるテキストを入力していくだけで自分が欲しいチャートやダイアグラムを手軽に生成できるのが大きな特徴です。 ガントチャート以外にも、フローチャート・クラス図・ジャーニーマップ・円グラフ…など、多彩なフォーマットに対応しているのでぜひ参考にしてみてください！ 【 Quick Diagram 】 ■「Quick Diagram」の使い方 それでは、「Quick Diagram」をどのように使えばいいのか詳しく見ていきましょう。 まずはトップページにあるボタンをクリックして無料のユーザー登録を済ませておきます。 Googleアカウントから手軽に登録できますが、今回はメールアドレスを利用

import asciichartpy from math import cos from math import pi import random # 追記 2020/09/14 ご指摘ありがとうございました if __name__ == '__main__': width = 120 config = { 'colors': [ asciichartpy.green, asciichartpy.magenta, asciichartpy.red ] } print(asciichartpy.plot( series=[[random.randint(1, 15) * cos(i * ((pi * 4) / width)) for i in range(width)], [random.randint(1, 15) * cos(i * ((pi * 2) / width)) for i

A guest post by Rising Odegua, Independent Researcher; Stephen Oni, Data Science Nigeria Danfo.js is an open-source JavaScript library that provides high-performance, intuitive, and easy-to-use data structures for manipulating and processing structured data. Danfo.js is heavily inspired by the Python Pandas library and provides a similar interface/API. This means that users familiar with the Panda

手書きスタイルのグラフやチャートを簡単に作成できるJavaScriptライブラリを紹介します。手書きの度合いも調整でき、ちょとラフな感じ、雑な感じ、かなり雑な感じ、ぐちゃぐちゃな感じにもできます。 グラフやチャートに使用するデータは外部.csvファイルにも、カンマ区切りのテキストデータにも対応しています。 roughViz.js -GitHub roughViz.jsの特徴 roughViz.jsのデモ roughViz.jsの使い方 roughViz.jsの特徴 roughViz.jsは、ブラウザで手書きスタイルのグラフやチャートを作成するためのJavaScriptライブラリです。D3.jsとrough.jsをベースにしており、MITライセンスで利用できます。 グラフやチャートは、現在7種類に対応しています。 棒グラフ（垂直） 棒グラフ（水平） ドーナツ 折れ線グラフ 円グラフ 散布図

いろんなグラフがかける Google Chart Tools の使い方について書いてみました。 Google Chart Tools の使い方 (今回) 表とデータの扱い 棒グラフ (積み上げ棒グラフ) 散布図 折れ線グラフ、面積グラフ 円グラフ、計器図 組織図 グラフの合成 動的なグラフの変更 グラフと表の連携 フィルタリング(Dashboard と Control) データロールによる特異点の表示と注釈付きタイムライン スプレッドシート(表計算)で作成したグラフの公開 今回は Google Chart Tools の紹介と基本的な使い方の説明です。 Google Chart Tools とは グラフの種類 ライセンス 使い方 オプション Google Chart Tools とは Google Chart Tools は SVG を使ったグラフを表示するツールで、 JavaScript

遭遇した現象 Ubuntu14.04上でpyenvを使ってPython3.4.2をインストールし、matplotlibをpipで導入したが、pyplotなどでshow()を実行してもグラフ表示がされなかった 原因 pyenvで3.4.2をインストールした際に、pythonからtkを利用するためのTkinterがインストールされていなかったため。python本体をインストールした後にTkinterをインストールしてもビルド時に参照されないため、先にTkinterをインストールしておく必要がある模様。 対処 もしかしたら、後でインストールしてもうまくいく方法があるのかもしれないけど、とりあえずうまく行ったのは以下。 いったんpyenvで3.4.2をアンインストール

さまざまなデータを最小限の記述でビジュアル化し、アニメーションで表示する高性能なJavaScriptライブラリを紹介します。 メーターやファンやコントローラーなど、デザインがレトロなのも面白いですね。 Zeu.js -GitHub 上記は静止画ですが、もちろんアニメーションで動きます。 デモのカラーは派手ですが、オプションで簡単に変更できます。 My Command Center Zeu.jsはCanavasベースで、外部ファイルと空のcanvas要素を用意し、あとはタイプとデータを定義するだけで実装できます。 <!-- 外部ファイル --> <script src="zeu.min.js"></script> <!-- 空のcanvas要素 --> <canvas id="text-meter" width="200" height="100"></canvas> <script> //

こんな風にスライダーをぐりぐりと動かすとそれに応じて表示が変わるグラフをchart.jsを使って作っていく。 ここでは$f(x)=ax^2+bx+c$という関数をプロットすることにする。パラメータとして$a$,$b$,$c$の３つがあるが、それらをスライダーでぐりぐりと動かす。 デモはこちら chart.jsとは？ ここではグラフの描画にchart.jsを使う。 chart.jsとはグラフをブラウザ上で表示するためのJSのライブラリの一つ。 グラフを作るためのライブラリといえばd3.jsが有名だが、より簡単にグラフを書くことに特化したライブラリ。プロットを作るだけなら本当に簡単に書くことができる。 chart.js入門 の記事が参考になる。 またオフィシャルページのサンプル集を見れば、だいたいどんなグラフを作ることができるかわかる。 作成方法 まずはhtmlにスライダーを入れる。 <div

今回は matplotlib を使って動的にグラフを生成する方法について。 ここでいう動的というのは、データを逐次的に作って、それを随時グラフに反映していくという意味を指す。 例えば機械学習のモデルを学習させるときに、その過程 (損失の減り方とか) を眺める用途で便利だと思う。 使った環境は次の通り。 $ sw_vers ProductName: Mac OS X ProductVersion: 10.13.5 BuildVersion: 17F77 $ python -V Python 3.6.5 $ pip list --format=columns | egrep -i "(matplotlib|pillow)" matplotlib 2.2.2 Pillow 5.2.0 もくじ もくじ 下準備 静的にグラフを生成する 動的にグラフを生成する グラフを延々と描画し続ける Jupyte

どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単にクオリティの高いデータの可視化（データビジュアライゼーション）を実現することができる無料サービスのご紹介です！ アニメーションも自動生成されるうえ、ネット上に公開したり自分のブログやサイトに挿入することも簡単にできます。 また、上級者向けにJavaScriptを活用した独自テンプレートの作成機能が用意されているなど、自由度の高いサービスなのでご興味ある方はぜひトライしてみてください！ 【 Flourish 】 ■「Flourish」の使い方 それでは、実際に「Flourish」を触りながら、どのように始めたらいいのかを見ていきましょう！ まずは、サイトのトップページにある「Sign up」から無料のユーザー登録をしておきます。 メールアドレス、パスワード、ユーザー名を入力すればすぐに登録は完了します！ すると、自分専用の「マ

この記事について IoTっぽいことをやりたくて表示画面の方から作ってみました。 リアルタイム表示が可能なJavascriptのグラフ表示ライブラリを色々物色した結果、Epoch.jsが一番使いやすいという結論になりました。サンプルコードを書きつつEpoch.jsの使い方等についてまとめてみました。 サンプルコード See the Pen GQpbRR by okoppe8 (@okoppe8) on CodePen. スライダーの部分はIoT機器のPostのシミュレータです。 Epoch.js とは 公式：https://epochjs.github.io/epoch/ Epoch.jsは様々なグラフを生成するJavascriptライブラリです。同様の目的のメジャーなライブラリにChart.js、highchart.js、Google Chart Tools などがあります。 Epoch.

データ分析における関数の使い方については様々な記事が上がっています。関数を知らなかったり使い方が分からないときは調べればだいたい答えが見つかります。 一方で、実際に分析を始めようとすると、たとえ関数の使い方がわかっていても、データをどのような切り口から何を分析・可視化していけば良いのか困ってしまうことがよくあります。 この記事では、あんちべさんが書いたデータ解析の実務プロセス入門という本をベースに、どのようなデータから何を見たいときにどのような可視化手法を使えばよいのかを、具体例を交えながら整理していきます。 探索的データ解析とは データ解析のアプローチは、大きく分けて仮説をデータで検証する「仮説検証型」とデータから仮説を生み出す「探索型」に分けられます。 実際にデータ解析を行うときは、仮説検証型と探索型を行き来しつつ知見を見出していきます。 データ解析には検証すべき仮説を設定することが必

var label_array = [ 'ラベル1', 'ラベル2'. 'ラベル3ラベル33ラベル33ラベル33ラベル33ラベル3' ]; var stringLength = 0; label_array.forEach(function(value){ stringLength = value.length > stringLength ? value.length : stringLength ; }); var labelWidth = 200; var fontSize = labelWidth / stringLength; fontSize = fontSize > 16 ? 16 : fontSize; ... legend: { position: 'right', fullWidth:false, labels : { boxWidth : 20, fontSize :

概要 学習済みのword2vecモデルから、指定の単語に対して、その類似単語、さらに類似単語の類似単語を出力させ、各単語をノード、cos類似度をリンクの重みとしてd3.jsで力学グラフ化します。 t-sneなどで次元圧縮プロットする手法とはまた違った味があるかな、と思います。厳密さはあまりないので、ビジュアライゼーションの手法としては、解析向きというより説明向きの手法ですね。視覚化と言ったほうがいいかもしれません。 DOM/HTMLなのでカスタマイズが効きやすい点はメリットで、インタラクティブな感じに機能追加していくとウケが良さそうです。 出力例 「AI」を指定単語として、その類似単語(緑)と、類似単語の類似単語(灰)までを出力しています。別途収集した、幾つかの新聞社のWeb記事(2MB程度)で学習させたモデルを使用しています。 ノード間の適正距離をcos類似度から計算しており、適正距離よ

HTML5の表現力を活かすにはJavaScriptの活用が欠かせません。SVGやCanvasを使って図を描画することはできますが、JavaScriptを組み合わせることでよりインタラクティブにしたり、マウスイベントを使ったりできます。 今回紹介するのはbillboard.js、JavaScript製の再利用が容易なグラフライブラリです。 billboard.jsの使い方 グラフの一例です。 データをフィルタリングすると、他のデータが薄くなります。 折れ線グラフ。 タイムシリーズ。 曲線グラフ。 X軸の座標が異なるグラフ。 ステップグラフ。 エリアグラフ。 積み上げ型のエリアグラフ。 棒グラフ。 積み上げ型の棒グラフ。 散布図。 円グラフ。 ドーナッツグラフ。 ゲージグラフ。 複数のグラフの組み合わせ。 サブグラフ。 billboard.jsは表示に際してD3を使っています。そして、Java