数据可视化基础第十章-地理数据的可视化

1第十课地理数据的可视化学习目标学习目标了解墨卡托地图投影了解点，线，区域的地理数据的可视化方法及其注意事项实现常用的地理数据可视化能能力目标能够根据数据选择合适的地理数据的可视化方法能够绘制地图能够完成地图上的常见可视化图形2地图投影现实世界中的数据中经常包括位置信息，这里的地理位置特指真实的人类生活的空间。对这类数据，信息的载体和编码方式都非常独特，也是可视化中非常重要的一部分。在广泛使用了移动设备以及传感器之后，每时每刻都产生更多海量的地理空间数据。为我们进行可视化提出了更多的挑战。地图是最常用的最简单的探索地理位置数据的方法,可以把所有数值都放到地理坐标系中。这个地理坐标系就关系到地图投影的问题。因为地球是球形的，我们需要将三维的地理坐标转换到二维的屏幕坐标。有多种投影的方法，最常见的就是墨卡托投影。墨卡托投影有成为正轴等角圆柱投影，由荷兰地图学家墨卡托与1569年发明。在这种投影生成的二维视图中，经线是一组竖直的等距离平行直线，纬线是一组垂直于经线的平行直线，相邻纬线之间的距离由赤道向两级增加大。但是投影中每个点上任何方向的长度比均相等，及没有角度变形。但是面积变形明显，赤道上的保持原始面积，离赤道越远的面积变大越多。点数据的可视化点数据描述的对象是地理空间中离散的点，具有经度和纬度的坐标，但是不具备大小尺寸。这是地理数据中最常见最基本的一种，如地标性建筑，区域内的餐馆等。常见的点数据的可视化方法就是直接根据坐标在地图上画点，如图是百度地图上标注的南京地区的美食地点。3对于数据对象的其他属性，可以通过其他视觉编码的方式表示，比方说颜色和大小可以表示分类型和数值型数据。下图就是旧金山湾区的Airbnb房费，颜色代表房屋的种类，圆点的大小代表房费的高低以上例子中数据都是离散的，在数据量非常大的时候，会产生重叠。处理的一种方法可以将地图分割成小块，采用合适的重建或是差值算法讲数据转换成连续的形式呈现，例如以下的热力图表示世界各地实时发Twitter的消息数量。4上面的方法抽象的显示统计数据而不是每一个数据点。绘制每一个数据点可以让可视化展示更多数据细节，但是需要调整数据点的位置来解决重叠问题，常见的方法是将重叠的点在一个目标位置周围小范围内随机移动。下图就是用类似的算法可视化芝加哥和纽约地区的各种族地域分布。通过半透明的模式，可以清晰的辨别不同种族的聚居区域，也了解到聚居区交接的区域通常存在不同种族混居的情况。5线数据的可视化线数据的可视化地理位置空间数据中，线数据通常指连接两个或更多地点的线段或者路径。线数据具有长度属性，常见的例子是地图上两点之间的行车路线。线数据也可以是一些自然地理对象，例如河流等。最基本的线数据可视化通常采用绘制线段来连接相应的地点。如图就是百度地图展示从东南大学四牌楼校区到九龙湖校区的行车路线。其中还采用不同的可视化方法达到更好的效果，例如颜色，线型，宽度，标注等表示数据的属性。这里用红色，黄色和绿色表示路线的拥堵情况，不同的线型代表不同的铁路，地铁，公路交通的路线。在线数据在地图上展示时，要注意减少重叠和交叉的情况，增加可读性。比如在有限的地图上显示大量的线数据会造成严重的视觉混淆。一种处理方法就是，如果是理解数据的整体模式，可以简化线条，聚类为若干类线束来展示。如图是美国国内飞机航线的可视化图，用颜色表示飞机的型号，透明度表示航班的数量，尽管有大量线段重叠和交叉，但是整体反映了美国国内航班的地理分布特征。6在有的实际情况中，需要清晰的呈现每一条连线，并进行信息检索。此时，如果有大量线条重叠和交叉就阻碍了信息检索的效率，甚至变得不可行。这种情况下需要通过改变连线的形状和布局减少连线的重叠和交叉。通常称之为连线绑定。按照线的走向，将相互接近的部分合并起来，减少屏幕上的连线数量和交叉情况。人们很早就开始使用这种方法，如图是1864年法国葡萄酒出口图，有向连线从法国出发到相应的进口地区，线的宽度表示出口数量，连线按照走势被绑定在一起。7区域数据的可视区域数据的可视化区域数据包含比点数据和线数据更多的信息。区域是一个二维的闭合空间，可以是国家，省，或者湖泊或是街区，可视化区域数据的目的是为了表现区域的属性，如人口密度，人均收入等，最常用的方法是用颜色表示区域的属性。OChoropleth地图Choropleth地图是假设数据的属性在一个区域内是平均分布的，因此用同一种颜色来表示。如图是全球糖尿病患病率的可视化图，根据国家区域来查看各地的糖尿病的患病率。Choropleth地图是依靠颜色来表示数据的，在数据的值域大或是数据类型多样的时候，选择合适的颜色非常重要。这里推荐为地图提供配色方案的工具：ColorBrewer。可以提供配色建议。8Choropleth地图最大的问题是，数据分布和地理区域大小的不对称。通常大的数据集中在人口密集的区域，而人口稀疏的地区却占用的大多数的屏幕空间。经常使用户对数据产生错误理解。因此产生了Cartogram地图。OCartogram地图Cartogram地图可视化是按照地理区域的属性值，对各个区域进行适当的变形处理，克服Choropleth地图对空间使用的不合理之处。例如，下图就是根据世界人口重新绘制的视觉地图，可以看到中国和印度两个人口大国占据了更大的空间，而澳大利亚，加拿大等人口较少的国家，面积缩减得非常多。O规则形状地图人们也尝试用更简单的几何形状来表示地图上的区域，让用户更容易判断域面积的大小。例如矩阵或是圆形，这种规则的几何图形使用户更容易判断面积的大小。如图是纽约时报绘制的2008北京奥运会奖牌排名的可视化图表。圆表示国家，圆的大小表示所获得的奖牌的数量，颜色表示国家所在的大洲。能够非常直观的看到货奖牌最多的国家和地区。9地地理数据可视化的应用地理信息数据可视化在日常中的广泛应用，尤其是移动互联网和物联网的快速发展，地理位置更加容易获得，我们在日常中通过地图进行导航，寻找房屋，打车或是寻找共享单车，包括旅游等等中，都离不开地图以及地图上可视化展示。在大量网页或是应用中，都会用地图来作为查询或是搜索的方式。这里对标示的设计和展示需要合理的利用视觉编码的方式。同样，科学研究，经济，人口，就业，教育，医疗和环境研究中也会大量使用地图和地理信息数据，下图是经济合作与发展组织(OECD)针对各个地区的相关指数进行分析，组成完整的数据分析系统。地地图绘制演示ONGeoJSON是描述地理信息的一种基本格式，我们着重介绍这种格式。GeoJson的地图格式文件GeoJSON是用于描述地理空间信息的数据格式，其语法规范都是符合JSON格式的，只是对其名称进行了规范，专门用于表示地理信息。GeoJSON里的对象也是名称/值对的集合，名称总是字符串，值可以是字符串，数据，布尔值，对象，数值，null等等。我们可以从已有的GeoJSON文件中看到，这里整个中国地图就是一个特征集合，每个特征，都有对应的properties和geometry数据。我们可以从网上搜到到绝大部分国家和地区的GeoJSON文件，例如一些网站也提供常用的GeoJSON文件供下载。http:///static/tools/atlas/wordpress/668/如果还找不到需要的文件，可以到/网站上获取原文件，自行转换并简化完成。这个过程比较复杂，我们就不详细阐述了。绘制中国地图中国地图一般是这样表示的，一个大的矩形框里，画上中国大陆和港澳台的，矩形的右下角有一个小框，绘制南海诸岛。我们只通过GeoJSON文件绘制大陆和港澳台地区。绘制地图首先要定义地图的投影，我们介绍了墨卡托投影方式，可以用d3的方法定义投影方式//声明投影方式墨卡托投影varprojection=d3.geoMercator().center([109.5996,35.6396])//参考json数据中的properties.cp,现在将陕西作为中心点.scale(800)//后续放大缩小地图使用projection.cale(xxx).translate([width/2,height/2]);varpath=d3.geoPath(projection);这里d3.geoMercator是投影方法，center是地图的中心位置，目前我们设置为陕西的中心位置坐标。Scale和translate是设置缩放量和平移量。然后通过geoPath生成对应的地理路径生成器。。然后可以加载数据，读取json文件，其中data.features是各省的轮廓数据，添加足够数量的<path>元素，每一个<path>中绘制一个省的路径。并在每个省里填充不同的颜色。d3.json("../data/china.json",function(error,data){if(error){throwerror}g.selectAll(".map-feature").data(data.features).enter().append("path").attr("class","map-feature").attr("d",path).style("cursor","pointer").attr("fill",function(d,i){returncolor(i);最终生成的地图如下。绘制地铁站点在地铁上绘制点是非常常见的地图可视化方法，我们通过绘制上海地铁站的位置，来说明如何在地图上绘制点。首先和上面的例子类似，我们先绘制上海地图，获取上海的GeoJSON数据，用墨卡托投影的方法完成绘制。//声明投影方式墨卡托投影varprojection=d3.geoMercator().center([121.528,31.2966])//参考shanghai.json中的properties.cp,现在将杨浦区作为中心点.scale(31000)//后续放大缩小地图使用projection.cale(xxx).translate([width/2,height/2]);varpath=d3.geoPath(projection);d3.json("../data/shanghai.json",function(error,data){if(error){throwerror}g.selectAll(".map-feature").data(data.features).enter().append("path").attr("class","map-feature")..attr("d",path)根据获取的上海一号地铁站的经纬度信息表，我们这里简单放到html里面//抓取一号线的各个站点坐标varlineOne=[{name:'富锦路',lnglat:[121.41994771125192,31.394206890381277]},{name:'友谊西路',lnglat:[121.42330658143267,31.38308882623357]},{name:'宝安公路',lnglat:[121.42628952009215,31.371680032971014]},{name:'共富新村',lnglat:[121.4294548390692,31.357221366445227]},然后完成点的绘制，这里最主要的是通过投影函数，把经纬度映射为坐标位置g.selectAll(".map-station").data(lineOne).enter().append("circle").attr("class","map-station").attr("fill","black").attr("r",2).attr("cx",function(d){//这是知识点returnprojection(d.lnglat)[0]}).attr("cy",function(d){returnprojection(d.lnglat)[1]})完成的效果图绘制地铁线除了使用GeoJSON，还有很多第三方插件提供了地图服务。我们这里就用Leaflet插件在上图的基础上，如果要把各个站点链接起来，完成地铁线路的绘制，需要在上图基础上增加一个线路径path,。注意经度对应x轴，纬度对应y轴。varlinePath=d3.line().x(function(d){returnd.pxLng}).y(function(d){returnd.pxLat}).curve(d3.curveCatmullRom.alpha(0.5));//绘制线g.append("path").datum(lineOne).attr("fill","none").attr("stroke","black").attr("stroke-width","2").attr("d",function(d){vartemp;d.forEach(function(d){temp=projection(d.lnglat);d.pxLng=temp[0]d.pxLat=temp[1]})returnlinePath(d);})为了看清楚路线，我们放大了地图的显示。使用Leaflet加载地图说明。Leaflet是一个开源的JavaScript库，兼容移动端提供交互地图服务。只需要下载库文件，并加载到HTML中即可。<!--/--><!--/reference-1.0.3.html--><scripttype="text/javascript"src="../js/leaflet/leaflet-src.js"></script><scripttype="text/javascript">然后通过几行代码就可以完成一个地图varcp=[33.56,108.98];varmap=L.map('map',{zoomControl:false});map.setView(cp,4);L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{attribution:'©<ahref="http://osm.org/copyright">OpenStreetMap</a>contributors'}).addTo(map);/其中，L.map()就是获得一个<divid=“map”></div>，把地图数据绘制其中，setview用来设置地图的中心点的经纬度和比例尺，，作为用户的视图区域。然后L.titleLayer是矢量瓦片地图，用对应的URL上找到对应的z，y,x。而s是分布式服务器快速选取，一般是1-4，最后tileLayer图层要addTo(map)加载到地图区域去。我们这里用的而是openstreetmap。还可以方便的在地图上增加标注和绘制点。通过marker或是cy