D3大型可視化視圖--US Trade Deficit Data Visualization--分析（data.js）

這個大型可視化視圖的地址：

http://www.brightpointinc.com/united-states-trade-deficit/

US Trade Deficit Data Visualization 可視化視圖共有六個js文件，分別爲data.js，event.js，_buildChords.js，globals.js，initialize.js和update.js。
我在這裏先進行index.html和data.js的分析。
首頁的

佈局還是很清晰地，作者還在首頁上寫了一個函數 run() 並且調用了initialize() 和 fetchData() 函數。

function run() {
        if (month < 11)month++; 
        else {
            month=0;
            if (year < countriesGrouped.length-1) year++;
        }
        if (month==maxMonth && year==maxYear)  {
            month=0;
            year=0;
        }
        else {
            update(year,month);
        }
    }

run() 函數主要是做一個更新的功能，循環讀取每一年每一個月份的數據，還是很清晰也很好理解的。在這裏調用了一個update()的函數，以後會進行分析。

今天要進行詳細分析的還有data.js，在這個js文件裏，作者定義了fetchData()函數。這個函數主要功能就是進行文件的解析， 源文件提供的解析文件爲csv，我因爲需要加入了json的解析代碼，兩者很相似，在下面會介紹。

function fetchData() {
    //數據爲美國普查局的數據
    //DATA SOURCE:http://www.census.gov/foreign-trade/statistics/country/
    d3.csv("data/ustrade_2000-2013.csv", function(csv) {

        //下面是很常見的數據格式化方法，可以把源數據輸出成想要的格式
        var normalized=[];

        for (var i=0; i < csv.length; i++)  {
            var row=csv[i];

            //把一年十二個月的數據分離，單獨存放在數組中
            for (var y=1; y < 13; y++) {
                if (row.CTY_CODE < "1000") continue;//刪除一些數據集
                var newRow={};
                newRow.Year=row.year;
                newRow.Country=row.CTYNAME;
                newRow.Month=(y < 10) ? "0" + String(y) : String(y);
                newRow.Imports=Number(row["I_" + String(y)]);
                newRow.Exports=Number(row["E_" + String(y)]);
                normalized.push(newRow);

            }
        }

        //將數組組織成層級結構，每一個key是一個層級，d3官網專門講過nest的用法
        countriesGrouped = d3.nest()
            .key(function(d) { return d.Year; })
            .key(function(d) { return d.Month; })
            .entries(normalized);//返回一個key-value數組


        var totalImport=0;
        var totalExport=0;

        //進行一個求和操作，用來在視圖中心顯示，我認爲這裏不難理解
        for (var y=0; y < countriesGrouped.length; y++) {
            var yearGroup=countriesGrouped[y];
            for (var m=0; m < yearGroup.values.length; m++) {
                var monthGroup=yearGroup.values[m];
                for (var c=0; c < monthGroup.values.length; c++) {
                    var country=monthGroup.values[c];
                    totalImport=Number(totalImport)+ Number(country.Imports)*10000000;
                    totalExport=Number(totalExport) + Number(country.Exports)*10000000;
                }
                monthlyExports.push(totalExport);
                monthlyImports.push(totalImport);
            }
        }
        //調用run，開始運行
        run();
        refreshIntervalId = setInterval(run, delay);
    });

}

因爲我的需要，寫了幾句讀取json的代碼：

function fetchData(json) {
    d3.json(json, function(json) {

        var normalized=[];

        for (var i=0; i < json.length; i++)  {
            var row=json[i];

            var newRow={};
            newRow.Year=String(row.bizdate).substr(0, 4);
            newRow.Month=String(row.bizdate).substr(4, 6);
            newRow.Name=row.name;
            newRow.Sqty=row.sqty;
            newRow.Profits=row.profits;
            normalized.push(newRow);
        }
}

雖然有一些區別，但是大致思路還是一樣的。
接下來我會慢慢對所有的函數進行分析 O(∩_∩)O~。