初探資料視覺化與 d3.js
DESCRIPTION
初探資料視覺化與 D3.jsTRANSCRIPT
初探資料視覺化與 D3.jsKuro Hsu
「先別管 D3 了，你聽過資訊視覺化嗎？」
有沒有介紹 D3.js 簡報的第⼀一⾴頁就叫⼈人別管 D3 的⼋八卦
同樣是 Web 記錄分析，哪個易懂？
同樣是 Web 記錄分析，哪個易懂？
為什麼需要將資訊視覺化
• 視覺功能佔⼈人類⼤大腦⼀一半以上的訊息處理資源
• ⼤大量資料可在瞬間被理解，資訊傳遞更有效率
• 有助於觀察出其他呈現⽅方式不易察覺到的資料特性
• 資訊視覺化以後可以很容易看出本⾝身的瑕疵與錯誤
– Randy Krum, Author of Cool Infographics.
「看到，就懂了。」
資訊圖表類別
• 靜態圖表
• 可縮放圖表
• 可點選圖表
• 動畫
• 影⽚片
• 互動式 (網⾴頁 / application)
資訊圖表類別
• 靜態圖表
• 可縮放圖表
• 可點選圖表
• 動畫
• 影⽚片
• 互動式 (網⾴頁 / application)
* svg 繪圖需要 IE9+
將資料綁定⾄至 document
DOM 選擇器d3.select("#Element"); d3.selectAll("Elements");
將資料加⼊入
.data([1, 2, 3, 4, 5])
建⽴立 (Enter)，更新 (Update) 以及離開 (Exit)
ENTER: Data elements > SVG elements. UPDATE: Data elements = SVG elements. EXIT: Data elements < SVG elements.
.enter().append("circle")
.exit().remove()
屬性 - attr
Color .attr("fill", "#ff0000")
.attr("x", 20)
.attr("width", 100)
.attr("stroke","#ff0000")
.attr("class", "red");
Position
Size
Stroke
Color
var circle = d3.select('svg').selectAll("circle")
.data([1, 2, 3, 4, 5])
.enter()
.append("circle")
.attr('cx', function(d,i) { return i * 50 + 50; })
.attr('cy', 50)
.attr('r', function(d,i) { return i * 5 + 5; })
.attr('fill', '#ff0000');
http://jsfiddle.net/5mfjevvL/
var block = d3.select('p').selectAll("div")
.data(['H', 'E', 'L', 'L', 'O'])
.enter()
.append('div')
.text(function(text){ return text; })
.style("width",
function(d, i){ return (i * 20 + 20) + 'px'; });
http://jsfiddle.net/6vo7cq73/
Need More ?
• D3 API Reference https://github.com/mbostock/d3/wiki/API-Reference
• Over 1000 D3.js Examples and Demos http://techslides.com/over-1000-d3-js-examples-and-demos/
• 五倍紅寶⽯石出礦坑- 第⼀一次玩 D3.js 就上⼿手 workshop( ⼯工商服務時間 XD )http://5xruby.tw/talks/d3js