Open17

経歴の可視化｜Markdown/JSON to Timeline / Gantt

snamiki1212snamiki1212

自分の経歴を可視化したいので何かいい方法がないか探したときのメモ

snamiki1212snamiki1212

Timeline Diagram | Mermaid

mermaid.js のタイムライン

  • 表現が微妙
    • 可視化の観点で見にくい。
    • 海外とかだとタイムラインってこういうのなのかな。UI的にすごい微妙だと感じてしまうのだが。
timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter
snamiki1212snamiki1212

Gantt diagrams | Mermaid

mermaid.js のガント

  • 表現は色々できそう
  • ただ、見やすさの観点ではちょっと野暮ったいことになりそう
  • 縦にできないので必ず横長になってしまう。経歴が長いと文字サイズ的に見にくそう
gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d
snamiki1212snamiki1212

Gitgraph Diagrams | Mermaid

mermaid.js の gitgraph

  • 本来の用途ではないがやりたいことをだいぶ表現できそう
  • どういう表現にすると見やすいのかは考える余地はありそうだが可能性としては良さそう
gitGraph TB:
    commit
    commit
    branch develop
    commit
    commit
    checkout main
    commit
    commit
    merge develop
    commit
    commit
snamiki1212snamiki1212

取り扱いとしてMarkdownをデータソースとして考えていたけど、JSONでもいいんじゃないか。むしろ、JSONの方がいいんじゃないか。

そうなると、JavaScriptのビジュアライズ系ツールも考慮して良さそう。

snamiki1212snamiki1212

EChart.js: Examples - Apache ECharts

built-inで画像出力できる

  • ブラウザエディタで書いた内容をそのまま画像出力できる。画質もかなり良い

  • その他

    • 経歴だけでなくて、いろんなデータの可視化にかなり役立ちそう
    • 流れ:
      1. 自前のデータを元にどう可視化したいかを決める（exampleを眺めたり、GPTにきく）
      2. 自前のデータ→echart.js に取り込めるデータに整形する（手動かGPTに依頼する）
      3. オンラインエディタでechart.js → png に変換して画像を利用する
      4. echart.jsのデータ（JS or TS）はどこかに保存しておく（これ系をまとめたprivateリポジトリ作っておくのが良さそう）
snamiki1212snamiki1212

GitHub - d3/d3: Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

d3.jsを使う

Examples見てみると おそらくd3.jsを提供している Observable社が提供しているオンラインノートブック経由で表示できそう

  • Radial cluster tree / D3 | Observable
    • pngだけでなくsvgでも出力できそう
  • ここまでくるとデータを渡すのではなくてJSをゴリゴリ書かないといけないので運用コスト高そう
snamiki1212snamiki1212

Jupyter Book | Project Jupyter | Home

体験がほぼJupyterだったので、「それならJSにこだわる必要ないのでは」と思ったのでJupyterでちょっと見てみる。あんまりここら辺詳しくないのと、期待値が低めなので雑めにまとめ。

→結局、Python or JavaScriptの実行環境なのでコード書く感じになるので運用コスト高そう

snamiki1212snamiki1212

ここまでの所感

  • 1番手軽
    • mermaid.js の gitgraph が最有力
  • デザインにもちょっとこだわりたい
    • EChart.js が最有力

ひとまずgitgraphを試してみる

snamiki1212snamiki1212

前提

  • 経歴においてどういうデータが必要か

    • 年(20xx)→軸として表現する

    • どの会社に所属していた、とか何をした、などの内容→イベントとして表現する

mermaid.js > gitgraph

snamiki1212snamiki1212

1軸

  • ２つのことを同時にしていた時の表現ができない

Commit ID

%%{init: { 'gitGraph': {'mainBranchName': "Start"}} }%%
gitGraph LR:
    commit id: "👶🏻"
    commit id: "2009/04 XXX 大学"
    commit id: "2013/04 A社"
    commit id: "2019/01 Freelance"
    commit id: "2022/03 B社"
    commit id: "2021/08 C社"
  • commit id に全て書く最もシンプルなやり方

Tag

%%{init: { 'gitGraph': {'mainBranchName': "Start"}} }%%
gitGraph LR:
    commit id: "👶🏻"
    commit id: "XXX 大学" tag: "2009/04"
    commit id: "A社" tag: "2013/04"
    commit id: "Freelance" tag: "2019/01"
    commit id: "B社" tag: "2022/03"
    commit id: "C社" tag: "2021/08"
  • タグ利用
  • みにくい。むしろタグない方がいいのでは。
