这是一篇[答疑]，原题来自知乎：
可视化前端开发和web前端开发有什么区别？
两者学习方向差别大不大？
https://www.zhihu.com/question/433768421/answer/1617960363
Contra答：
字面意思上，可视化前端开发，其实是web前端开发的一种。
但我理解你这里的web前端开发，应该是特指一般意义的非游戏类的web应用，关键词是静态页面、表单、React/Vue、bootstrap、乃至前后分离等等等等。
而可视化或数据可视化，关注范围更局部一些，主要两部分：
数据源的获取、解析、变换等处理；
结合数据源做可视化曲线、特效等视觉处理。
第一部分，数据源的处理
基本与一般的web应用开发是一致的。
从本地获取数据，如基于Electron开发的桌面应用(仍然是前端技术)，从本地加载一个Excel。
从远程加载数据，如前后分离的静态页面，去服务器加载json文件，或者请求数据库的数据，关键词有fetch、promise、await等等。
第二部分，可视化特有的视觉效果
这个就有意思了，从底层实现来说，有进一步的细分，最粗线条的分法：
基于DOM的可视化
即直接使用html元素、svg、css等来做，例如最常见的可视化库d3.js；
基于canvas/webgl的可视化
会用到的可能就是pixijs、threejs这种渲染框架，或者直接使用canvas和webgl的api。
前端可视化玩法实在太多了，比如做一个移动的方块：
可以分别用以下方式实现：
纯css
js操作div
canvas draw
webgl draw
交互圈常用的p5js，一般属于canvas和webgl绘制类型。
而用canvas/webgl做久了，看到纯css的方案，顿觉清流清流清流!
怒推荐Chuan神的css-doodle。
题图就是由它生成。
再来一个例子，React算是所谓“一般意义web前端开发”很常用的UI框架，经常和Vuejs、Angularjs一起并称前端三大件，常用来做各种中大型的企业级应用。
但是也可以直接用来做可视化：
上图示例已开源，详见：
【编程德鲁伊 - 数学篇】JavaScript (React)傅里叶级数可视化
当然也可以用React + d3.js/pixi.js/threejs等做更有针对性的可视化。
其实我平时恰饭做的大量H5应用，绝大部分都是用React打底，再根据需要配合其他lib。
所以回到标题，“可视化前端开发和web前端开发有什么区别？”，其实还是局部包含关系，以及侧重点的问题。
而一眼望去海量的library，其实各有针对性，取决于项目特点，例如运行平台(PC浏览器/手机浏览器/小程序/App)、数据量、视觉效果(表格、曲线、2d、3d、粒子特效等)、开发习惯等等。
实验编程
关于实验编程 - 2020 八月
开源
【编程德鲁伊】系列的大部分代码开源在全球最大??交友网站：
https://github.com/avantcontra/coding-druid
【H5如何收发OSC】的大合集(附MaxMSP，p5js，processing，unity等代码示例)
https://github.com/avantcontra/osc-websocket-example
情报中心(语雀)
日常技巧快速分享
源代码、源文件、资源下载
公众号文章汇总，修订，更新
教学内容，课程资料
详情请看：
回来了，请坚持日拱一卒。情报中心改版。
知识星球
知识星球是我感谢各位赞赏的地方，在这里你将持续获取大部分系列的源代码以及无限次图文答疑。
还可以直接在情报中心的知识星球专属下载区获取资源。
有一点付费门槛，平均一天几毛钱，象征性过滤伸手党，也是对赞赏用户的尊重。
更多介绍，请刨公众号菜单：关于-知识星球。
付费教学
情报中心还有付费教学和VIP会员专属的小组。
在这里会放付费课程、教学资料、作业点评、问题解答等内容。
这一块目前试运行中，一可以提高答疑质量，二过滤无效问答省出时间写更多的文章，三也可以增加收入Cover公众号运营成本，简直三赢。
详情请至：
公众号菜单：关于教学 -> 付费教学
或者公众号发送关键字：付费咨询
答疑优先顺序：
付费咨询、VIP/课程会员(必答，优先)
知识星球(必答)
语雀情报中心(必答，抽空)
微信群(选答，尽量)
实验编程视频号
实验编程微信群
加群请扫码或搜索微信号：floatbug
烦请注明来自公众号。
您的鼓励，在看，点赞，收藏，转发，是我乱码的动力。
网站: floatbug.com
英文版全网ID：@avantcontra
微信公众号/视频号/知识星球/
知乎专栏/B站：实验编程
