前端網頁資料視覺化設計

前端網頁資料視覺化設計 / 分享於現代化網站技術分享日

Transcript

1. 網⾴頁前端視覺化技術 infographics.tw
5. Nigel  Holmes TIME  Magazine
6. $IBSU
   +VOL
   %FCBUF 
   &EXBSE
   5VGUF
   JO
   7%2* 「凡對讀者的智⼒力抱著懷疑態度來對待的⼈人， 也無法寫出像樣的作品。」 「如果統計數字枯燥乏味的話， 那你肯定弄錯了數字」 
   &#
   8IJUF
7. $IBSU
   +VOL
   %FCBUF 
   &EXBSE
   5VGUF
   JO
   7%2* %BUB*OL3BUJP
    *OLPG%BUB 5PUBM*OL6TFE
12. 1854 1858 1869
13. http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html?_r=0
14. data = [1,2,3,4,5,6,7,8]
15. 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> …..
16. 2011 Mike Bostock
17. TA G DATA +
18. data = [1,2,3,4,5,6,7,8]
19. data = [1,2,3,4,5,6,7,8] d3.select(“#root”) .selectAll(“div”) .data(data)
20. data = [1,2,3,4,5,6,7,8] enter() exit() d3.select(“#root”) .selectAll(“div”) .data(data)
21. data = [1,2,3,4,5,6,7,8] enter() exit() d3.select(“#root”) .selectAll(“div”) .data(data) append remove
22. data = [1,2,3,4,5,6,7,8] d3.select(“div:nth-of-type(5)”) .text(function(v) {
 return v;
 });
23. d3.select(“#root”) .selectAll(“div”) .style({ “width”: function(v) { return v + “px”; }}) .attr({ … }); Dynamic Property
26. MathML
27. MathML X3D
28. MathML X3D SMIL
29. MathML X3D SMIL Document Agnostic
30. http://zbryikt.github.io/visualize/banana/ Banana in X3D
31. Transition d3.select(“#root”) .selectAll(“div”) .transition() .duration(1000) .style({ “width”: function(v) { return v + “px”; }});
32. http://bl.ocks.org/mbostock/1256572 D3 Show Reel
34. http://bl.ocks.org/infographicstw/raw/122779b04901c4ffa455/5.html Play with Force Layout
37. Processing 2001, MIT Media Lab. Simplified Java
38. Processing 2001, MIT Media Lab. Simplified Java Processing.js p5.js
39. 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
40. 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
41. 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
42. But….. Performance?
43. p5.js
44. 2D webGL renderer with canvas fallback
45. D3.js Pixi.js
46. 快 易 強 難 慢 弱 ？ d3.js p5.js pixi.js
47. PathGL
48. PathGL
49. PathGL
50. 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
51. D3 + Canvas ? D3 + NodeJS ? D3 + ReactJS ? D3 + WebWorker ?
52. TO BE CONTINUE …
53. Let’s Talk about Responsive
55. Large in Size Low Quality
56. Small in Size High Quality
57. w (x1,y1) <svg width=“w” height=“h” viewBox=“x1 y1 x2 y1”> h (x2,y2)
58. (x1,y1) (x2,y2) w h
59. preserveAspectRatio xMin xMid xMax yMin yMid yMax
60. preserveAspectRatio=“xMidYMid” xMin xMid xMax yMin yMid yMax
64. http://www.nytimes.com/interactive/2015/06/17/world/middleeast/map-isis-attacks-around-the-world.html?smid=tw-nytimes&_r=1
68. (x1,y1) (x2,y2) w h x scale y scale
69. d3.scale.linear() data 0~10 scale coord 0~w
70. d3.svg.axis().tick(w/k)
71. 07/2015, Nadieh @ Visual Cinnamon
78. http://www.foundi.info/lab/badneighbor/
79. 總結 • 整體原則與 RWD 相同 • 考慮圖⽂文搭配的閱讀體驗 • 彈性處理圖表本⾝身的尺⼨寸 • 可以簡化的資料應統⼀一簡化，沒有平台差異 • 不適合簡化的資料，再考慮分裝置處理 • 永遠考慮更簡潔的表現形式
80. Visualization without Web
81. 2015.09 shown by Republican to the congress to refund Planned Parenthood
82. proposed actually 2015.09 shown by Republican to the congress to refund Planned Parenthood
83. http://guns.periscopic.com/
84. ( 2007 Proc. InfoViz )
89. w w <canvas width=“w” height=“h” style=“width:wpx;height:hpx”> h h