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~。