D3 的方法不同于所谓的栅格方法，例如 Leaflet 和 Google Maps。这些 预渲染地图特征为图像瓦片 ，它们从网络服务器加载并在浏览器中拼凑在一起形成地图。
通常，D3以 GeoJSON 的形式请求 矢量地理信息，并在浏览器中将其呈现为 SVG 或 Canvas 。
光栅地图通常看起来更像传统的印刷地图，其中可以显示很多细节（例如地名、道路、河流等），而不会影响性能。但是，使用矢量方法更容易实现动画和交互等动态内容。（将这两种方法结合起来也很常见。）
GeoJSON 是一种使用 JSON 格式表示地理数据的标准，完整的规范位于 geojson.org 。每个要素都由 几何 （国家的简单多边形和廷巴克图的一个点）和 属性 组成。D3 在渲染 GeoJSON 时会处理大部分细节，因此只需对 GeoJSON 有基本的了解即可开始使用 D3 映射。
投影函数采用经度和纬度坐标（以数组的形式 [lon, lat] ）并将其转换为 x 和 y 坐标。投影数学可以变得相当复杂，但幸运的是 D3 提供了大量的投影函数。
地理路径生成器是一个接受 GeoJSON 对象并将其转换为 SVG 路径字符串的函数。可以使用该方法创建生成器 .geoPath 并使用投影功能对其进行配置。
GeoJSON 是一种基于 JSON 的结构，用于指定地理数据。通常，它是使用mapshaper、ogr2ogr、shp2json或QGIS等工具从 shapefile 数据（一种广泛用于 GIS 领域的地理空间矢量数据格式）转换而来的。
shapefile 的一个来源是Natural Earth，如果开始，我建议尝试使用mapshaper来导入 shapefile 并导出为 GeoJSON。它还可以按属性过滤（例如，如果您想按大陆过滤国家）。
可以在不详细了解 GeoJSON 规范的情况下创建地图，因为诸如 mapshaper 和 D3 之类的工具可以很好地抽象出细节。
到目前为止，我们已经在示例文件中嵌入了 GeoJSON 对象。实际上，GeoJSON 将位于一个单独的文件中，并使用 ajax 请求加载。但在本章的其余部分，我们将使用以下方式加载 GeoJSON 文件：
d3.geoInterpolate()函数接受 0 到 1 之间的输入并在两个 [lon, lat] 位置之间进行插值：
可以使用 d3.geoContains 接受 GeoJSON 功能和 [lon, lat] 数组并返回布尔值来检查鼠标或触摸事件是否发生在要素边界内(SVG渲染情况下有效)
其实有了 Haversine 公式，两点坐标之后就很简单了。你提供的上海范围太大，且没有坐标，下面例子以上海虹桥机场为参考（纬度：31.2，经度：121.4）。
要从地名获得它的经纬度应该需要有一个庞大的数据库，这点没有仔细研究过。谷歌地图应该会提供此类的 API。你可以百度一下"经纬度查询"，有很多网站提供此功能。
测试的时候最好用 IE9 或 Opera 高版本，Firefox 和 Safari 有时会获取不到地理位置，Chrome 会自动屏蔽本地文件。
<script type="text/javascript">// Haversine 公式
function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
var R = 6371
var dLat = deg2rad(lat2 - lat1)
var dLon = deg2rad(lon2 - lon1)
var a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
Math.sin(dLon / 2) * Math.sin(dLon / 2)
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
var d = R * c
return d
}
function deg2rad(deg) {
return deg * (Math.PI / 180)
}
// 上海虹桥机场经纬度
var lat = 31.2, lon = 121.4
// 尝试获取地理位置
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(pos) {
var d = getDistanceFromLatLonInKm(
pos.coords.latitude,
pos.coords.longitude,
lat, lon).toFixed(2)
alert("当前位置距上海虹桥机场：" + d + "公里")
})
}
else {
alert("浏览器不支持 geolocation")
}
</script>
D3.js
D3 是最流行的可视化库之一，它被很多其他的表格插件所使用。它允许绑定任意数据到 DOM，然后将数据驱动转换应用到文档中。你可以使用它用一个数组创建基本的
HMTL 表格，或是利用它的流体过度和交互，用相似的数据创建惊人的 SVG 条形图。
ChartJS
Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas
基础上。目前，它支持6种图表类型(折线图，条形图，雷达图，饼图，柱状图和极地区域区)。而且，这是一个独立的包，不依赖第三方 JavaScript 库，小于
5KB。
Highcharts JS
Highcharts JS 是一个制作图表的纯 Javascript 类库，主要特性如下：兼容性：兼容当今所有的浏览器，包括 iPhone、IE
和火狐等等对个人用户完全免 费纯JS，无BS支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图跨语言：不管是
PHP、Asp.net 还是 Java 都可以使用。
Fusioncharts
FusionCharts Suite XT 是个专业的 JavaScript
图表库，能创建任何类型的图表。它创建的图表都是可以进行完全自定义的，标签，字体，边界等等，都可以进行修改。它有很强的交互功能，有许多信息提示，可 点击的
legend 关键字，还有 dril-down，缩放/滚动 和单击打印图表功能。
Flot
Flot 是受 Plotr 和 PlotKit 的 启发，Ole Laursen 基于 jQuery 开发了一个图表绘制(WEB Chart)插件并命名为
flot。 flot 是个纯 JavaSript 库，专注于简单的使用方式，迷人的外观和交互式特性。支持的浏览器有： Internet Explorer 6+,
Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。
Chartist.js
Chartist.js 提供了优美的响应图表。就像 ChartJS。它使用 SVG 渲染图，可以被控制，并通过对 CSS3 媒体查询和 SASS
定制。另外 Chartist.js 提供很酷的动画。
n3-charts
如果你是一个 AngularJS 开发者，你一定喜欢款有趣的图表。它是建立在 D3.js 和 AngularJS 的基础上，提供了可定制的
AngularJS 指令的形式不同标准的图表。
Ember Charts
Ember Charts 是一个基于 Ember.js 和 D3.js
的图表库。它包括时间序列、柱状图、饼图、点图，很容易扩展和修改。这些图表组件代表图表交互性和演示的最佳实践，是高度可定制和可扩展的。
Chartkick
Chartkick 是专为 Ruby 应用程序的 JavaScript
图表库。它提供了所有主要的图表类型，如饼图，柱形图，条形图，面积，地理，时间，以及多个系列。
MeteorCharts
它有一个很酷的图表生成器，为您提供选项来选择图表，选择主题，然后生成一个图表。
amCharts
amCharts 无疑是最漂亮的图表库。amCharts 提供了JavaScript/HTML5 Charts、Javascript/HTML5
Stock Chart、JavaScript Maps 三种图表组件。
EJS Chart
EJS图表声称自己是企业准备的图表库。图表看起来很干净，可读性比大多数旧的图表库。这也是与IE6+等旧浏览器兼容。
uvCharts
uvCharts 是一个开源的 JavaScript 图表库，号称有100多个自定义选项。它拥有12种不同的标准图表类型，开箱即用。
ECharts
基于 Canvas，纯 JavaScript
图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
商业产品常用图表库，底层基于ZRender，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、和弦图以及力导向布局图，同时支持任意维度的堆积和多图表混合展现。
