数据
数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。因此做数据可视化前需要想明白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:
brew install gdal
然后通过如下命令就可以Shapefile中的澳大利亚的数据提取出来。
ogr2ogr -f GeoJSON -where "sr_adm0_a3 = 'AUS'" aus.states.json 10m_cultural/ne_10m_admin_1_states_provinces_lakes_shp.shp
是一个类似下文这样的一个GeoJSON格式数据。
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
...
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
....
]
]
}
},
......
顺道提一下,Geo数据一般都比较大,尤其是GeoJSON格式下的数据,像上面生成的数据就有741KB,这对于Web应用来说已经是很大的一个数值。开发者可以通过Topojson(
https://github.com/mbostock/topojson/wiki)压缩数据。Topojson是GeoJSON的一个扩展,使用方式大致相同,这儿就不讲Topojson了,下图可以让开发者大致了解一下三种格式下数据的大小:
画图
有了数据,接下来就开始画图。D3画图都有一定的套路,首先需要确定把矢量图SVG放到那儿,以及图的大小
var width = 960;
var height = 580;
var svg = d3.select("#geo_distribution").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(0,0)");
接着,需要创建一个路径生成器,路径生成器可以接收一个投射函数,该投射函数存在的目的是把圆形地球上的经纬度投射到平面的Web界面上。D3自带了各种各样的投射函数(
https://github.com/mbostock/d3/wiki/Geo-Projections),本例中使用的是墨卡托投影(
http://baike.baidu.com/view/301981.htm?fr=aladdin)。
var projection = d3.geo.mercator()
.center([132, -28])
.scale(850)
.translate([width/2, height/2]);
var path = d3.geo.path()
.projection(projection);
然后,根据读取的GeoJSON数据绘制路径:
var color = d3.scale.category20();
var states = svg.append("svg:g")
.attr("id", "states");
d3.json("data/aus.states.json", function(error, root) {
if (error)
return console.error(error);
states.selectAll("path")
.data( root.features)
.enter()
.append("path")
.attr("stroke","#000")//路径线颜色
.attr("stroke-width",1)//路径线宽度
.attr("fill", function(d,i){
return color(i);//color函数可根据数据设置每个州板块的颜色,示例中使用的是D3自带的颜色函数。
})
.attr("d", path )
.on("mouseover",function(d,i){//添加鼠标事件
d3.select(this)
.attr("fill","yellow");
})
.on("mouseout",function(d,i){
d3.select(this)
.attr("fill",color(i));
});
});
画到这儿一个澳大利亚的地图就是下面这个样子了:
加点佐料
画了地区之后,纯属个人乐趣,还想画点城市在上面,做法也是一样的, 首先获取Geo数据,还是可以从Natural Earth的地理数据中转换得到(注:转换数据时,开发者可以根据个人爱好过滤掉一些数据,比方说下面的命令中我过滤掉了规模上第四等级以后的小城市):
ogr2ogr -f GeoJSON -where "ADM0_A3 = 'AUS' and SCALERANK <=4" aus.big.cities.json 10m_cultural/ne_10m_populated_places.shp
接着,把用于描述城市的小圆点和城市名字的SVG添加到底层SVG上:
var circles = svg.append("svg:g")
.attr("id", "circles");
var texts = svg.append("svg:g")
.attr("id", "texts");
然后,根据前面得到的数据在创建的SVG上画图
d3.json("data/aus.cities.json", function(error, root) {
circles.selectAll("circle")
.data(root.features)
.enter().
append("svg:circle")
.attr("cx", function(d){return projection([d.properties['LONGITUDE'],d.properties['LATITUDE']])[0];})//根据城市的经纬度投射确定圆点坐标
.attr("cy",function(d){return projection([d.properties['LONGITUDE'],d.properties['LATITUDE']])[1];})
.attr("r", 3)
.attr('fill','#29FF57');
texts.selectAll("text")
.data(root.features)
.enter()
.append("svg:text")
.text(function(d){return d.properties['NAME'];})
.attr("x", function(d){
return projection([ d.properties['LONGITUDE'],d.properties['LATITUDE']])[0];})
.attr("y",function(d){
return projection([d.properties['LONGITUDE'],d.properties['LATITUDE']])[1];
})
.attr('fill','#000')
.attr('font-size','9px');
});
最后得到的结果如下:
参考:
http://www.tnoda.com/blog/2013-12-07
https://github.com/mbostock/d3/wiki/Geo-Paths#path
- 大小: 17.3 KB
- 大小: 55.9 KB
- 大小: 169.4 KB
分享到:
相关推荐
d3-geomap d3-geomap旨在成为 D3 的地理地图。 在当前阶段,它由一个用于创建普通地图的类d3.geomap()和一个用于创建等值线地图的类d3.choropleth() 。 请参阅的并下载包含 d3-geomap 及其依赖项的缩小版本以及用于...
使用`d3.geo2rect`时,你需要首先导入相关的D3模块。以下是一个基本的示例代码: ```javascript var geoJson = // your GeoJSON data; var rectangle = d3.geo2rect(geoJson); ``` 在这个例子中,`geoJson`是你的...
一只大笨熊D3D模块无密.ec 一只大笨熊FPS源码使用的大笨熊FPS教程所用的一只大笨熊D3D模块 内容仅模块
D3D绘制模块 易语言辅助 刺激战场 模型描绘模块.......
在本文中,我们将深入探讨如何使用D3.js库加载JSON数据来绘制美国地图。D3,全称为Data-Driven Documents,是由Mike Bostock开发的一个强大的JavaScript库,它允许开发者结合数据与DOM(文档对象模型)来创建动态、...
**d3.geo.projection** 是 d3.js 库中的一个模块,专门用于处理地理坐标到屏幕坐标的转换。地理投影是将球面地图转换为平面上的过程,由于地球是一个三维球体,而屏幕是二维的,所以需要通过不同的算法(投影方法)...
“基于d3js的一个地图绘制工具”是指使用D3.js库来创建一个专门用于绘制地图的应用程序。D3.js(Data-Driven Documents)是一个强大的JavaScript库,它允许开发者用数据来操作文档对象模型(DOM),进而创建交互式的...
易语言D3D9 1.0模块源码是使用易语言编写的一个Direct3D 9的封装库,它将复杂的D3D9 API进行了封装,使得程序员可以更方便地在易语言环境下调用Direct3D的功能,进行3D图形编程。易语言是一种中国本土开发的、面向...
通过分析和实践这些源码,你可以掌握D3D模块在易语言中的使用方法,从而提升3D图形编程技能,为开发具有高质量3D图形界面的应用程序打下坚实基础。同时,理解源码还能帮助你更好地理解D3D底层的工作原理,对于优化...
在这个“D3D9 1.0模块易语言源码”中,我们看到的是使用易语言实现的Direct3D 9功能的源代码示例。易语言是一种中文编程语言,它的目标是使编程变得更加简单,让不懂英文的用户也能进行程序设计。 在学习这个模块...
使用D3.js画地图时,你需要做以下几步: 1. **加载数据**:将上述code码数据集导入到JavaScript环境中,这可以通过XMLHttpRequest或fetch API实现。 2. **处理数据**:将code码与地图投影(如Mercator投影)关联,...
以下更改相对于 E_D3D9 1.0正式版: 1:[!]"E_D3D9" 改名为“E_DirectX".为其他DirectX组件作准备. 2:[!]调用"d3dx9_42.dll"库改为"d3dx9_39.dll"库.直接影响相关的ID3DX...类. 3:[!]优化各类(修改为继承),删除与...
d3子模块的啊
如果使用NPM,则npm install d3-geo-projection 。 否则,请下载。 您也可以直接从作为加载。 支持AMD,CommonJS和香草环境。 在香草中,将导出d3全局变量: < script src =" ...
在本项目中,"使用D3和Canvas显示导弹可打击范围的世界地图" 是一个结合了JavaScript数据可视化库D3.js和HTML5 Canvas技术的应用实例,主要用于呈现特定导弹的射程覆盖范围。D3(Data-Driven Documents)是一个强大...
designing_maps, 使用 D3.js 设计漂亮的地图 使用 D3.js 设计漂亮的地图这个项目包含我演讲"使用 d3.js 设计漂亮的地图"中的幻灯片和代码。 在其中,你将找到使用 D3.js 构建各种专题地图的代码示例。 每张地图都是...
**前端项目-d3-geo.zip** 是一个包含使用D3.js库进行地理数据可视化的前端项目。D3.js,全称Data-Driven Documents,是一款强大的JavaScript库,它允许开发者用数据操作DOM(Document Object Model)元素,从而创建...
对于常规笛卡尔坐标,以与相同的方式将缩放和平移用户交互应用于D3球形地图投影。 通常与配合使用,但只要支持缩放和旋转,也可用于其他投影类型。 杰森·戴维斯(Jason Davies)的《》( 和迈克· Mike Bostock)...
本项目“使用Vue和D3的强大功能构建SVG地图”将结合这两者的优点,帮助开发者创建交互式、动态的地图应用。Vue作为一个轻量级的前端框架,提供了组件化开发、响应式数据绑定等特性,而D3则是一个强大的数据驱动的绘...
本项目聚焦于使用D3.js库进行地图可视化,特别是展示美国地图,强调各州的生产力差异以及城市人口规模。 D3.js(Data-Driven Documents)是由Mike Bostock开发的一个JavaScript库,它允许开发者通过数据操作DOM...