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