2014年11月16日

SVG D3.js - 區域 ( area )

Posted by oxxo on 11/16/2014 08:04:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201411/svg-d3-05-area.html

摘要：
理解了 line、scale 和座標軸之後，再來要介紹與 area 這個方法，area 就像字面翻譯一樣，可以繪製一個區域，同時也可以像 line 一樣的設定 interpolate ，因此搭配 line 一起使用，就可以畫出具有區域顏色的折線圖，相當的有意思。

2014年11月14日

SVG D3.js - 座標軸 ( Axis )

Posted by oxxo on 11/14/2014 12:45:00 上午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201411/svg-d3-04-axis.html

摘要：
藉由上一篇了解了最常用的 scale，再來就要談談座標軸 Axis，在 D3.js 裏頭，座標軸與 scale 幾乎是如影隨形地出現，畢竟既然是要用來顯示座標，就一定會出現在畫面裡，也因此必須要用 scale 才能夠讓座標軸按照比例大小擺放。至於什麼是座標軸 Axis 呢？很簡單就是水平 x 軸和垂直 y 軸，上面會有刻度，前使用 illustrator 慢慢刻畫刻度，常常必須刻到天花地老，如果會用 Excel，就可以讓 Excel 產生大家都會的一百零一種刻度，今天利用 D3.js，我們就可以自己做出自己的圖表刻度。

2014年11月12日

SVG D3.js - 定義比例 ( scale.linear() )

Posted by oxxo on 11/12/2014 10:57:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201411/svg-d3-03-scale-linear.html

摘要：
當我們面對一個折線圖或長條圖的長寬，超過電腦視窗的畫面大小，就必須用比例的方式讓圖表等比例縮小來適合寬度，在 D3.js 裏頭，就要使用 scale 這個方法來達成 ( 舖梗舖好長~ XD )，首先來看一下 scale 要怎麼來使用，Scale 有分成兩大類，第一類是「Quantitative」，主要以數字或日期為比例縮放的依據，第二類是「Ordinal」，則是以自訂的名稱或標籤為縮放依據，這篇會先介紹第一類「Quantitative」，接著再搭配座標軸「Axis」介紹第二類「Ordinal」。

2014年11月4日

SVG D3.js - 繪製線段

Posted by oxxo on 11/04/2014 12:34:00 上午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201411/svg-d3-02-line.html

摘要：
在之前的 SVG 研究之路 (4) - Path 基礎篇 裡頭，詳細的列出了 SVG path 的繪製方式，現在我們要來利用 D3.js 的 line() API ，來完成線段 ( line ) 的繪製，且有別於單純的 SVG 產生 path 不容易放入數據，D3.js 可以根據我們的數據，自動產生對應的線條。

2014年11月1日

SVG D3.js - 淺談 D3.js 的資料處理

Posted by oxxo on 11/01/2014 11:15:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201411/svg-d3-01-data.html

摘要：
D3 畢竟是把數據做視覺化呈現的 library，所以最強的就在於它的資料處理能力，有別於一般我們要塞資料進 HTML，或要利用資料自動長出元素，不外乎都要用到 for 迴圈或是 each 的方式來進行，但對於 D3 來說，這些基本的功能已經全部包辦，甚至連同亂數和排序都內建在裏頭，因此，再進行利用 D3 畫圖之前，一定要先搞懂處理數據的方式，所以這篇就來嘗試一下 D3 資料處理的基本功能，也作為學習 D3 的一個紀錄。

SVG D3.js - 起手式

Posted by oxxo on 11/01/2014 01:08:00 上午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201410/svg-d3-info.html

摘要：
雖然說對 D3 的印象是從圖形的表現開始，但 D3 真正的強項卻是在它的資料處理 ( data )，也因為能夠用很簡單的方式處理資料，將資料餵給 HTML 或 SVG，才能夠輕鬆的長出漂漂亮亮的圖形，也才更能將心力放在設計一個完美個圖表上，而 D3 的 data 也不見得只適用在 SVG 的圖形產生，只要是 HTML 的 DOM 也都可以藉由這個方式作成，例如以往要將一百個一千個資料放到 DOM 裡或產出 DOM，必須用上 for 迴圈或是 each 的方式，這部分 D3 也幫我們都解決掉了，真是相當的方便。

SVG D3.js - 初體驗

Posted by oxxo on 11/01/2014 01:08:00 上午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201410/svg-d3-js.html

摘要：
D3.js 是一個用動態視覺化顯示資料的 js library，透過使用 HTML DOM、SVG 在網頁上顯示資料，在接觸 SVG 的時候不斷的接觸到 D3 的資訊，原本想說要先來玩玩 snap.svg 的，但由於大家都在談 D3，於是就也踏上這條不歸路，因為 D3 主要的應用會以 SVG 來表現，趁著之前 SVG 31 天教學的文章剛寫完，對 SVG 印象猶新之際，打鐵趁熱學學 D3。
訂閱： 文章 (Atom)