snamiki1212snamiki1212

N軸

  • git だからこそできる複数のブランチを表現できる力を使う

way1: ブランチ=Year

%%{init: { 'gitGraph': {'mainBranchName': "1990/12"}} }%%
gitGraph TB:
    commit id: "👶🏻"
    branch 2009/04
    commit id: "XXX 大学"

    branch 2013/04
    commit id: "A社"

    branch 2019/01
    commit id: "Freelance"

    branch 2022/03
    commit id: "B社"

    branch 2021/08
    commit id: "C社"

    checkout 2019/01
    commit id: "案件B"
  • ブランチで時系列を表現する
    • わかるけど微妙
    • これだと mermaid.js の Timeline と同じことをしてる感じがする。そっちよりかはみやすいけど。
    • ２つのイベントを同時に走らせていた、みたいなことがわからない（フリーランスやりながら仕事してた時とか）
      • →ただし、２つの表現の整合性がおかしくなる（2019/01の軸の２つ目のイベントがいつなのかわからなくなる）

way2: ブランチ=会社名

%%{init: { 'gitGraph': {'mainBranchName': "X"}} }%%
gitGraph TB:
    commit id: "1990/12"
    
    branch "XXX 大学"
    commit id: "入学" tag: "2009/04"
    commit id: "卒業" tag: "2013/03"
    
    branch "A社"
    commit id: "入社" tag: "2013/04"
    commit id: "退社" tag: "2017/05"

    branch "Freelance"
    commit id: "案件A" tag: "2017/09"

    branch "B社"
    commit id: "2022/03" tag: "X プロジェクト"

    checkout "Freelance"
    commit id: "案件B" tag: "2023/09"

ブランチに所属している会社名を表現する

  • 表現はできているし破綻してない
  • ただ、会社が増えたら軸が増えてしまう
snamiki1212snamiki1212

mermaid

並列でイベントを書くときのやり方

%%{init: { 'gitGraph': {'mainBranchName': "X"}} }%%
gitGraph TB:
    %% 1 -------------------
    commit id: "X1"
    
    branch a
    commit id: "a1"
    
    branch b
    commit id: "b1"

    %% 2 -------------------
    checkout X
    commit id: "X2"

    checkout a
    commit id: "a2"

    checkout "b"
    commit id: "b2"
snamiki1212snamiki1212

N軸: way3: ブランチ=大項目（ver1）

  • 自分がやりたいことに一番表現がマッチしてるやり方だった
  • 学業、正社員、個人事業などの大項目ごとにブランチを切る
  • ただし、１つの大項目で複数並行して何かをやらない想定（例えば、個人事業で３つくらい案件を並行する場合は、この方法とは合わない。その場合は、way2の方がマッチする）
%%{init: { 'gitGraph': {'mainBranchName': "学業"}} }%%
gitGraph TB:
    commit id: "XXX 大学 入学" tag: "2009/04"
    commit id: "XXX 大学 卒業" tag: "2013/03" type: REVERSE
    
    branch "正社員"
    commit id: "A社 入社" tag: "2013/04"
    commit id: "A社 退社" tag: "2017/05" type: REVERSE
    
    branch "フリーランス"
    commit id: "案件B" tag: "2018/09"

    checkout "正社員"
    commit id: "B社 入社" %% HACK: No connection from prev because same next CommitID
    merge "フリーランス"
    commit id: "B社 入社" tag: "2022/03"

    checkout "学業"
    commit id: "YYY 入学" %% HACK: No connection from prev because same next CommitID
    merge "正社員"
    commit id: "YYY 入学" tag: "2020"
    %% commit id: "YYY 卒業" tag: "2020" type: REVERSE

    checkout "フリーランス"
    commit id: "案件C" %% HACK: No connection from prev because same next CommitID
    merge "正社員"
    commit id: "案件C"

    %% ------
    %% 現在のステータス
    %% * わかりやすいように直近のステータスを表現。なくても良い。
    %% * 末尾にスペースなどを入れてcommit id が被らないようにしてる
    %% ------
    checkout "学業"
    commit id: "在職中... "
    checkout "正社員"
    commit id: "在職中..."