awesome-dev-data-visualization

Awesome-Data-Visualization-List

:heart: 收藏列表 - :+1: 很棒的数据可视化领域开发的相关资源。

Favorites list - Great resources for developing in the field of data visualization.

目录

Resource navigation list.

• 参考文档（Reference documentation）
• 工具库（Tool Library）
  • JavaScript
  • Python
  • Ruby
• 平台应用（Platform Application）

参考文档

Reference documentation.

see also 👉 计算机图形学读物

AWESOME DATA SCIENCE

• 数据可视化（Data Visualization）

  • from Data to Viz - 数据可视化决策工具。
  • The Data Visualisation Catalogue - 数据可视化目录。
  • Google Material Design Data visualization
  • AnyChart - Chartopedia - 图表百科。
  • Dataviz Inspiration - 数据可视化灵感，案例。
  • FlowingData Tutorials - 可视化向导。
  • Visual Capitalist - 可视化经典案例。

• 文档资料（Docs）

  • InfoVis:Wiki - 信息可视化社区平台。
  • OpenGL
    • OpenGL.org - OpenGL 标准、资源，官方站点。
    • docs.GL - OpenGL API 文档，非官方。
  • Vulkan
    • Vulkan.org - 官方站点。
  • WebGL
    • WebGL Guide - WebGL 技术指南。
    • WebGL Fundamentals - WebGL 基础知识。
    • WebGL2 Fundamentals - WebGL2 基础知识。
    • Three.js Fundamentals - Three.js 基础知识。
  • Graphics Related Lessons
    • CS307: Computer Graphics - 计算机图形学公开课。
    • CSC8820 Advanced Graphics Algorithms - 一些图形算法介绍。
  • Discover three.js - 介绍了开始探索 3D Web 图形所需的所有重要概念和术语。
  • High Dynamic Range Image Encodings
  • Life of a Pixel - 像素渲染的原理解析。
  • AAA - Analytical Anti-Aliasing - 分析抗锯齿技术。

• 公共资源（Public Resource）

  • Shadertoy - 着色器代码分享。
  • ambientCG - 公共领域基于物理渲染的资源。
  • CGAXIS - PBR 材质、3D 模型等资源。
  • textures.com - 提供各种材质的纹理资源。
  • Dwitter.net - 用简短的代码实现各种有趣的效果。

• 教程

  • Data Science for Beginners - 数据科学入门，Microsoft 发布。

Go Top ↑

工具库

Data visualization libraries, such as chart libraries, 3D engines, etc.

JavaScript

• canvas-size - 判断底层实现对 Canvas 大小的限制。

可视化工具

Data visualization tool library.

• 数据算法（Data Algorithm）

  • Largest-Triangle-Three-Buckets(LTTB) - 一种时间序列的数据集降采样算法。
  • Flatbush - 2D 点空间索引算法，希尔伯特 R 树算法。
  • rbush - 2D 点和矩形空间索引算法，R 树算法。
  • The Use of Context in Pattern Recognition

• 3D

  • A collection of WebGL and WebGPU frameworks and libraries
  • Model Web Viewer
    • Model Viewer
    • View 3D - 快速且可定制的 glTF 3D 模型查看器，功能齐全。
  • Tools
    • stackgl - 编写着色器代码的工具集。
    • glslify - Node.js 风格的模块化 GLSL。
    • gl-matrix - 为 WebGL 应用提供高性能的矩阵属性运算能力。
  • three.js - 3D WebGL 渲染引擎。
    • three-stdlib - 用 TypeScript 重写的 threejs/examples/jsm 的独立 npm 包。
    • Raycasting
      • THREE.Interactive - 为 Three 对象提供基于射线检测机制的事件支持。
      • three-mesh-bvh - BVH 实现，加速射线检测和空间查询。
    • postprocessing - 后处理效果工具库。
    • meshline - 替代 THREE.Line 绘制线，可设置线宽等。
    • 3D tiles
      • 3d-tiles-renderer
      • three-loader-3dtiles
    • three-globe - 3D 地球组件工具库。
    • neat - 3D 渐变。
  • A-Frame - 构建 3D/AR/VR 应用的框架。
  • sigma.js - 可视化大数据量的关系节点。
    • Graphology
  • Zdog - 圆形、扁平的设计师友好的伪 3D 引擎。
  • 👉 React.js
    • react-three-fiber - 可视化库，React.js 的 Threejs 渲染器。
    • React Unity WebGL

