代碼下載鏈接：http://download.csdn.net/detail/jsgaobiao/9534463
Ø 【概述】
本次大作業我們選取了第一個題目：基於統計方法的數據分佈的圖形顯示。我們從各省市統計局公佈的數據中搜集了包括人均GDP（元）、人口密度（人/平方公里）、PM2.5年平均濃度（微克/立方米）、年旅遊收入（億元）的數據並且做了統計和可視化。
我們認爲這些數據可以一定程度上反映出一個省或直轄市的經濟（人均GDP）、社會（人口密度）、環境（PM2.5年平均濃度）和文化產業（旅遊收入）的發展水平。我們所呈現出來的兩張圖表也可以讓用戶直觀的從地理位置和對比中，瞭解省市間發展的差異性以及每個省市自身的發展結構，並且能夠輕鬆地尋找到用戶感興趣的區域。
下面我們將分步驟詳細地講述我們完成作業的流程以及其中涉及到的算法與技術，也希望借這個報告記錄下我們學習和使用這些知識技能的過程。
Ø 【數據的選取】
本次作業採用的數據來源於各省市統計局的公報，包含了各省市、自治區、特別行政區的人均GDP（元）、人口密度（人/平方公里）、PM2.5年平均濃度（微克/立方米）和年旅遊收入（億元）。其中，澳門特別行政區和臺灣的PM2.5年平均濃度、年旅遊收入，以及香港特別行政區的年旅遊收入缺少官方數據，因此我們採用了新聞報道中的統計數據用於研究。
爲了嘗試不同組織方式的數據處理，我們使用了tsv和json兩種組織形式的數據文件用於兩種不同的可視化方案。其中tsv類型的數據文件中，所有的數據條目按照group（數據類型）、id（省份名稱）和value（數值）進行組織，而json文件中，每個數據對象表示了一個省份實體，當中包括id（省份名稱）以及GDP、人口密度等不同屬性的數據。
Ø 【數據可視化】
一、 環境與技術
本次作業的可視化採用了網頁端的實現方式，它具有跨平臺和輕便的特點。下面介紹了我們整個項目中涉及到的開發技術：
l 搭建HTTP本地服務器：我們希望用戶通過瀏覽器打開HTML文件直接查看可視化的結果，不過這樣有一些侷限性。一旦我們需要從其他文件中加載數據，由於瀏覽器內建的安全機制，這樣的行爲會受到限制。爲了繞開這個安全機制，我們使用Python搭建一個本地的HTTP服務器，用該服務器來維護HTML頁面和數據文件，而不是直接從文件系統中加載。
本機採用了Python3.4.2的環境，只需要運行“python –m http.server”命令即可啓動一個HTTP服務器，默認端口是8000.如果你採用了較老版本的Python，可以嘗試命令“python–m SimpleHTTPServer 8000”即可。
l 網頁前端：HTML +CSS，這兩樣“利器”的搭配，可以讓我們方便的構建出網站和各種可視化元素的樣式。
l 數據可視化：D3.js，它是一個JavaScript庫，可以通過數據來操作文檔。D3可以通過使用HTML、SVG和CSS把數據鮮活形象地展現出來。D3嚴格遵循Web標準，因而可以讓你的程序輕鬆兼容現代主流瀏覽器並避免對特定框架的依賴。同時，它提供了強大的可視化組件，可以讓使用者以數據驅動的方式去操作DOM。
二、 地圖的可視化
我們的第一部分可視化使用了地圖的形式，通過將各行政區域繪製深淺不同的顏色，表示各項數據的多少。通過選擇地圖下面的選項可以切換顯示不同的數據分佈。
從這樣的圖中我們可以直觀的看出人均GDP和地理位置分佈的關係，東部沿海省份的經濟發展水平明顯好於中西部地區。重慶作爲一個直轄市，在中部地區的確也屬於發展比較好的。另外，內蒙古在這張地圖上顯得比較“獨樹一幟”，不過結合人口密度分佈圖來看就可以發現，內蒙古因爲人口密度特別低，所以人均GDP纔會比較高。
再通過PM2.5的濃度圖和旅遊收入的分佈圖，我們還可以發現，空氣污染較爲嚴重的地區主要分佈在以京津冀爲核心的華北平原，比較符合我們日常生活中的直觀感受，而新疆地區的PM2.5濃度也處於一個較高的水平，可能是因爲土壤沙漠化的影響。
下面介紹具體的算法：
首先介紹一下地圖繪製的方式：我們採用了SVG（可縮放矢量圖形），它是W3C頒佈的一種成熟標準，用於規範網絡和移動平臺上的交互圖形。它能夠很好的與CSS、JavaScript等瀏覽器技術結合起來。SVG的圖像基於矢量而非像素，因此具有良好的伸縮性，使得它在任意尺寸下都不會丟失精度。
爲了繪製中國地圖，我們採用了D3的線條生成器，事實上，它是使用svg:path元素實現的。我們在china.js中記錄下了所有省份區域邊界的頂點座標，並通過創建的path元素對線條圍出的區域進行相應顏色的填充，同時設置了與鼠標事件的交互。當用戶將鼠標移動到某個省份區域之上時，會漸變地彈出提示框，標明瞭省份名稱和具體的數據信息。
爲了使得數值的區域顯示不同深淺的顏色，我們先將數據進行了排序，然後根據排序的名字對colormap中的顏色進行插值。由於篇幅限制，此處就不附上代碼了。具體可以參考index.html中的註釋。
三、 條形圖可視化
爲了讓數據的呈現更加多樣化，並讓用戶可以方便地比較地區間的差異性，我們除了第一部分的地圖可視化之外，還做了條形圖的可視化。這一部分呈現了按照各個領域數據排名爲標準進行度量的條形圖。
爲了方便比較，我們設置了Multiples和Stacked兩種顯示方式，分別可以方便用戶比較單項指標之間的差異和整體指標的差異程度。
可視化界面的下方有兩排選擇按鈕，其中第一排選擇按鈕可以選擇可視化的方式是Multiples（上圖）或者Stacked（下圖）。第二排選擇按鈕則可以選擇顯示哪些數值的項目。
條形圖的可視化中，每個條形的高度與這個省份某個數值的排名成正比。我們選擇通過排名而不是具體的數值（如GDP）進行可視化是因爲不同屬性間的數值差異可能很大。例如GDP的數值幾乎都在萬或者十萬的量級，而PM2.5的年平均濃度都在100以內。爲了在可視化中較好的體現出每個省份各種屬性所佔的“比重”，以及避免某些省份在某個屬性的數值過高而導致其他省份的差異難以呈現，所以我們選擇了按照各個屬性的排名進行可視化。
從這樣的圖中可以看出一個地區包括了經濟（人均GDP）、社會（人口密度）、環境（PM2.5年平均濃度）和文化產業（旅遊收入）的整體社會發展水平。其中，北京、江蘇、上海三地位列前三，而西藏、甘肅兩地的發展則比較滯後。
除此以外，通過比較各個顏色在一個省份條形圖中所佔的比例，也可以看出一些特徵。例如，條形圖高度接近的廣東和遼寧，他們各項指數比例差異主要體現在廣東的旅遊收入（綠色）較高，人口較多（紅色），而遼寧的PM2.5年平均濃度（灰色）佔了更大的比例。這一現象體現出了遼寧是以高污染的重工業爲主的發展模式，而廣東的發展模式則更加的“環境友好”。
Ø 【結語】
通過上述的說明以及截圖，我們可以發現這些數據都被直觀地呈現出來。到目前爲止，我們已經生活在大數據的包圍之中，然而大量的數據難以被人們所理解，想要迅速地提取數據中的重要信息、洞悉數據中所蘊含的趨勢，數據可視化必不可少。
這次的作業是我們第一次對數據可視化進行較爲系統的學習和使用，讓我們習得了很多新的技能，也讓我們更清楚的認識到數據可視化的強大之處。當我們所寫的代碼將大量的數據繪製成漂亮的圖像時，我們覺得數據可視化不僅僅是一門科學，也是一門藝術。