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
170
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
1.2k
【やさしく解説 設計編・中級 #5】足すだけ、のはずだった ~ ボタンひとつの依頼から ~
panda728
PRO
0
38
【やさしく解説 設計編・中級 #6】良いアーキテクチャとは ~ 一本の登り道の、行き先 ~
panda728
PRO
0
250
【やさしく解説 設計編・中級 #4】ルールの寿命と、システムの年輪
panda728
PRO
2
210
【やさしく解説 設計編・中級 #3】形はあっていたのに ~ 形に書けない約束の話 ~
panda728
PRO
0
83
【やさしく解説 設計編・中級 #2】使わないボタンだらけのリモコン ~ となりの変更で、うちのビルドが赤くなる話 ~
panda728
PRO
1
85
【やさしく解説 設計編・中級 #1】一つの車に、運転手は一人 ~ある倉庫システムの事例から~
panda728
PRO
0
260
【やさしく解説 設計編 #4・本編最終回】何があなたの手を動かすのか
panda728
PRO
1
110
【やさしく解説 設計編 #0】DDDのコード、読めるのに分からない人へ
panda728
PRO
2
370
Other Decks in Programming
See All in Programming
Web Framework Benchmark Battle 2026, Any%
a_matsuda
2
2k
Unity6 URPによる海底をテーマにしたVJシステムの解説 | Unity Shader 完全に理解した 勉強会
gam0022
0
370
Next.js: The final boss of Web Performance
guaca
0
260
Augmenting AI with the Power of Jakarta EE
ivargrimstad
0
190
Workers Cache を知る
syumai
0
360
SalesForceを内製化!? ~ HR事業を支える顧客管理基盤のインフラを大公開 ~
oku053
0
180
月間100万人のサービス刷新で、 技術選定をHonoに振り切った話
yutobara
8
6.6k
Everything will be SERVERLESS — 信じて運用した10年の経験値 / Everything Will be Serverless — Lessons Learned from 10 Years of Operational Experience
seike460
PRO
1
1.1k
npm との違いを手がかりにGo の依存管理を理解したい
optim
0
310
Optunaを作ったときにやりたかったこと、その後 (2026/10/16, Optuna Meetup #3)
iwiwi
1
430
【加筆修正版】Laravel のアプリケーションをどこにデプロイするか #phpcon_ehime
akase244
0
150
S3 TablesのIcebergデータに、AIエージェントからアクセスしてみた / 20261016developersio2026joetsu-accessing-iceberg-in-s3tables-via-agent
kasacchiful
PRO
0
150
Featured
See All Featured
エンジニアに許された特別な時間の終わり
watany
109
250k
Reality Check: Gamification 10 Years Later
codingconduct
0
2.3k
Design in an AI World
tapps
1
350
The Cost Of JavaScript in 2023
addyosmani
55
10k
Between Models and Reality
mayunak
4
500
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
940
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8.4k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
12k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
3
3.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
22k
Why You Should Never Use an ORM
jnunemaker
PRO
61
10k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
7k
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さんとの協働することで、知識不足の壁は壁でなくなった! ご清聴ありがとうございました。