• 2D (Canvas/SVG/WebGL)

  • D3 - 可视化库，数据驱动的，非常著名，许多图表库基于此开发。
  • Canvas Engines Comparison
  • Rough.js - 创建具有手绘风格的草图图形。
  • Konva - 用于桌面和移动应用程序的 HTML5 2D canvas 库。
  • Paper.js - 矢量绘图工具。
  • Pencil.js - 2D 绘图库。
  • EaselJS - 工具套件，包含 Canvas、Web Audio 等工具库。
  • Fabric.js - 2D 绘图库，支持 Canvas、SVG。
  • Two.js - Web 2D 绘图工具库，基于 Canvas、Svg、WebGL。
  • PixiJS - 2D WebGL 渲染引擎，高性能。
  • Skia Canvas - 非浏览器环境下基于 skia 的画布实现。
  • 文本处理
    • canvas-txt
    • canvas-hypertxt
  • 👉 React.js
    • react-digraph - 有向图编辑器。
    • uvcanvas - 着色器动画画布。

• 动画引擎（Animation Engine）

  • Tools
    • bezier-easing - Cubic Bezier Curve 缓动函数的实现。
    • Robert Penner's Easing - Robert Penner's Easing Functions。
  • tween.js - 用于简单动画的 JavaScript 补间引擎。
  • GSAP - 现代化的高性能动画工具库，部分插件收费。
  • Anime.js - 动画引擎，轻量的 JavaScript 动画工具库，支持 SVG 形变动画。
  • Velocity.js - 动画引擎，为元素提供动画效果。
  • motion - 轻量的，基于 Web Animations API 的动画引擎。
  • KUTE.js - 高性能动画引擎，支持 SVG 形变动画。
  • Popmotion - 实用、灵活的 JavaScript 动画工具套件。
    • Framer Motion - 动画工具库，由 Popmotion 驱动。
  • tween.js - 动画工具库。（ ⚠️ 不再更新）
  • Shifty - 轻量级、高性能的低级动画工具库。
  • scene.js - 支持 JavaScript 和 CSS 的动画库。
  • SVG
    • vivus.js - 为 SVG 提供动画效果。
    • SVG.js - 轻量级 SVG 动画库。
    • Snap.svg
    • bonsai.js - SVG 渲染器。
    • lazy line painter - SVG 路径动画。
  • mo.js - 丰富，强大的运动图形动画工具库。
  • Kinesis - 复杂的动画工具。

• 游戏引擎（Game Engine）

  • Babylon.js - 3D 游戏渲染引擎。
  • Little.JS - 轻量级 2D 游戏渲染引擎。

• Others

  • Text 2 Diagram
    • mermaid - txt 文本生成流程图。
    • PlantUML - 快速使用简洁的文本描述生成 UML 图。
    • Pintora - 利用可扩展的文本绘制成图表。
    • MathJax - 浏览器中的数学公式可视化引擎。
    • flowchart.js - 流程图。
    • markmap.js - Markdown 转思维导图。
    • Penrose
    • markwhen - 用 markdown 生成时间线图表。
  • Textures.js - 创建 SVG 模式。
  • ztext.js - 实现文字 3D 效果。
  • P5.js - 可视化工具。
  • Pts - 可视化工具。
  • vis.js - 动态的，基于浏览器的可视化库。
  • Motion Canvas - Canvas 动画视频编辑器。

图表

Chart library, such as line chart, column chart, etc.

