使用D3 Geo模块画澳大利亚地图

数据
数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。因此做数据可视化前需要想明白2件事：

  • 你有什么数据？
  • 你要传达什么信息？

本文中的示例中，将以不同的颜色显示澳大利亚不同地区的客户数量。

因此，首先需要澳大利亚的地图数据，D3中的Geo模块可以处理GeoJSON格式的地理数据。（GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。参见：http://www.oschina.net/translate/geojson-spec?cmp）

开发者可以从Natural Earth（http://www.naturalearthdata.com/）获取到全球所有的地理数据，使用其地理数据需要 注意2点：

  • 其有3种比例的数据1：10m，1：50m和1：110m。1：10m比例的数据拥有更细节的数据，只有它才有州（省）的信息。
  • 其数据不是GeoJSON格式的（Shapefile），需要通过GDAL(Geospatial Data Abstraction Library）库转换为GeoJSON格式。

在Mac下安装GDAL非常方便，感谢Homebrew：

Shell代码  

  1. brew install gdal

然后通过如下命令就可以Shapefile中的澳大利亚的数据提取出来。

Shell代码  

  1. ogr2ogr -f GeoJSON -where "sr_adm0_a3 = ‘AUS‘" aus.states.json 10m_cultural/ne_10m_admin_1_states_provinces_lakes_shp.shp

是一个类似下文这样的一个GeoJSON格式数据。

Javascript代码  

  1. {
  2. "type": "FeatureCollection",
  3. "features": [
  4. {
  5. "type": "Feature",
  6. "properties": {
  7. ...
  8. },
  9. "geometry": {
  10. "type": "Polygon",
  11. "coordinates": [
  12. [
  13. ....
  14. ]
  15. ]
  16. }
  17. },
  18. ......

顺道提一下，Geo数据一般都比较大，尤其是GeoJSON格式下的数据，像上面生成的数据就有741KB，这对于Web应用来说已经是很大的一个数值。开发者可以通过Topojson（https://github.com/mbostock/topojson/wiki）压缩数据。Topojson是GeoJSON的一个扩展，使用方式大致相同，这儿就不讲Topojson了，下图可以让开发者大致了解一下三种格式下数据的大小：

画图

有了数据，接下来就开始画图。D3画图都有一定的套路，首先需要确定把矢量图SVG放到那儿，以及图的大小

Javascript代码  

  1. var width  = 960;
  2. var height = 580;
  3. var svg = d3.select("#geo_distribution").append("svg")
  4. .attr("width", width)
  5. .attr("height", height)
  6. .append("g")
  7. .attr("transform", "translate(0,0)");

接着，需要创建一个路径生成器，路径生成器可以接收一个投射函数，该投射函数存在的目的是把圆形地球上的经纬度投射到平面的Web界面上。D3自带了各种各样的投射函数（https://github.com/mbostock/d3/wiki/Geo-Projections），本例中使用的是墨卡托投影（http://baike.baidu.com/view/301981.htm?fr=aladdin）。

Javascript代码  

  1. var projection = d3.geo.mercator()
  2. .center([132, -28])
  3. .scale(850)
  4. .translate([width/2, height/2]);
  5. var path = d3.geo.path()
  6. .projection(projection);

然后，根据读取的GeoJSON数据绘制路径：

Javascript代码  

  1. var color = d3.scale.category20();
  2. var states = svg.append("svg:g")
  3. .attr("id", "states");
  4. d3.json("data/aus.states.json", function(error, root) {
  5. if (error)
  6. return console.error(error);
  7. states.selectAll("path")
  8. .data( root.features)
  9. .enter()
  10. .append("path")
  11. .attr("stroke","#000")//路径线颜色
  12. .attr("stroke-width",1)//路径线宽度
  13. .attr("fill", function(d,i){
  14. return color(i);//color函数可根据数据设置每个州板块的颜色，示例中使用的是D3自带的颜色函数。
  15. })
  16. .attr("d", path )
  17. .on("mouseover",function(d,i){//添加鼠标事件
  18. d3.select(this)
  19. .attr("fill","yellow");
  20. })
  21. .on("mouseout",function(d,i){
  22. d3.select(this)
  23. .attr("fill",color(i));
  24. });
  25. });

画到这儿一个澳大利亚的地图就是下面这个样子了：

加点佐料

画了地区之后，纯属个人乐趣，还想画点城市在上面，做法也是一样的， 首先获取Geo数据，还是可以从Natural Earth的地理数据中转换得到（注：转换数据时，开发者可以根据个人爱好过滤掉一些数据，比方说下面的命令中我过滤掉了规模上第四等级以后的小城市）：

Shell代码  

  1. ogr2ogr -f GeoJSON -where "ADM0_A3 = ‘AUS‘ and SCALERANK <=4" aus.big.cities.json 10m_cultural/ne_10m_populated_places.shp

接着，把用于描述城市的小圆点和城市名字的SVG添加到底层SVG上：

Javascript代码  

  1. var circles = svg.append("svg:g")
  2. .attr("id", "circles");
  3. var texts = svg.append("svg:g")
  4. .attr("id", "texts");

然后，根据前面得到的数据在创建的SVG上画图

Javascript代码  

  1. d3.json("data/aus.cities.json", function(error, root) {
  2. circles.selectAll("circle")
  3. .data(root.features)
  4. .enter().
  5. append("svg:circle")
  6. .attr("cx", function(d){return projection([d.properties[‘LONGITUDE‘],d.properties[‘LATITUDE‘]])[0];})//根据城市的经纬度投射确定圆点坐标
  7. .attr("cy",function(d){return projection([d.properties[‘LONGITUDE‘],d.properties[‘LATITUDE‘]])[1];})
  8. .attr("r", 3)
  9. .attr(‘fill‘,‘#29FF57‘);
  10. texts.selectAll("text")
  11. .data(root.features)
  12. .enter()
  13. .append("svg:text")
  14. .text(function(d){return d.properties[‘NAME‘];})
  15. .attr("x", function(d){
  16. return projection([ d.properties[‘LONGITUDE‘],d.properties[‘LATITUDE‘]])[0];})
  17. .attr("y",function(d){
  18. return projection([d.properties[‘LONGITUDE‘],d.properties[‘LATITUDE‘]])[1];
  19. })
  20. .attr(‘fill‘,‘#000‘)
  21. .attr(‘font-size‘,‘9px‘);
  22. });

最后得到的结果如下：

参考：

http://www.tnoda.com/blog/2013-12-07

https://github.com/mbostock/d3/wiki/Geo-Paths#path

时间： 2024-10-15 00:33:05

使用D3 Geo模块画澳大利亚地图的相关文章

nginx利用geo模块做限速白名单以及geo实现全局负载均衡的操作记录

geo指令使用ngx_http_geo_module模块提供的.默认情况下,nginx有加载这个模块,除非人为的 --without-http_geo_module.ngx_http_geo_module模块可以用来创建变量,其值依赖于客户端IP地址.geo指令语法: geo [$address] $variable { ... }默认值: -配置段: http定义从指定的变量获取客户端的IP地址.默认情况下,nginx从$remote_addr变量取得客户端IP地址,但也可以从其他变量获得.例

Nginx geo模块

L79 geo 模块默认编译进nginx 可以通过--without-http_geo_module禁用 Syntax: geo [$address] $variable { ... } Default: — Context: http 1:如果geo指令后不输入$address 那么默认就使用变量$remite_addr作为ip地址 2:{} 内的指令匹配:优先最长匹配 geo $country { default ZZ; proxy 116.196.115.53; 127.0.0.0/24

echarts画中国地图并上色

任务是画一个中国地图,并在指定区域上颜色,学姐说用arcgis画,乖乖,4个g的安装文件,算了, 还是echarts大法好..如果想熟悉这个牛X的工具,请移步https://www.w3cschool.cn/echarts_tutorial/ 如果是写论文作图需要添加应用哦 最终效果如下: 参考了这个网址:https://www.cnblogs.com/luna666/p/9007263.html 另外还有个百度官方的例子:http://www.echartsjs.com/gallery/edi

matlab利用m_map工具包画中国地图及散点云图

开始之前需要准备好malab,中国地图shp文件,m_map工具包. 中国地图shp文件可以在下面的链接中下载: https://gadm.org/download_country_v3.html 本文借鉴了下面链接中教程,该方法为matlab自带的画图工具包绘制方法,在我电脑上geoshow命令运行时间特别长,不知道为什么,感兴趣的同学可以试试: https://my.oschina.net/chengwei426/blog/674280 利用m_map绘制中国地图,代码如下: close a

python的turtle模块画折线图

代码如下: import turtle yValues = [10.0,7.4,6.4,5.3,4.4,3.7,2.6] def main(): t = turtle.Turtle() t.hideturtle() drawLine(t,0,0,300,0) #画x轴 drawLine(t,0,0,0,175) #画y轴 #画折线 for i in range(6): drawLineWithDots(t,40 + (40 * i),15 * yValues[i],40 + (40 * (i+1

python游戏pygame模块画圆及移动方法介绍

1 #!/usr/bin/env python 2 # -*- coding:utf-8 -*- 3 #Author: ss 4 5 import pygame 6 import sys 7 8 # 初始化 9 pygame.init() 10 11 size = width,height = 1000,600 # 设置屏幕尺寸 12 BLUE = 0,0,255 13 WHITE = 255,255,255 14 BLACK = 0,0,0 15 RED = 255,0,0 16 GREEN

echarts画中国地图，省市区地图分享

中国地图 四川地图 重庆地图 源码分享: https://github.com/livelyPeng/ec-map 原文地址:https://www.cnblogs.com/plBlog/p/11725632.html

使用Python的turtle模块画出简单的柱状图

代码如下: import turtle heights = [856, 420,360,260,205] def main(): t = turtle.Turtle() t.hideturtle() for i in range(5): drawFilledRectangle(t,-200+(76*i),0,76,heights[i]/4,"black","light blue") displayText(t) def drawFilledRectangle(t,x

利用d3.js绘制中国地图

d3.js是一个比较强的数据可视化js工具.利用它画了一幅中国地图,如下图所示: 源码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="d3.js"></script> <script type="text/javascript" src="d3.csv.js">&l