为地图各区域添加颜色.pdfVIP

为地图各区域添加颜色

为地图各区域添加颜色

摘要：这一节主要介绍了为地图根据不同区域添加颜色的方法，并给出相关代码。

关键词：JSON；等值区域；加载数据

1等值区域

等值区域指的是不同区域填充了不同值（深或浅）或颜色，以反映关联数据值的地图。

在，人们常说的“红州，蓝州”等值区域地图，展示的是各个州对共和和民主的倾向，特别是

在选举的时候很常见。但等值区域地图可以基于任何值而不光是派倾向来生成。

这些地图也是使用D3生成最多的地图类型。尽管等值区域地图非常有实用价值，但也不要忘了它存

在一些固有的感知局限性。因为这种图使用面积来编码值，人口密度低而面积大的州（比如内华达）从视

觉上会显得比实际人数多。标准的等值区域图不能恰当地体现人均指标，内华达州太大了，而特拉华州又

太小了。可是，这种图却能很好地标识地理区域，特别是在地图中，看起来真的非常好看。

2创建比例尺

首先，创建一个比例尺，将数据值作为输入，返回不同的颜色。这是等值区域地图的核心所在：

varcolor=d3.scale.quantize()

.range([rgb(237,248,233),rgb(186,228,179),

rgb(116,196,118),rgb(49,163,84),rgb(0,109,44)]);

以量化的比例尺函数作为线性比例尺，但比例尺输出的则是离散的范围。这里输出的值可以是数值、

颜色（这里就是），或者其他你需要的值。这个比例尺适合把值分类为不同的组（bucket）。我们这里只分

了5个组，实际上你想分几个就分几个。

3加载数据

注意，这里只指定了输出范围，而没有指定输入值域。接下来，要加载一些数据。我们有一个文件叫

us-ag-productivity-2004.csv，内容类似如下所示：

state,value

Alabama,1.1791

Arkansas,1.3705

Arizona,1.3847

California,1.7979

Colorado,1.0325

Connecticut,1.3209

Delaware,1.4345

...

这些数据来自农业部，报告内容是2004年每个州的农业生产力指标。这些值的单位是以1996年阿

拉巴马州的生产力指标为基准（1.0），更大的值表示生产力更高，更小的值表示生产力更低。接下来我们

就利用这些数据生成一个漂亮的各州生产力地图。

要加载这些数据，使用d3.csv()：

d3.csv(us-ag-productivity-2004.csv,function(data){...

然后，在回调函数中，要设置彩色的量化比例尺的输入值域：

color.domain([

d3.min(data,function(d){returnd.value;}),

d3.max(data,function(d){returnd.value;})

]);

这里用到了d3.min()和d3.max()来计算并返回最小和最大的数据值，因此这个比例尺的输出值域是

动态计算的。

4加载JSON地理数据

接下来，跟前面一样，加载JSON地理数据。但不同的是，在这里我想把农业生产力的数据合并到G

eoJSON中。为什么？因为我们一次只能给元素绑定一组数据。GeoJSON数据肯定必不可少，因为要据以

生成路径，而我们还需要新的农业生产力数据。为此，就要把它们混合成一个巨大的数组，然后再把混合

后的数据绑定到新创建的path元素。

d3.json(us-states.json,function(json){

//混合农业生产力数据和GeoJSON

//循环农业生产力数据集中每个值

for(vari=0;idata.length;i++){

//取得州名

vardataState=data[i].state;

//取得数据值，并从字符串转换成浮点数

vardataValue=parseFloat(data[i].value);

//在G