• 常规图表（Regular Chart）

  • Based on D3.js
    • Plot - 可探索性图表库，D3.js 官方发布。
    • C3 - 基于 D3.js 的可重用图表库。
    • billboard.js - 基于 D3.js 的图表库。
  • Chart.js - 最流行的轻量级库。
  • Echarts - 国内百度团队开发，功能丰富。
  • Apexcharts - 图表库。
  • carbon-charts - 遵循 Carbon 风格，IBM 公司发布。
  • roughViz - 手绘风格图表。
  • vizzu - 交互式动画图表。
  • Frappe Charts - 基于 SVG 的高性能图表库。
  • Charts.css - CSS 图表库。
  • MetricsGraphics.js - 为简洁的时间序列数据集可视化优化的图表库。
  • Vega-Lite - 数据分析领域的交互式图形语法。
  • 👉 React.js
    • Based on D3.js
      • visx - 图表库，基于 React.js 和 D3.js，Airbnb 团队开发。
      • nivo - 图表库，基于 React.js 和 D3.js。
    • React-Vis - 图表库，Uber 团队开发。（ ⚠️ 已被弃用）
    • Recharts - 图表库。
    • React Charts - 图表库。
    • Victory - 图表库。
    • react-chartjs-2 - 图表库，基于 Chart.js 的图表组件。

• 关系图（Relation Chart）

  • Cytoscape.js - 用于可视化和分析的图论（网络）库。

• 其它（Others）

  • Frappe Gantt - 甘特图。
  • Perspective - 基于 C++ 的 wasm 高性能数据可视化组件。
  • Plotly - 丰富的图表，支持金融、科学相关图表。
  • uPlot - 快速、轻量级的图表库。
  • webdatarocks - 创建透视表，免费。
  • wordcloud2.js - 词云。
  • cal-heatmap - 日历热图。
  • 👉 React.js
    • reaviz - 一系列 React 数据可视化组件。
    • react-flow - 可视化工具库，构建流程图等。
    • React Financial Charts - 图表库，股票蜡烛图。
    • react-calendar-heatmap - 基于 SVG 的日历热图。

动画

Animation library, such as linear animation, inertial animation, etc.

• CSS

  • Animate.css - 丰富的 CSS 动画工具库。
  • magic.css - CSS3 动画。
  • Transition.css - CSS 过渡动画。

• JavaScript

  • ScrollReveal - 为滚动进入视区的元素提供动画效果。
  • lax.js - 简单、轻量的工具库，创建平滑的滚动动画。
  • Typed.js - 打字动画效果。
  • Typeit - 打字动画效果。
  • Rough Notation - 为元素提供注释效果和动画。
  • Rellax - 元素滚动视差效果工具库。
  • simplePARALLAX.js
  • ts Particles - 简单的粒子动画。
  • particles.js - 轻量的粒子动画库。
  • CountUp.js - 数字文本动画。
  • granim.js - 创建交互式渐变动画。
  • dom-confetti - 五彩纸屑动画。
  • Canvas Confetti - 五彩纸屑动画。
  • Vanta.js - 数款页面 WebGL 背景动画。

• 👉 React.js

Python

可视化工具

Data visualization tool library.

• Matplotlib - 创建静态、动画、交互式可视化的综合库。
• plot-cli - 命令行数据可视化工具。（ ⚠️ 不再更新）
• plotext - 终端绘图可视化。
• graph-cli - 命令行工具，从 CSV 文件创建图表。
• termgraph - 终端绘图可视化。（ ⚠️ 不再更新）
• Diagrams - 用 Python 代码绘制架构图。
• manim - 数学动画引擎。

Ruby

可视化工具

Data visualization tool library.

• YouPlot - 命令行工具，终端绘制可视化图表。

Go Top ↑

平台应用

Platform application.

• Tableau - 可视化分析平台，商业软件。

  • Rath - 自动化的数据探索和可视化分析平台，开源软件。
  • Graphic Walker - Tableau 的开源替代品。

• Grafana - 数据可视化和监控解决方案，开源软件。

Go Top ↑