D3.JS:Intro


D3.js是一個JavaScript library,是 Data-Driven Documents只要有資料就可以產生文件,透過本身資料的儲存方式來轉換成圖像的方式呈現,提供不同的視角來檢視你的資料,並從中強化各種視覺呈現的效果與互動.D3.js 可僅透過JavaScript, HTML, SVG and CSS就可以達到圖像化的資料呈現並且可跨瀏覽器支援.

What is D3.js?

現在我們就直接看一個Live Demo 感受一下魅力吧!

另外推薦一個台灣人以台灣地圖與資料來呈現空間與數據關係的範例

Why need it?

為什麼我們會需要D3.js這樣圖像化地library勒?當我們處於一個大資料的時代,想要直接閱讀資料從中找出資訊是很不容易的事情,這是後我們可以透過圖像化的方式讓我們用看的就能感覺出他的重要性或差異,我們從下面這個範例來解說一下

Setup and Demo

看完一串說明後,就讓我們來hand on一下吧

安裝上只要先include D3.js的js檔案

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

接著就來個簡單的Select吧

JS Bin

就這樣透過select我們輕鬆地幫p元素換了顏色

剩下的我們就明天再繼續吧


作者: Blackie
版權聲明: 本站所有文章除特別聲明外,均採用 CC BY 4.0 許可協議。轉載請註明來源 Blackie !
 上一篇
Coding Dojo, Kata, Wasa, and Randori Coding Dojo, Kata, Wasa, and Randori
最近很紅的幾個名詞,而且看活動蠻好玩的,了解的過程順便整理一下筆記
下一篇 
D3.JS:Data-Driven Documents D3.JS:Data-Driven Documents
D3.JS:Data-Driven Documents,是本人近期很感興趣的一個js 套件,它提供了一些基於文件操作方式的js函式,讓文件的資料呈現可以透過更能讓瀏覽者理解與互動的方式來使用,大大的提升了可讀性與使用率。
2014-08-26
  目錄