Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ツリーマップ: 階層的データ可視化のための推し技術
Search
HideyukiKitao
PRO
March 21, 2025
Programming
150
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
ツリーマップ: 階層的データ可視化のための推し技術
私の推し技術ツリーマップについて、
ライブラリ開発の経緯と得られた教訓をお話しします。
1.ライブラリ開発の経緯したお話です。
2.車輪の再発明で得られた栄養分についてお話します。
HideyukiKitao
PRO
March 21, 2025
More Decks by HideyukiKitao
See All by HideyukiKitao
【やさしく解説 設計編・中級 #5】足すだけ、のはずだった ~ ボタンひとつの依頼から ~
panda728
PRO
0
26
【やさしく解説 設計編・中級 #6】良いアーキテクチャとは ~ 一本の登り道の、行き先 ~
panda728
PRO
0
190
【やさしく解説 設計編・中級 #4】ルールの寿命と、システムの年輪
panda728
PRO
2
170
【やさしく解説 設計編・中級 #3】形はあっていたのに ~ 形に書けない約束の話 ~
panda728
PRO
0
58
【やさしく解説 設計編・中級 #2】使わないボタンだらけのリモコン ~ となりの変更で、うちのビルドが赤くなる話 ~
panda728
PRO
1
56
【やさしく解説 設計編・中級 #1】一つの車に、運転手は一人 ~ある倉庫システムの事例から~
panda728
PRO
0
200
【やさしく解説 設計編 #4・本編最終回】何があなたの手を動かすのか
panda728
PRO
1
84
【やさしく解説 設計編 #0】DDDのコード、読めるのに分からない人へ
panda728
PRO
2
290
【やさしく解説 設計編 #3】規約による保護と、構造による保護
panda728
PRO
0
63
Other Decks in Programming
See All in Programming
改善しないと、タスクが回らない。 “てんこ盛りポジション” を引き継いだ情シスの、入社3ヶ月の業務改善録
krm963
0
220
人間の目はかわらない、だからJPEGは30年もつ
yuzneri
12
17k
php-fpmのプロセスが枯渇した日-調査・対処・そして本当にやるべきだったこと-
shibuchaaaan
0
160
分散システム、なんですぐ死んでしまうん?耐障害性を高めたいあなたのためのレジリエンスパターン入門
mshibuya
7
7.1k
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
hanhan1978
4
1.4k
FDEが実現するAI駆動経営の現在地
gonta
2
230
GDG Korea Android: 2026 I/O Extended ~ What's new in Android development tools
pluu
0
190
Built Our Own Background Agent at LayerX #aidevex_findy
layerx
PRO
9
3.7k
『コードを書く以外の』エンジニアリング〜課金基盤移行プロジェクト推進のためのTips4選
yuriko1211
0
550
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
shiki_kakaku
0
1.2k
Generative UI & AI-Assistants for Your Angular Solutions
manfredsteyer
PRO
1
270
Apache Hive: Toward a Cloud Native Lakehouse
okumin
0
170
Featured
See All Featured
Crafting Experiences
bethany
1
230
Context Engineering - Making Every Token Count
addyosmani
9
1k
Why Our Code Smells
bkeepers
PRO
340
58k
Into the Great Unknown - MozCon
thekraken
41
2.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.5k
We Have a Design System, Now What?
morganepeng
55
8.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Reality Check: Gamification 10 Years Later
codingconduct
0
2.2k
ラッコキーワード サービス紹介資料
rakko
1
4.1M
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
3
370
Building Flexible Design Systems
yeseniaperezcruz
330
40k
Transcript
ツリーマップ: 階層的データ可視化のた めの推し技術 こんにちは、皆さん。 今日は私の推し技術ツリーマップについて、 ライブラリ開発の経緯と得られた教訓をお話しします。 1.ライブラリ開発の経緯したお話です 2.車輪の再発明で得られた栄養分についてお話します。
自己紹介 北尾 英之 倉庫業務を中心とする物流企業のシステム部所属 リンク X(Twitter): https://x.com/kitaohx GitHub: https://github.com/panda728
ツリーマップ実用例 https://finviz.com/ S&P500 各銘柄やセクターの動きがわかりやすいです 色がつくとヒートマップと呼ばれています。
経緯 現在、COBOL製基幹システムを.NETに移行中! 移行が進むにつれ、売上と原価が見えてきた! 利益を生んでいるのはどこ?をfinviz風に可視化したい! でもC#で階層化やクリックでのズームに対応したライブラリがな い! (補足:finviz風ライブラリはあります。Tableau、Power BIもツリ ーマップに対応してます。)
自宅でC#を使って作ってみました https://github.com/panda728/SquarifiedTreemapLayers 追加ライブラリはDI用にMicrosoft.ExtensionsとSystem.Text.Json BlazorやSkiaSharp対応は今後(現時点ではWinForm、Console)
事例1 地区別部門別売上原価率 売上高を面積、売上原価率を色で表現し、目標未達部分は赤! 平均では埋もれてしまうバラツキが見えるようになった!
特徴 効率的なレイアウト生成と柔軟なカスタマイズ性を提供します。
事例2 人口統計 令和2年国勢調査(総務省統計局) 都道府県・市区町村別の主な結 果 https://www.stat.go.jp
(副題)車輪の再発明で得られた栄養分 インターフェースとSOLID原則の理解が深まった 描画処理の実装は未経験でクラス構造に苦労した。 SOLID原則を見てもよくわからない。 インターフェースにしたら読みやすくなります...ってどゆこと? AIさん助けて!
SOLID原則、完全に理解した(LV1) SOLID原則は「読みやすいコード」のためにある! 開発現場でSOLID原則を適用すべき場面が、すごくわかりやすい! 結果Github Copilotさんが書いたクラス図で流れがわかりやすい! 詳細は長くなるため別記事にて SOLID原則やドメイン駆動設計(DDD)を開発現場で実践するため のヒント https://zenn.dev/panda728/articles/b8584b13488a15
結論 車輪の再発明は、知らなかった原理原則に触れるチャンス! AIさんとの協働することで、知識不足の壁は壁でなくなった! ご清聴ありがとうございました。