VS Codeのイケメンすぎる分析&可視化ツールSand Danceの使い方


VS Codeの拡張機能「SandDance for VSCode」がイケメンすぎたのでご紹介◎

パワポ用にカッコイイグラフをパッと作るという用途には最強のツールです!!


目次

  1. SandDance for VSCodeで何ができるのか
  2. 使用方法
    1. インストール
    2. グラフの表示
    3. データの検索・絞り込み
  3. SandDanceで使えるグラフ種類
  4. memo
    1. スナップショット
    2. Facet


1.SandDance for VSCodeで何ができるのか

CSV(TSV)ファイルを簡単に可視化・グラフ化することができます。

そして、グラフはVS Codeで表示することができます。

つまり、SplunkやGrafanaといった可視化プラットフォームをわざわざ用意する必要がないんです!!

しかもですよ、グラフがとってもイケメンなんです。

VS Codeだけでこのレベルのグラフがサクサク作れるのはかなりのメリットだと思います。

プレゼン用のグラフを素早く作るという用途には最強のツールです◎


ただ、欠点が全くないというわけではありません。

私が感じた欠点は以下です。

欠点①:大量のデータを扱うのには向かない。
※私の環境だとファイルサイズが数MBでもっさり感が出てきて、数十MBになると重すぎて話にならないレベル。

欠点②:検索機能や使いやすさの面ではSplunk等に劣ると感じる。
※Splunkは偉大。

欠点③:VS Codeでの表示になるのでWEB画面等には使えない。
※オリジナルのSandDanceならできるかも(未確認)


多少の欠点はありますが、それを考慮しても優良ツールであることに変わりありません。
最近試した拡張機能の中だと最推しです!!
※これが無料とか末恐ろしい…

次章以降で使用方法等を説明していくので、「SandDanceを試してみたい!」と思ってくれた方は是非ご一読ください。


2.使用方法

2-A. インストール

インストールは至って簡単。
他の拡張機能と同様でインストールをクリックするだけです。

SandDanceインストール画面


2-B. グラフの表示

グラフの表示にはCSVファイルまたはTSVファイルが必要になります。

通常のCSV/TSVファイルであれば大抵の場合はグラフ化できますが、下図のような形式の方が綺麗なグラフが描きやすいです。

入力に適したCSVのカラム構成

また、一行目がヘッダ行として扱われるのでヘッダは必須です。

グラフ表示させる際の操作は以下の通りです。
CSV/TSVファイルをVS Codeで開く

開いたCSVのタブ(ファイル名の部分)を右クリック

[View in SandDance]を選択

SandDanceのグラフ画面

※操作は冒頭の動画にも入っているので、分かりにくければそちらも見てください。


2-C. データの検索・絞り込み

データの検索・絞り込みを行う場合は、SandDance画面の🔍アイコンを選択します。

データ検索・絞り込み


検索条件設定後、”Search & Select”をクリックすると、検索が行われます。


検索結果をグラフに反映させたい場合

検索結果をグラフに反映させたい場合は、SandDance画面上部の”Isolate”または”Exclude”をクリックします。

検索結果をグラフに反映させる

“Isolate”→検索条件に一致する値のみでグラフ化。
“Exclude”→検索条件に不一致の値のみでグラフ化。


検索条件

検索条件はフィールド(列)毎に以下のものが設定可能です。

条件説明
=, <>, >, >=, <, <=普通の一致・大小比較による検索。
数値/文字列フィールドどちらにも適用可能。
contains指定した文字列が含まれている値のみ検索。
文字列フィールドに対してのみ使用可能。
start with指定した文字列から始まる値のみ検索。
文字列フィールドに対してのみ使用可能。
is null or empty空のフィールドのみ検索。
数値/文字列フィールドどちらにも適用可能。
※nullは反応しないので注意


条件は”Add expression”ボタンで複数追加することができ、それぞれの条件はAND・ORでつなげることができます。

検索条件の設定


3.SandDanceで使えるグラフ種類

グラフ種類別のサンプルは量が多かったので次記事にまとめました。
https://www.mathkuro.com/vs-code/sanddance-charts/

  1. Grid(グリッドチャート)
  2. Bar(横棒グラフ)
  3. Scatter(散布図)
  4. Treemap(ツリーマップ)
  5. Density
  6. Strips(帯グラフ)
  7. Column(縦棒グラフ)
  8. Stacks(積み上げグラフ)


4.memo

4-A スナップショット

ツールバー(?)のカメラアイコンから、表示中のグラフのスナップショットを撮ることができます。

撮影時のグラフ設定を一通り保存し、後で呼び出せるので、複数のグラフパターンを試行したい場合に使えます。

機能としては便利なのですが、SandDanceの画面を一度閉じるとリセットされてしまうので注意が必要です。
(スナップショット仕事してないじゃん…)

また、ここで撮影されるのは、あくまでSandDance内でのスナップショットであり、それを画像等に書き出すことはできません。

画像等にする場合は普通にスクリーンショットを撮る必要があります。


4-B Facet

グラフ表示ではFacetレイアウトというものが使うことができます。

これは何かというと、Splunkでいうところのトレリスレイアウトみたいなものです。

実際にグラフ例をみた方がいいかもしれません↓

Facetレイアウト

このようにFacetを使用すると指定した条件でグラフを分けることができます。


参考

Leave a Reply

Your email address will not be published. Required fields are marked *