D3.JS:Data-Driven Documents


D3.JS:Data-Driven Documents,是本人近期很感興趣的一個js 套件,它提供了一些基於文件操作方式的js函式,讓文件的資料呈現可以透過更能讓瀏覽者理解與互動的方式來使用,大大的提升了可讀性與使用率。

在動手前我們先來知道一下D3到底做了什麼,這邊節錄底部大大書裡的一段話

Fundamentally, D3 is an elegant piece of software that facilitates generation and manipulation of web documents with data. It does this by:

  • Loading data into the browser’s memory
  • Binding data to elements within the document, creating new elements as needed
  • Transforming those elements by interpreting each element’s bound datum and setting its visual properties accordingly
  • Transitioning elements between states in response to user input

這邊來看幾個showcase與demo吧

如果想看了解更多,請知道還有什麼更酷的實例請看,想了解更深請看ACM期刊

Hands on with D3js

接著我們來動手玩玩D3js吧,先到官方Github下載最新的code,使用上很簡單只要加入下面這段即可

‘’’js

‘’’

這邊我們簡單先做出一個表格再來跟大家說明

結語

會寫這篇其實跟以前在學時期玩過一陣子splunk有關,基本上splunk是一個收集記錄(log)或是任何資料(data),經過處理與計算後以圖像或表單的方式來讓使用者更能看出一些現象的趨勢與探討出一些指標做出預測。Acer使用splunk做出了SOC的安全預測中心的一套偵測系統,而e-Travel(歐洲前十大網路旅行社)也透過splunkf去將它自有的巨量資料即時分析與搜尋的功能除了減少人工作業的時間與人力外,也降低了營運的成本。

而splunk這套系統除了本身索引建置與查詢極具戰力之外,早期splunk最引人樂道的是他將資料轉換成更容易了解的互動式視覺資料,這讓使用者在從巨量(big data)中更能發現出所期望預測的結果或是一些因素,當我們都在ㄧ昧的要求做到更快速的查詢與建立更完善的資料的同時,是否能透過其他方式來找出更值錢的且更能讓看的人了解的資料是更加重要的。

對於D3有興趣的人可以參考下面的讀物,是中文的書籍以及他線上免費閱讀的原文版本(作者真的很佛心)


作者: Blackie
版權聲明: 本站所有文章除特別聲明外,均採用 CC BY 4.0 許可協議。轉載請註明來源 Blackie !
 上一篇
D3.JS:Intro D3.JS:Intro
D3.js是一個JavaScript library,是 Data-Driven Documents只要有資料就可以產生文件,透過本身資料的儲存方式來轉換成圖像的方式呈現,提供不同的視角來檢視你的資料,並從中強化各種視覺呈現的效果與互動.D
2014-08-27
下一篇 
Emmet LiveStyle hands on Lab Emmet LiveStyle hands on Lab
想必大部分人都知道Emmet是一套在SublimeText上Toolkit,而今天要介紹的是旗下的另外一套超方便的Emmet LiveStyle工具,讓你再透過瀏覽器修改檢查時就完成開發項目的調整,而這也是前端開發必學項目之一。
  目錄