数据可视化

参考文档

Reference documentation.

• from Data to Viz (opens new window) - 数据可视化决策工具。

• 图之典 (opens new window)

• 看见统计 (opens new window)

• Data visualization guide (opens new window)

• 学习资料（Docs）

  • Graphics Related Lessons (opens new window)
    • WebGL Fundamentals (opens new window) - WebGL 基础知识。
    • WebGL2 Fundamentals (opens new window) - WebGL2 基础知识。
    • Three.js Fundamentals (opens new window) - Three.js 基础知识。
  • WebGL Guide (opens new window) - WebGL 技术指南。

• 可视化素材

  • 易知微 (opens new window)
  • big-screen-vue-data (opens new window)
  • go-view (opens new window) 大屏可视化开发平台
  • PPChart (opens new window)
  • Echarts 图表 (opens new window)
  • PoPo 数据可视化 (opens new window)

• 360 全景 (VR)

  • krpano (opens new window)
  • pannellum (opens new window)
  • Pano2VR (opens new window)
  • 720yun (opens new window)

• BI

  • DataEase (opens new window) 可视化开放平台
  • DataArt (opens new window) 可视化开放平台
  • Superset (opens new window) 可视化开放平台
  • Matebase (opens new window) 可视化开放平台
  • Directus (opens new window) 可视化开放平台
  • wazuh (opens new window) 开源的安全平台

• 文章

  • 前端与BI (opens new window) 阅读
  • BI 搭建 - 筛选条件 (opens new window) 阅读
  • 交叉表 (opens new window)
  • 什么是交叉表 (opens new window)

工具库

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

JavaScript

可视化工具

Data visualization tool library.

• D3 (opens new window) - 可视化库，数据驱动的，非常著名，许多图表库基于此开发。

• WebGL

  • A collection of WebGL and WebGPU frameworks and libraries (opens new window)
  • three.js (opens new window) - 3D 动画库，强大的 JavaScript 3D 动画库。
  • stackgl (opens new window) - WebGL 引擎。
  • PixiJS (opens new window) - 2D WebGL 渲染引擎，高性能。
  • sigma.js (opens new window) - 可视化大数据量的关系节点。
    • Graphology (opens new window)
  • 👉 React.js
    • react-three-fiber (opens new window) - 可视化库，React.js 的 Threejs 渲染器。

• Babylon.js (opens new window) - 游戏渲染引擎。

• 2D Drawing Tools (Canvas/SVG)

  • Canvas Engines Comparison (opens new window)
  • Rough.js (opens new window) - 创建具有手绘风格的草图图形。
  • Konva (opens new window) - 用于桌面和移动应用程序的 HTML5 2D canvas 库。
  • Paper.js (opens new window) - 矢量绘图工具。
  • Pencil.js (opens new window) - 2D 绘图库。
  • EaselJS (opens new window) - 工具套件，包含 Canvas、Web Audio 等工具库。
  • Fabric.js (opens new window) - 2D 绘图库，支持 Canvas、SVG。
  • Two.js (opens new window) - Web 2D 绘图工具库，基于 Canvas、Svg、WebGL。

• Others

  • Textures.js (opens new window) - 创建 SVG 模式。
  • ztext.js (opens new window) - 实现文字 3D 效果。
  • wordcloud2.js (opens new window) - 词云。
  • mermaid (opens new window) - txt 文本生成流程图。
  • Pintora (opens new window) - 利用可扩展的文本绘制成图表。
  • MathJax (opens new window) - 浏览器中的数学公式可视化引擎。
  • P5.js (opens new window) - 可视化工具。
  • Pts (opens new window) - 可视化工具。
  • vis.js (opens new window) - 动态的，基于浏览器的可视化库。

图表

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

