Recommended
More Related Content
Similar to 進擊的資料視覺化
Similar to 進擊的資料視覺化 (17)
進擊的資料視覺化
- 1. 資 料 視 覺 化
- 7. 今天不講什麼 -如何使用 Photoshop、illu ... -如何使用 Excel 畫報表
- 8. 今天不講什麼 -如何使用 Photoshop、illu ... -如何使用 Excel 畫報表 -任何我不懂的東西...
- 9. 我是一個 網頁工程師
- 14. 我是一個 前端工程師
- 18. 前端的日常
- 19. 前端的日常 • Html • CSS • JavaScript
- 20. 前端的日常 • Html • CSS • JavaScript 骨架 外表(skin) 動作
- 23. 範例
- 24. 進階套件 -Html：Jade、Jedi -CSS：Sass、Less、Stylus -JavaScript：JQuery、ES6 -統合開發：Angular.js、React.js、Vue.js
- 25. Html
- 26. Html Jade
- 27. CSS
- 28. CSS Stylus
- 29. JS
- 30. JS ES6
- 31. 網頁的日常
- 33. abc.com html
- 34. abc.com html
- 51. 資訊視覺化
- 52. why ? 為什麼 ? 何で ?
- 53. 在這資訊爆炸的年代
- 56. 但是，一天還是只有24小時
- 57. 資訊的競爭
- 59. 拿破崙東征
- 60. 拿破崙東征 法國邊境
- 62. 拿破崙東征 行軍路線(去程)
- 64. 拿破崙東征 人數 = 寬度
- 65. 拿破崙東征 人數 = 寬度 回程 …. 幫Q_Q
- 66. 拿破崙東征 當地氣溫
- 67. 拿破崙東征
- 68. 拿破崙東征
- 71. 研究型視覺化 敘事型視覺化
- 72. 盜圖自 Useful Junk? The Effects of Visual Embellishment on Comprehension and Memorability of Charts -Scott Bateman
- 73. Data Ink Ratio = Data Ink Total ink used to print the graphic
- 74. 盜圖自 Useful Junk? The Effects of Visual Embellishment on Comprehension and Memorability of Charts -Scott Bateman, Regan L. Mandryk, Carl Gutwin
- 75. Holmes versions (left) Equivalent Plain versions (right)
- 76. Means SE for recall scores for long-term and immediate recall.
- 77. 客製化
- 78. 南丁格爾的玫瑰
- 79. 顏色、形狀、客製化
- 81. 顏色、對齊、客製化
- 82. 捷運地圖
- 84. 台日大戰
- 85. 符號、扭曲 顏色、對齊、客製化
- 86. 棒球實況
- 87. … 還有儀表板
- 88. 「看到，就懂了。」 -Randy Krum, Cool Infographics
- 90. 顏色 形狀 動作 The Color The Shape The Motion
- 91. 顏色 形狀 動作 The Color The Shape The Motion
- 97. Color Use Guidelines for Mapping and Visualization 顏色分類
- 98. Binary 二分顏色Color Use Guidelines for Mapping and Visualization
- 99. Diverging 二極顏色Color Use Guidelines for Mapping and Visualization
- 100. Qualitative 質性顏色Color Use Guidelines for Mapping and Visualization
- 101. Sequintial 連續顏色Color Use Guidelines for Mapping and Visualization
- 103. 顏色 形狀 動作 The Color The Shape The Motion
- 104. 誰比較大？
- 105. 大幾倍？
- 106. 大幾倍？
- 107. 大幾倍？
- 108. 大幾倍？
- 109. 形狀的使用
- 110. 長度 vs 弧度
- 111. 反案例
- 112. 爛案例
- 113. 骨頭裡挑出雞蛋
- 114. 2 點鐘 做圓餅圖一定要注意的6件事
- 115. 12 點鐘 做圓餅圖一定要注意的6件事
- 116. 長度 vs 弧度
- 117. 2005年至2009年 收入掉了47%
- 121. 2005年至2009年，收入掉了
- 122. 面積的調整
- 123. • New York Times • The Wall Street Journal • Financial Times • Washinton Post • Bloomberg • CNN • NBC News 火力展示 • ABC News • Politico • Guardian • BBC • NHK • 日經 • 聯合新聞網
- 125. 顏色 形狀 動作 The Color The Shape The Motion
- 131. 做圓餅圖一定要注意的6件事
- 134. 變盲 Change Blindness • 心理學家 William James 提出 • 觀察者無法察覺的動態改變 • 與視野範疇、眼睛移動能力、畫面干擾、畫面 閃爍、維持對多目標的注意力有關 • 常應用於目擊證人辨識、車禍原因鑑定上
- 136. 動作的使用 •注意力 •工作記憶 –贏者全拿(winner-takes-it-all) –選擇專注，忽略其他明顯的變化 –大腦暫時性的記住數個目標， 存在心裡做運算的能力 –7 是奇妙的數字
- 143. 工具
- 144. • amchart • chart.js • chartist.js • echarts ( baidu ) • google chart • highchart • paper.js • zingchart • c3.js • n3 charts • ember chart • fusion chart • flot • plotly.js • two.js • uvCharts • anychart • n3 charts • D3.js • xchart • raphaeljs • nvd3 • sigma.js • fusion charts 工具人聯盟
- 145. • amchart • chart.js • chartist.js • echarts ( baidu ) • google chart • highchart • paper.js • zingchart • c3.js • n3 charts • ember chart • fusion chart • flot • plotly.js • two.js • uvCharts • anychart • n3 charts • D3.js • xchart • raphaeljs • nvd3 • sigma.js • fusion charts 工具人聯盟
- 146. Highchart
- 147. D3.js
- 150. The Wealth & Health of Nations
- 151. <body> <svg width="100%" height="100%"> <circle cx="200" cy="200" r="100" fill="red" stroke="blue" stroke-width = "20"/> </svg> </body> <script src="d3.min.js"></script> Shape
- 152. d3.select("svg") .append("circle") .attr({ cx: 200, cy: 200, r: 100, fill: "red", stroke: "blue", }) .style("stroke-width", 20) ; Shape
- 153. Quby
- 154. // 資料結合 var data = d3.select("svg") .selectAll("rect") .data([3,1,4,1,5,9]); data.enter().append("rect"); data.exit().remove(); // 畫圖 d3.select("svg").selectAll("rect").attr({ x: function(d,i) { return i * 20; }, y: 30, width: 15, height: function(d,i) { return d * 15; }, fill: "red" }); Bar
- 156. Scale
- 157. Scale
- 159. Raw