数据
数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。因此做数据可视化前需要想明白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:

  1. brew install gdal

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

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

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

  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放到那儿,以及图的大小

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

  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数据绘制路径:

  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的地理数据中转换得到(注:转换数据时,开发者可以根据个人爱好过滤掉一些数据,比方说下面的命令中我过滤掉了规模上第四等级以后的小城市):

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

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

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

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

  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

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

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

    geo指令使用ngx_http_geo_module模块提供的.默认情况下,nginx有加载这个模块,除非人为的 --without-http_geo_module.ngx_http_geo_modu ...

  2. c语言贪吃蛇详解1.画出地图

    c语言贪吃蛇详解-1.画出地图 前几天的实验室培训课后作业我布置了贪吃蛇,今天有时间就来写一下题解.我将分几步来教大家写一个贪吃蛇小游戏.由于大家c语言未学完,这个教程只涉及数组和函数等知识点. 首先 ...

  3. Nginx geo模块

    geo 模块默认编译进nginx 可以通过--without-http_geo_module禁用 Syntax: geo [$address] $variable { ... } Default: — ...

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

    nginx利用geo模块做限速白名单以及geo实现全局负载均衡的操作记录 原文:http://www.cnblogs.com/kevingrace/p/6165572.html Nginx的geo模块 ...

  5. nginx 变量相关的map模块与split_clients模块及geo模块和geoip模块及keepalive介绍

    map 模块指令默认编译进nginx的 Syntax: map string $variable { ... } # 表示string匹配到{}里的值或变量赋值给$variable Default: ...

  6. nginx使用geo模块进行接口访问限制

    背景需求: 对api接口 /api/inner 进行ip访问限制 # ip白名单geo $ip_list { default 0; 111.111.111.111 1; } server { list ...

  7. 使用SVGDeveloper画svg地图详细过程

    使用步骤 1.  安装svg 2.  具体操作 1.     打开svg,点击file ,new,默认svg,点击ok 显示界面如下: 然后点击image 把鼠标放到代码下面的的桌面上,鼠标箭头会变成 ...

  8. echarts画中国地图并上色

    任务是画一个中国地图,并在指定区域上颜色,学姐说用arcgis画,乖乖,4个g的安装文件,算了, 还是echarts大法好..如果想熟悉这个牛X的工具,请移步https://www.w3cschool ...

  9. D3.JS V4 绘制中国地图

    参考:http://bl.ocks.org/almccon/fe445f1d6b177fd0946800a48aa59c71 http://blog.csdn.net/lzhlzz/article/d ...

随机推荐

  1. HTML 颜色

    HTML 颜色 HTML 颜色由红色.绿色.蓝色混合而成. 颜色值 HTML 颜色由一个十六进制符号来定义,这个符号由红色.绿色和蓝色的值组成(RGB). 种颜色的最小值是0(十六进制:#00).最大 ...

  2. 第一部分 代码组织概念,集成开发环境(IDE)

    代码组织概念 主要是代码文件,项目和解决方案. 解决方案(.sln)包含多个项目(.csproj),一个项目又包含多个文件(.cs). 集成开发环境(IDE): 由编辑.编译.调试,以及用户图形界面, ...

  3. jQuery html text val方法使用

    jQuery html text val方法使用 <%@ page language="java" import="java.util.*" pageEn ...

  4. Pomelo的Router

    在pomelo中,对服务器的扩充非常简单,只需要修改一下配置文件config/servers.json,多添几台服务器配置就行了,如果我们的connector和chat都具有多台服务器,因此需要考虑对 ...

  5. EasyUI datagrid 删除的时候无法正确找到重复记录row index的问题

    EasyUI datagrid 删除的时候无法正确找到重复记录row index的问题: 如果无法正确找到重复记录的row index,就需要进行注意添加的时候所进行的 操作:如果添加的时候就是添加的 ...

  6. MyEclipse 2014去除derby

    在MyEclipse安装目录下打开configuration\org.eclipse.equinox.simpleconfigurator\bundles.info 搜索derby找到com.genu ...

  7. js冒泡排序及计算其运行时间

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. Bootstrap入门(十四)组件8:媒体对象

    Bootstrap入门(十四)组件8:媒体对象 这是一个抽象的样式,用以构建不同类型的组件,这些组件都具有在文本内容的左或右侧对齐的图片(就像博客评论或 Twitter 消息等). 1.基本样式 2. ...

  9. 利用moment为基础,基于DOM实现一个多个倒计时同时进行的js库方便使用

    moment非常强大,提供了很多时间方法的封装,项目需要一个小倒计时的功能,网上找了很多不合适,决定自己写一个,直接上代码 //定义一个立即执行的函数(function () { var Ticts= ...

  10. C++的输入和输出

    C++是一种常用的编程语言.一个完整的程序至少要有一个输出,而我们也经常需要在程序内进行大量输入和输出.所以今天,我和大家谈一谈输入和输出. 1.cin和cout.可以连续输入,使用流(>> ...