Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
ツリーマップ: 階層的データ可視化のための推し技術
Search
HideyukiKitao
PRO
March 21, 2025
Programming
160
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
UPDATE をやめる — EF Core でマスタをバージョン管理する
panda728
PRO
0
850
【やさしく解説 設計編・中級 #5】足すだけ、のはずだった ~ ボタンひとつの依頼から ~
panda728
PRO
0
38
【やさしく解説 設計編・中級 #6】良いアーキテクチャとは ~ 一本の登り道の、行き先 ~
panda728
PRO
0
240
【やさしく解説 設計編・中級 #4】ルールの寿命と、システムの年輪
panda728
PRO
2
210
【やさしく解説 設計編・中級 #3】形はあっていたのに ~ 形に書けない約束の話 ~
panda728
PRO
0
80
【やさしく解説 設計編・中級 #2】使わないボタンだらけのリモコン ~ となりの変更で、うちのビルドが赤くなる話 ~
panda728
PRO
1
79
【やさしく解説 設計編・中級 #1】一つの車に、運転手は一人 ~ある倉庫システムの事例から~
panda728
PRO
0
230
【やさしく解説 設計編 #4・本編最終回】何があなたの手を動かすのか
panda728
PRO
1
110
【やさしく解説 設計編 #0】DDDのコード、読めるのに分からない人へ
panda728
PRO
2
340
Other Decks in Programming
See All in Programming
Verilogで学ぶCPU自作入門.pdf
uyuki234
8
3.6k
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
rkaga
7
5k
ハーネス設計入門 〜 基礎知識の整理から実務へのステップアップ 〜
kinopeee
18
18k
GitHubハンズオン講座 — 実務レベルのチーム開発のフローを身につけよう
junhat6
0
110
SONY CISC-NEWS NWS-1750 + NWB-225 フレームバッファの NetBSD/news68k ドライバ実装 / OSC2026Hiroshima
tsutsui
0
150
Are APIs Still Relevant in the AI Era?
soyuka
0
330
Starting & Sustaining Code-Based E2E Testing for Non-Coding QA Teams( #jasstniigata )
teyamagu
PRO
1
590
カツオ、ご期待ください
suneo3476
0
110
MCP Appsでつくるチャット駆動な地図アプリ
nakamori1024
0
110
Ghostty + Neovimで作る 透明でカッコ良い開発環境
j341nono
0
130
市販E-Readerを乗っ取れ 〜Embedded Swiftで電子ペーパーガジェットを制御する〜
trickart
0
220
iOSDC Japan 2026 - Swiftで作って学ぼう!データベース自作入門
kaseken
2
370
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.9k
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
290
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
290
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
1
560
AI: The stuff that nobody shows you
jnunemaker
PRO
10
1.1k
Building a Scalable Design System with Sketch
lauravandoore
464
34k
The Cult of Friendly URLs
andyhume
79
7k
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
830
Why You Should Never Use an ORM
jnunemaker
PRO
61
10k
We Have a Design System, Now What?
morganepeng
55
8.3k
It's Worth the Effort
3n
188
29k
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さんとの協働することで、知識不足の壁は壁でなくなった! ご清聴ありがとうございました。