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
Responsive D3 The React Way
Search
John Bartos
March 16, 2016
Programming
0
210
Responsive D3 The React Way
Use higher-order components to abstract the nastiness of interacting with the real DOM
John Bartos
March 16, 2016
Tweet
Share
Other Decks in Programming
See All in Programming
GPUを計算資源として使おう!
primenumber
1
170
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
530
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
260
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
700
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
210
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
300
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
1
130
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Six Lessons from altMBA
skipperchong
28
3.9k
GitHub's CSS Performance
jonrohan
1031
460k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
How STYLIGHT went responsive
nonsquared
100
5.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Transcript
Making D3 Responsive The React Way https://johnbartos.github.io/react-d3-demo/ johnbartos.io
I'm John Bartos, and this is my first talk ever
You want to make sweet D3 visualizations that just work™
on all screen sizes (you also care about doing it properly)
But there's a problem...
D3 needs to know its size before runtime You don't
know size until runtime
Fortunately, there's an easy solution
ReactDOM.findDOMNode() GetBoundingClientRect() window.addEventListener('resize', ..) this.setState()
But there are two (2) things wrong with this approach!
findDOMNode() breaks component abstraction
A stateless component is now stateful
You need a higher-order component! (?)
HOCs are functions which take a component and returns another
component that wraps it (thats it)
Our HOC gets size exactly as before and passes it
as props to its child When 'resize' event fires, new props are passed, prompting a rerender
The HOC encapsulates all the nastiness
The wrapped component just gets props
There's a small catch – children render before parents Need
to set initial state in HOC
(Please clap)