数据可视化技术栈初探

小结最近接触的数据可视化知识

开发方式

• App 独立应用
  通过 Unreal 或 Unity 直接实现完整项目，打包为独立应用，最稳定，也最强大
• Web 网页
  • 3D WebGL：Blender 制作模型，ThreeJS 进行绘制
  • 2D
    • HTML + CSS
    • SVG
    • Canvas

动效实现方案

• 视频
  • webm 谷歌开源的格式，压缩率高，清晰度好，没有专利问题
• 动图
  • gif/apng/webp/avif：使用 AE/Blender 制作动效序列帧，用 Gimp 转化成动图
  • svg：使用矢量软件制作并导出 svg 图片
    • 使用 css 实现动画效果
    • 使用 js 实现动画效果
    • 添加 svg 动画效果代码
  • png/jpg/tiff 等静态图片
    • 使用 css 实现动画效果
    • 使用 js 实现动画效果
    • 结合 svg 动画方法封装动画效果

原型/动效/UI 设计相关软件/仓库

• Affinity Photo/Designer/Publisher
  https://affinity.serif.com
• Origami Studio
  https://origami.design
• 站酷搜索
  https://www.zcool.com.cn/search/content?word=可视化
• 站酷数据可视化大佬
  https://www.zcool.com.cn/u/15677726
• 易知微素材广场
  https://easyv.cloud/market
• SVG 基础及其动画应用浅析 https://juejin.cn/post/6976876179496124430

动效 svg/canvas JS 库

• https://threejs.org
• http://maxwellito.github.io/vivus
• https://svgjs.dev
• http://snapsvg.io
• https://konvajs.org

静态图片封装 svg 动画的两种方式

<svg viewBox="0 0 1620 1028">
  <image href="demo.png">
    <animateMotion
      begin="0s"
      dur="10s"
      repeatCount="indefinite"
      path="M10 80 Q 77.5 10, 145 80 T 280 80"
    />
  </image>
</svg>

<svg viewBox="0 0 1620 1028">
  <g>
    <image href="demo.png" />
    <animateMotion
      begin="0s"
      dur="10s"
      repeatCount="indefinite"
      path="M10 80 Q 77.5 10, 145 80 T 280 80"
    />
  </g>
</svg>