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
tkirby
December 22, 2015
Technology
1
550
前端網頁資料視覺化設計
前端網頁資料視覺化設計 / 分享於現代化網站技術分享日
tkirby
December 22, 2015
Tweet
Share
More Decks by tkirby
See All by tkirby
Theory of Graphical Perception
tkirby
0
580
Open Refine Course
tkirby
0
210
Language Reference
tkirby
0
110
新聞記者的程式設計第一課
tkirby
0
580
Visualization over Web
tkirby
0
130
迎戰壞資料 @ dbootcamp Taipei
tkirby
0
780
Rasterize D3.js
tkirby
7
1.8k
SVG + D3.JS Course Slide
tkirby
0
240
資料新聞學手冊導讀
tkirby
0
290
Other Decks in Technology
See All in Technology
WEBサービスを成り立たせるAWSサービス
takano0131
1
180
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
130
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
0
130
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
8
1.1k
Node.js 2025: What's new and what's next
ruyadorno
0
400
RDS の負荷が高い場合に AWS で取りうる具体策 N 連発/a-series-of-specific-countermeasures-available-on-aws-when-rds-is-under-high-load
emiki
6
3.9k
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
240
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
3
1.7k
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
160
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
930
Featured
See All Featured
Building Applications with DynamoDB
mza
96
6.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
4 Signs Your Business is Dying
shpigford
185
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
How to Think Like a Performance Engineer
csswizardry
27
2k
Side Projects
sachag
455
43k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Transcript
網⾴頁前端視覺化技術 infographics.tw
None
None
None
Nigel Holmes TIME Magazine
$IBSU+VOL%FCBUF &EXBSE5VGUF JO7%2* 「凡對讀者的智⼒力抱著懷疑態度來對待的⼈人, 也無法寫出像樣的作品。」 「如果統計數字枯燥乏味的話, 那你肯定弄錯了數字」 IJUF
$IBSU+VOL%FCBUF &EXBSE5VGUF JO7%2* %BUB*OL3BUJP *OLPG%BUB 5PUBM*OL6TFE
None
None
None
None
1854 1858 1869
http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html?_r=0
data = [1,2,3,4,5,6,7,8]
data = [1,2,3,4,5,6,7,8] <div style=“width:100px”></div> <div style=“width:200px”></div> <div style=“width:300px”></div> <div
style=“width:800px”></div> …..
2011 Mike Bostock
TA G DATA +
data = [1,2,3,4,5,6,7,8]
data = [1,2,3,4,5,6,7,8] d3.select(“#root”) .selectAll(“div”) .data(data)
data = [1,2,3,4,5,6,7,8] enter() exit() d3.select(“#root”) .selectAll(“div”) .data(data)
data = [1,2,3,4,5,6,7,8] enter() exit() d3.select(“#root”) .selectAll(“div”) .data(data) append remove
data = [1,2,3,4,5,6,7,8] d3.select(“div:nth-of-type(5)”) .text(function(v) { return v; });
d3.select(“#root”) .selectAll(“div”) .style({ “width”: function(v) { return v + “px”;
}}) .attr({ … }); Dynamic Property
None
None
MathML
MathML X3D
MathML X3D SMIL
MathML X3D SMIL Document Agnostic
http://zbryikt.github.io/visualize/banana/ Banana in X3D
Transition d3.select(“#root”) .selectAll(“div”) .transition() .duration(1000) .style({ “width”: function(v) { return
v + “px”; }});
http://bl.ocks.org/mbostock/1256572 D3 Show Reel
None
http://bl.ocks.org/infographicstw/raw/122779b04901c4ffa455/5.html Play with Force Layout
None
None
Processing 2001, MIT Media Lab. Simplified Java
Processing 2001, MIT Media Lab. Simplified Java Processing.js p5.js
d3.select(“#root”) .selectAll(“div”) .data(d) .enter() .append(“div”) .style({ width: function(v) { return
v+”px”; }, height: “10px” } ); <div id=“root”></div> function draw() { for(i in d) { rect(0,i*10, d[i],(i+1)*10); } } d3.js p5.js
d3.select(“#root”) .selectAll(“div”) .data(d) .enter() .append(“div”) .style({ width: function(v) { return
v+”px”; }, height: “10px” } ); <div id=“root”></div> function draw() { for(i in d) { rect(0,i*10, d[i],(i+1)*10); } } d3.js p5.js CSS Selector HTML CSS D3.js
d3.select(“#root”) .selectAll(“div”) .data(d) .enter() .append(“div”) .style({ width: function(v) { return
v+”px”; }, height: “10px” } ); <div id=“root”></div> function draw() { for(i in d) { rect(0,i*10, d[i],(i+1)*10); } } d3.js p5.js draw in draw rect by rect
But….. Performance?
p5.js
2D webGL renderer with canvas fallback
D3.js Pixi.js
快 易 強 難 慢 弱 ? d3.js p5.js pixi.js
PathGL
PathGL
PathGL
Rasterize D3.js D3.js HTML SVG X3D CUSTOM CANVAS SVG 3D
CANVAS WEBGL CA NV AS CANVAS DATA BINDING INTERFACE IMPLEMENTATION CSS 3D CA NV AS PHANTOMJS or NATIVE PORTING SERVER SIDE
D3 + Canvas ? D3 + NodeJS ? D3 +
ReactJS ? D3 + WebWorker ?
TO BE CONTINUE …
Let’s Talk about Responsive
None
Large in Size Low Quality
Small in Size High Quality
w (x1,y1) <svg width=“w” height=“h” viewBox=“x1 y1 x2 y1”> h
(x2,y2)
(x1,y1) (x2,y2) w h
preserveAspectRatio xMin xMid xMax yMin yMid yMax
preserveAspectRatio=“xMidYMid” xMin xMid xMax yMin yMid yMax
None
None
None
http://www.nytimes.com/interactive/2015/06/17/world/middleeast/map-isis-attacks-around-the-world.html?smid=tw-nytimes&_r=1
None
None
None
(x1,y1) (x2,y2) w h x scale y scale
d3.scale.linear() data 0~10 scale coord 0~w
d3.svg.axis().tick(w/k)
07/2015, Nadieh @ Visual Cinnamon
None
None
None
None
None
None
http://www.foundi.info/lab/badneighbor/
總結 • 整體原則與 RWD 相同 • 考慮圖⽂文搭配的閱讀體驗 • 彈性處理圖表本⾝身的尺⼨寸 •
可以簡化的資料應統⼀一簡化,沒有平台差異 • 不適合簡化的資料,再考慮分裝置處理 • 永遠考慮更簡潔的表現形式
Visualization without Web
2015.09 shown by Republican to the congress to refund Planned
Parenthood
proposed actually 2015.09 shown by Republican to the congress to
refund Planned Parenthood
http://guns.periscopic.com/
( 2007 Proc. InfoViz )
None
None
None
None
w w <canvas width=“w” height=“h” style=“width:wpx;height:hpx”> h h