Question

可视化技术核心有下面几个要素：

1. 地理单元选择
2. 坐标系选择
3. BBox/Zoom level
4. 图层管理
5. 元素管理

mapview 、 leaflet 、 R notebook 是地图交互式分析最好用的三个工具。

表格 可视化前端框架

框架名称	主要贡献	协议	源码 (github)	文档	最新版本	简介	备注
ECharts	百度	Apache-2.0	apache/echarts	https://echarts.apache.org/zh/index.html	5.2.1	缩写来自 Enterprise Charts，由百度开源，2021 年捐献给 ASF。商业级数据图表，一个纯 JavaScript 的图表库。	Readme
D3.js		ISC	d3/d3	Documentation 中文	7.1.1	全称是 Data-Driven Documents，JavaScript 数据可视化库，使用 HTML、SVG 和 Canvas 技术展现数据。基于 D3 的实现库有 NVD3、metrics-graphics、C3 和 Plotly.js。	Readme
Chart.js		MIT	chartjs/Chart.js	docs	3.5.1	开源的 HTML5 图表工具。Chart.js 是为设计和开发人员准备的简单、灵活的 JavaScript 图表工具。	Readme
highcharts	Highsoft	非商用免费	https://code.highcharts.com/		9.2.2	纯 Javascript 类库，开源，非商业使用免费。
MapBox		商用		https://docs.mapbox.com/		致力于打造全球最漂亮的个性化地图。Mapbox 地图数据来源于 Open Street Map（OSM）等其他地图数据供应商。
deck.gl	Uber	MIT	visgl/deck.gl		8.5.10	Uber 开源的基于 WebGL 的可视化图层。WebGL2 powered visualization framework.	Readme
H3	Uber	Apache-2.0	uber/h3	h3geo.org	3.7.2	Uber 开源的六边形地理信息库。	Readme
antv	蚂蚁集团	MIT	antvis/L7		2.0.0	蚂蚁集团全新一代数据可视化解决方案。 G2 是一套基于可视化编码的图形语法，是蚂蚁金服数据可视化解决方案 AntV 的重要组成部分。	Readme
Plotly.js (D3)		MIT	plotly/plotly.js		2.8.0	Built on top of d3.js and stack.gl , 支持 40+图表，美观易用。对很多编程语言提供接口。	Readme
metrics-graphics (D3)			metricsgraphics/metrics-graphics	metricsgraphicsjs.org	2.11	建立在 D3 之上的可视化库，针对可视化和布置时间序列数据进行了优化，更简洁和拥有更规范的数据图表布局优化算法的库。	Readme
Vega (D3)	华盛顿大学 IDL 实验室	BSD-3	vega/vega	https://vega.github.io/vega/docs/	5.21.0	基于 D3 实现的声明式可视化语法框架，目标是做数据可视化的配置语法。其语法格式是 JSON，渲染引擎是 D3，用户可以自由使用 Vega 语法进行组合构建出各种各样的图表。	Readme

备注：最新版本截止时间是 2021-10。

表格 其它语言可视化框架/库

框架名称	语言	贡献者	协议	源码 (github)	文档	最新版本	简介
ggplot2	R						R 语言社区最著名的可视化绘图包，2005 年由 Hadley Wickham 创造。
Bokeh	python		BSD-3	bokeh/bokeh	Readme	3.0	图形语法的实现是基于 Python 的，最终渲染是用 D3 在浏览器上绘图。其优势是可以借由 Python 获得大规模数据的处理能力，但也因为同时具备两个端（BS 架构），所以嵌入其他系统的成本相对较大。
seaborn	python		BSD-3	mwaskom/seaborn	tutorial.html	0.11.2	统计数据可视化。依赖于 matplotlib 和 pandas。
matplotlib	python		PSF	matplotlib/matplotlib	Documentation	3.5.1	图形包，高度定制化，可用来画各种图形。依赖于 pillow。
Pillow	python		HPND	python-pillow/Pillow	https://pillow.readthedocs.io/	8.4.0	Pillow 在 PIL 基础上，兼容了 python 3。PIL~python 图形库，用于 python 2.7。
opencv	c/R/...

备注：最新版本截止时间 2021-12。

D3/NVD3

D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个 被数据驱动的文档 。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。

引用 D3

<script src="http://d3js.org/d3.v3.min.js"
charset="utf-8"></script>

NVD3 是基于 D3 的实现。

Echarts

http://echarts.baidu.com/echarts2/doc/doc.html

ECharts，缩写来自 Enterprise Charts，由百度开源。商业级数据图表，一个纯 JavaScript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器 （IE6/7/8/9/10/11，chrome，firefox，Safari 等），底层依赖轻量级的 Canvas 类库 ZRender ，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K 线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表 盘、漏斗图、事件河流图等 12 类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等 7 个可交互组件，支持多图表、组件的联动和混搭展 现。

deck.gl

deck.gl ，是由 Uber 于 2015 年开源的基于 WebGL 的可视化图层。用于 React 的 WebGL 遮罩套件，提供了一组高性能的数据可视化叠加层。为数据可视化用例提供测试、高性能的图层，如 2 维和 3 维的散点图、choropleths 等。 Deck.gl 通过响应式编程和 GPU 并行加速的方式进行高效地 WebGL 渲染，与 Mapbox GL 深度结合能够呈现非凡的 3D 视觉效果。

• github: https://github.com/uber/deck.gl
• 官网: https://deck.gl/
• demo: https://deck.gl/#/examples/

deck.gl 不能支持中文注记的显示。

deck.gl 和地图解决方案之间有两种类型的集成：

• Overlay 覆盖：Deck 画布作为单独的 DOM 元素呈现在基本地图上。甲板的相机和底图的相机是同步的，因此它们可以一起平移/缩放。这是更强大的选项，因为这两个库彼此独立地管理它们的渲染。如果底 图是二维的，通常就足够了。Deck 作为基础地图顶部的叠加层。Deck as overlay on top of the base map.

• Interleaved 交错：Deck 渲染到基本地图的 WebGL 上下文中。这允许在 deck.gl 图层和底图的标签和/或 3D 要素之间进行遮挡。此选项的可用性取决于基本地图解决方案是否公开某些开发人员 API，并且可能使用户受到与此类 API 相关的错误/限制。Deck 与地图图层交错的。Deck interleaved with base map layers.

表格 各 deck.gl JS 库支持的集成方式

Library	Pure JS	React	Overlaid	Interleaved
ArcGIS API for JavaScript	✓	✓		example
Google Maps JS API	✓			example
harp.gl	✓		example
Leaflet	✓		example
Mapbox GL JS	✓	✓	example	example
MapLibre GL JS	✓	✓	example	example

Mapbox

MapBox 致力于打造全球最漂亮的个性化地图。Mapbox 地图数据来源于 Open Street Map（OSM）等其他地图数据供应商，和 Google Map、Apple Map 等地图厂商的地图数据来源差不多。

使用 mapbox 数据需要 mapbox 的 API 访问令牌，可以在 mapbox 官网 免费申请一个 token。

You need an API access token to configure Mapbox GL JS , Mobile , and Mapbox web services like routing and geocoding. Read more about API access tokens in our documentation.

本章参考

• 大规模地理数据可视化入门：Deck.gl 和 H3 https://cloud.tencent.com/developer/news/393745
• RStudio Spark/Leaflet 与 GIS 最佳实践