{"id":15014918,"url":"https://github.com/tingge/data-visualization","last_synced_at":"2026-03-06T17:35:31.329Z","repository":{"id":36461967,"uuid":"40767143","full_name":"TingGe/data-visualization","owner":"TingGe","description":"数据可视化","archived":false,"fork":false,"pushed_at":"2018-06-18T12:49:22.000Z","size":5079,"stargazers_count":205,"open_issues_count":0,"forks_count":66,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-12-19T06:09:04.719Z","etag":null,"topics":["d3js","data-visualization","fabric","netflow","sankey-diagram"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"mwtracker/pdfexaminer_tools","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TingGe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-15T15:19:50.000Z","updated_at":"2024-11-02T23:09:22.000Z","dependencies_parsed_at":"2022-08-18T20:10:46.983Z","dependency_job_id":null,"html_url":"https://github.com/TingGe/data-visualization","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TingGe%2Fdata-visualization","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TingGe%2Fdata-visualization/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TingGe%2Fdata-visualization/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TingGe%2Fdata-visualization/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TingGe","download_url":"https://codeload.github.com/TingGe/data-visualization/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230388131,"owners_count":18217755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["d3js","data-visualization","fabric","netflow","sankey-diagram"],"created_at":"2024-09-24T19:46:16.319Z","updated_at":"2026-03-06T17:35:31.249Z","avatar_url":"https://github.com/TingGe.png","language":"JavaScript","readme":"# data-visualization\n数据可视化：基于d3.js 或 fabric.js 等\n\n## 市场图表\n\n\u003e 个人经验：\n\u003e\n\u003e 偏展现场景，建议优先采用类置标语言（Markup Language）的类库，直观；偏交互场景，选用易编程、易定制的类库。\n\n### 偏展现图表\n\n| 图表                                       | 特点                                       |\n| ---------------------------------------- | ---------------------------------------- |\n| [Echarts](http://echarts.baidu.com/index.html) |                                          |\n| [AntV](https://antv.alipay.com)          | 蚂蚁金服全新一代数据可视化解决方案。包括[可视化图形语法库 G2](https://github.com/antvis/g2/)、 [流程图和关系分析的G6](https://github.com/antvis/g6/)、 [面向移动端的可视化图形语法库 F2](https://github.com/antvis/f2) |\n| [Viserjs](https://github.com/viserjs/viser) | 基于 [G2](https://github.com/antvis/g2) 的图形库，置标语言（ Markup Language）使用方式，支持 React、Angular 和Vue，由 [Recharts](https://github.com/recharts/recharts) 等成员开发 |\n| [Recharts](https://github.com/recharts/recharts) | 对 React 和 D3 的封装，置标语言（ Markup Language）使用方式，对 React 支持友好，由 Alibaba 成员发起 |\n| [Frappé Charts](https://github.com/frappe/charts) | 基于 SVG                                   |\n| [SVG.js](https://github.com/svgdotjs/svg.js) | 将 SVG 的置标语言使用方式封装成了一套类似 Canvas （或 D3）的 APIs，增强了 SVG 的交互开发体验 |\n| [Vega](https://vega.github.io/vega/)     |                                          |\n| [Vega-Lite](https://vega.github.io/vega-lite/) |                                          |\n\n### 偏交互图表\n\n| 图表                                       | 特点                                       |\n| ---------------------------------------- | ---------------------------------------- |\n| [AntG](http://antg.alipay.net/)          | 3D 图形方向。蚂蚁金服在互联网交互图形领域的探索沉淀，包括 [R3](http://antg.alipay.net/r3/getting-started-cn) 和 [WebAR](http://antg.alipay.net/webar/introduction-cn)。著名应用有蚂蚁庄园、小鸡快跑等。 |\n| [Fabric.js](http://fabricjs.com/)        |                                          |\n| [konva](http://konvajs.github.io/)       |                                          |\n| [D3](https://d3js.org/)                  |                                          |\n| [JavaScript InfoVis Toolkit](https://github.com/philogb/jit) |                                          |\n| [Protovis](http://mbostock.github.io/protovis/ex/) | D3.js 前身，使用SVG的可视化JS。从后续发展看，不建议在新项目中采用。如重新设计新可视化JS，可参考。 |\n\n### 其它\n\n| 图表                                       | 特点                                       |\n| ---------------------------------------- | ---------------------------------------- |\n| [Deck.gl](https://github.com/uber/deck.gl) | Uber 的一个 WebGL 大规模数据展现库。其他还有 [luma.gl](https://uber.github.io/luma.gl/#/)、[react-vis](https://uber.github.io/react-vis/)、[react-map-gl](https://uber.github.io/react-map-gl/) |\n| [Planck.js](https://github.com/shakiba/planck.js) | 2D 物理引擎                                  |\n| [whs.js](https://github.com/WhitestormJS/whs.js) | 基于Three.js，适用于 Web 应用程序与游戏的3D框架          |\n| [Embedding Projector](https://www.tensorflow.org/get_started/embedding_viz) | 谷歌开源的高维数据可视化                             |\n| [Phaser](https://github.com/photonstorm/phaser) | HTML5 Game Framework                     |\n| [AnyPixel.js](http://googlecreativelab.github.io/anypixel) | 谷歌，个人认为比较适合交互式大屏                         |\n| [LayerVisualizer](https://github.com/romannurik/LayerVisualizer) | 一个简单的基于Web的3D图层（可用于可视化材质UI和涉及深度/阴影的其他事物） |\n\n\n## 项目\n\n### 图片标定\n\ncalibrationbox：一个 [Fabric](http://fabricjs.com/) 的小插件，可用于标定图片中车辆、人、交通灯标识、区域等。详见，[calibration-box](https://github.com/TingGe/calibration-box) 项目。\n\n![](https://github.com/TingGe/calibration-box/raw/master/assets/calibrationbox.png)\n\n### 网络攻击地图\n\n- norsecorp\n\n![](./assets/norsecorp.png)\n\n- ipviking\n\n  ![](./assets/ipviking.png)\n\n### 访问者流报告\n\nnetflow：借鉴 Google Analytics 行为流 ，修改自 [netFlow](https://github.com/jdk137/netFlow/)\n\n![](./assets/netflow.png)\n\n## 运行\n\n1. 依赖 [Node](https://nodejs.org/)、[http-server](https://github.com/indexzero/http-server)\n2. 在 data-visualization/server 目录执行 `npm install` 后，运行 `npm start` 启动（默认9999端口）\n3. 在 data-visualization 目录执行 `http-server`\n4. 根据 `http-server` 中提示的网址，在浏览器（建议 Chrome ）中访问\n5. 关闭命令窗口即可退出\n\n## 附录\n\n- [数据可视化工具目录](http://www.datavizcatalogue.com/ZH/index.html)\n- [Sankey Diagrams](https://bost.ocks.org/mike/sankey/)\n- [读书笔记 - 数据可视化实践](http://blog.lyuehh.com/book/2013/05/25/reading-notes-Interactive-Data-Visualization.html)\n- [F1 Championship Points as a d3.js Powered Sankey Diagram](https://blog.ouseful.info/2012/05/24/f1-championship-points-as-a-d3-js-powered-sankey-diagram/)\n- [前端模块化开发DEMO之攻击地图](http://fuxiaode.cn/blog/2015/12/05/attack-map-with-amd)：推荐 @[依宁](https://github.com/danislyn) 的一版[攻击地图](http://fuxiaode.cn/demo/AttackMap/index.html)，感觉不错！\n- [konva](http://konvajs.github.io/)：呈现能力不错，但与  [Fabric](http://fabricjs.com/) 相比交互较弱。\n\n## 反馈\n\n[https://github.com/TingGe/data-visualization/issues](https://github.com/TingGe/data-visualization/issues)\n\n## 贡献\n\n[https://github.com/TingGe/data-visualization/graphs/contributors](https://github.com/TingGe/data-visualization/graphs/contributors)\n\n## 许可\n\n(The MIT License)\n\nCopyright (c)  Ting Ge [505253293@163.com](mailto:505253293@163.com)\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftingge%2Fdata-visualization","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftingge%2Fdata-visualization","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftingge%2Fdata-visualization/lists"}