data-visualization

数据可视化：基于d3.js 或 fabric.js 等

市场图表

个人经验：

偏展现场景，建议优先采用类置标语言（Markup Language）的类库，直观；偏交互场景，选用易编程、易定制的类库。

偏展现图表

图表	特点
Echarts
G2
Viserjs	基于 G2 的图形库，置标语言（ Markup Language）使用方式，支持 React、Angular 和Vue，由 Recharts 等成员开发
Recharts	对 React 和 D3 的封装，置标语言（ Markup Language）使用方式，对 React 支持友好，由 Alibaba 成员发起
Frappé Charts	基于 SVG
SVG.js	将 SVG 的置标语言使用方式封装成了一套类似 Canvas （或 D3）的 APIs，增强了 SVG 的交互开发体验
Vega
Vega-Lite

偏交互图表

图表	特点
Fabric.js
konva
D3
JavaScript InfoVis Toolkit
Protovis	D3.js 前身，使用SVG的可视化JS。从后续发展看，不建议在新项目中采用。如重新设计新可视化JS，可参考。

其它

图表	特点
Deck.gl	WebGL 大规模数据展现
Planck.js	2D 物理引擎
whs.js	基于Three.js，适用于 Web 应用程序与游戏的3D框架
Embedding Projector	谷歌开源的高维数据可视化
Phaser	HTML5 Game Framework
AnyPixel.js	谷歌，个人认为比较适合交互式大屏
LayerVisualizer	一个简单的基于Web的3D图层（可用于可视化材质UI和涉及深度/阴影的其他事物）

项目

图片标定

calibrationbox：一个 Fabric 的小插件，可用于标定图片中车辆、人、交通灯标识、区域等。详见，calibration-box 项目。

网络攻击地图

• norsecorp

• ipviking

  

访问者流报告

netflow：借鉴 Google Analytics 行为流 ，修改自 netFlow

运行

1. 依赖 Node、http-server
2. 在 data-visualization/server 目录执行 npm install 后，运行 npm start 启动（默认9999端口）
3. 在 data-visualization 目录执行 http-server
4. 根据 http-server 中提示的网址，在浏览器（建议 Chrome ）中访问
5. 关闭命令窗口即可退出

附录

• 数据可视化工具目录
• Sankey Diagrams
• 读书笔记 - 数据可视化实践
• F1 Championship Points as a d3.js Powered Sankey Diagram
• 前端模块化开发DEMO之攻击地图：推荐 @依宁 的一版攻击地图，感觉不错！
• konva：呈现能力不错，但与 Fabric 相比交互较弱。

反馈

https://github.com/TingGe/data-visualization/issues

贡献

https://github.com/TingGe/data-visualization/graphs/contributors

许可

(The MIT License)

Copyright (c) Ting Ge 505253293@163.com