• 常规图表（Regular Chart）

  • Chart.js (opens new window) - 最流行的轻量级库。
  • Echarts (opens new window) - 国内百度团队开发，功能丰富。
  • G2 (opens new window) - 蚂蚁金服团队开发
  • C3 (opens new window) - 基于 D3.js 的可重用图表库。
  • billboard.js (opens new window) - 基于 D3.js 的图表库。
  • Apexcharts (opens new window) - 图表库。
  • carbon-charts (opens new window) - 遵循 Carbon 风格，IBM 公司发布。
  • roughViz (opens new window) - 手绘风格图表。
  • vizzu (opens new window) - 交互式动画图表。
  • Frappe Charts (opens new window) - 基于 SVG 的高性能图表库。
  • Charts.css (opens new window) - CSS 图表库。
  • 👉 React.js
    • React-Vis (opens new window) - 图表库，Uber 团队开发。
    • visx (opens new window) - 图表库，基于 React.js 和 D3.js，Airbnb 团队开发。
    • nivo (opens new window) - 图表库，基于 React.js 和 D3.js。
    • Recharts (opens new window) - 图表库。
    • React Charts (opens new window) - 图表库。
    • Victory (opens new window) - 图表库。
    • react-chartjs-2 (opens new window) - 图表库，基于 Chart.js 的图表组件。

• 关系图（Relation Chart）

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

• 其它（Others）

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

动画

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

• CSS

  • Animate.css (opens new window) - 丰富的 CSS 动画工具库。
  • magic.css (opens new window) - CSS3 动画。
  • Hover.css (opens new window) - 添加鼠标悬停动画效果。（⚠️ 不再更新）
  • CSShake (opens new window) - 抖动效果。
  • Imagehover.css (opens new window) - 添加鼠标悬停，图片动画效果。（⚠️ 不再更新）
  • Whirl (opens new window) - CSS Loading 动画。
  • Transition.css (opens new window) - CSS 过渡动画。

• SVG

  • vivus.js (opens new window) - 为 SVG 提供动画效果。
  • SVG.js (opens new window) - 轻量级 SVG 动画库。
  • Snap.svg (opens new window)
  • bonsai.js (opens new window) - SVG 渲染器。
  • lazy line painter (opens new window) - SVG 路径动画。

• JavaScript

  • tween.js (opens new window) - 用于简单动画的 JavaScript 补间引擎。
  • Anime.js (opens new window) - 动画引擎，轻量的 JavaScript 动画工具库。
  • Velocity.js (opens new window) - 动画引擎，为元素提供动画效果。
  • mo.js (opens new window) - 丰富，强大的运动图形动画工具库。
  • KUTE.js (opens new window) - 高性能动画引擎。
  • Popmotion (opens new window) - 实用、灵活的 JavaScript 动画工具套件。
    • Framer Motion (opens new window) - 动画工具库，由 Popmotion 驱动。
  • tween.js (opens new window) - 动画工具库。
  • ScrollReveal (opens new window) - 为滚动进入视区的元素提供动画效果。
  • lax.js (opens new window) - 简单、轻量的工具库，创建平滑的滚动动画。
  • Typed.js (opens new window) - 打字动画效果。
  • Typeit (opens new window) - 打字动画效果。
  • Rough Notation (opens new window) - 为元素提供注释效果和动画。
  • Rellax (opens new window) - 元素滚动视差效果工具库。
  • simplePARALLAX.js (opens new window)
  • GSAP (opens new window) - 现代化的高性能动画工具库。
  • Shifty (opens new window) - 轻量级、高性能的低级动画工具库。
  • ts Particles (opens new window) - 简单的粒子动画。
  • particles.js (opens new window) - 轻量的粒子动画库。
  • CountUp.js (opens new window) - 数字文本动画。
  • granim.js (opens new window) - 创建交互式渐变动画。
  • dom-confetti (opens new window) - 五彩纸屑动画。
  • Canvas Confetti (opens new window) - 五彩纸屑动画。
  • Vanta.js (opens new window) - 数款页面 WebGL 背景动画。