最近，國內湧現出了不少資料分析平臺產品，例如魔鏡和資料觀。

這些產品的目標應該都是self service的BI，利用視覺化提供資料探索的功能，並且加入機器學習和預測的功能。它們對標的產品應該是Tableau或者SAP Lumira。因為筆者曾經為Lumira開發資料視覺化的功能，對這一塊很感興趣，於是就試用了一下這些產品，感覺這些產品似乎還有很大的差距，於是就想自己用開源軟體搭一個簡單的資料分析平臺試試看。

程式碼在這裡 https://github.com/gangtao/dataplay2

廢話少說，上架構圖：

列一下主要用到的開源軟體：

伺服器端：

flask http://flask.pocoo.org/ 輕量級的Python Web框架pandas http://pandas.pydata.org/ Python的資料結構和資料分析工具包，提供資料處理的Wrangling的功能sklearn http://scikit-learn.org/ 非常流行的Python機器學習包，依賴於numpy，scipy和matplotlib

客戶端:

jquery這個就不用介紹了reactjs http://facebook.github.io/react/ facebook開發的js UI框架，基於元件（component）而非mvcd3js https://d3js.org/ 資料驅動的DOM操縱庫，可以建立豐富的資料視覺化呈現。echarts http://www.oschina.net/p/echarts 百度開發的資料視覺化庫，基於canvas技術，功能豐富。實為中國開源專案的翹楚。bootstrap http://getbootstrap.com/ twitter開發的前端框架，非常流行。jquery datatables http://www.datatables.net/ 非常實用的基於jquery的表格控制元件bootstrap fielinput https://github.com/kartik-v/bootstrap-fileinput HTML5檔案上傳控制元件papaparse https://github.com/mholt/PapaParse CSV檔案的JS解析requirejs http://www.requirejs.org/ JS 依賴管理select2 https://select2.github.io/ 基於jquery的select控制元件

開發構建工具

nodejs https://nodejs.org/en/ 這個應該也不用介紹babel https://babeljs.io/ javascript的編譯器，支援把ES6的程式碼轉換成瀏覽器可執行的程式碼，這裡主要是為了支援reactjs使用的jsx的編譯。

好了，羅列了這麼多的開源軟體後，我們看看dataplay2的功能，然後看看這些開源軟體起到的作用和我為什麼要選擇它們的原因。

在介入正題之前，我們先聊聊dataplay2這個名字，dataplay很容易理解，我希望建立一個簡單易用的資料平臺，使用起來像玩一樣的愉快。但為什麼是2呢？因為這個軟體很二麼？當然不是。其實我之前寫過一個dataplay的，當時的架構略有不同，為了使用R裡的ggplot來支援語法驅動的視覺化方案，我後臺使用了R/Python的橋接方案，前臺的視覺化操作會生成ggplot的命令，好處是可以有一個統一的資料模型和語法來驅動資料的視覺化分析，便於使用者進行資料的探索。然而這樣的架構太複雜了，伺服器端既有R又有Python，我自己都看不下去了，後來就放棄了。新的dataplay2使用echart的圖表庫來做視覺化，優缺點我們後面再聊。

好了，執行dataplay2非常簡單，下載github上的code後，建議安裝anaconda，所有的Python依賴就都準備好了，進入dataplay2/package目錄，執行：

python main.py

這裡補充說明一下，因為react的jsf需要編譯，需要執行如下的命令用babel進行jsf的編譯才能執行，具體命令如下：

## install node first## cd package/staticnpm install -g babel-clinpm install babel-preset-es2015 --savenpm install babel-preset-react --savebabel --presets es2015,react --watch js/ --out-dir lib/

另外還需要使用bower安裝客戶端的所有依賴

## install bower first## cd package/staticbower install

大家也可以參考package/static/package.json了解需要的依賴。有時間需要整合一個更簡單的build指令碼來做這些事情。生成的JS檔案在lib目錄下。修改js目錄下的原始檔案，babel會觸發編譯，生成新的js檔案在lib目錄下。

然後在瀏覽器中鍵入 localhost:5000啟動客戶端。

首先我們進入資料選單

在這個頁面，使用者可以瀏覽已有的資料，或者上傳一個CSV檔案，增加一個數據集。

簡單介紹一下這一部分的實現。

資料上傳用到了file input控制元件，資料表用了datatable控制元件。為了方便CSV檔案直接存貯在本地檔案系統中。後臺用pandas對csv檔案進行處理。前臺用Rest API讀取csv檔案，然後用papaparse解析後，展現在資料表中。這樣做純粹是為了方便，因為整個POC是我在假期花了3/4天做的，所以怎麼方便怎麼來。更好的做法是在後臺用Python對CSV檔案作解析。

注意這裡我們對上傳的CSV檔案有嚴格的要求，必須有首行的header，末尾不能有空行。

例如我們選定Iris資料來源做一個Scatter Plot

視覺化這一塊的主要工作是從CSV的表結構資料，根據資料繫結，變形到echart的資料結構。因為echart並沒有一個統一的資料模型，所以每一個型別的圖表都需要有對應的資料變形的邏輯 。（程式碼 package/static/js/visualization ）

現在主要的做了Pie，Bar，Line，Treemap，Scatter， Area這幾種chart。

現在用下來感覺echart優缺點都很明顯，他提供的輔助功能很好，可以方便的增加輔助線，note，存貯為圖形等。但是由於缺乏統一的資料模型擴充套件起來比較麻煩，我希望有時間試用一下plotly，當然highchart是非常成熟的圖表庫，無需證明。

除了基於視覺化的分析功能，還有機器學習的功能。

分類

分類的演算法可以使用KNN，Bayes和SVM。

如果選擇兩個Feature做預測，我用D3畫出了該預測的模型。大於兩個時，就沒有辦法畫出來了。

然後使用者可以選擇基於該模型來做預測。

聚類和迴歸的功能和分類基本一致。

聚類

聚類演算法現在實現了Kmeans

線性迴歸

邏輯迴歸

基本功能就這些了，這裡列出一些我想要實現的功能：

reactjs真不錯，一直不喜歡MVC，reactjs的元件化用起來更舒服，而且開發效率確實高，整個專案我用假期3/4天完成，react功不可沒。dataplay現在的功能還比較弱，但是基本的架構已經搭好了，大家喜歡的話可以拿去擴充套件。我不一定會有時間繼續對它的功能增強，但是歡迎大家和我一起討論。

更新：

因為很多同學反映不能正常執行，我製作了一個Dockerfile，大家可以參考 https://github.com/gangtao/dataplay2/tree/master/docker 來構建。希望可以解決大家不能執行的問題。 Image 已經發布到 docker hub 了 ：https://hub.docker.com/r/naughtytao/dataplay/