初识可视化

221 阅读2分钟

1、可视化的概念

可视化是将数据组织成易理解和认知的结构,然后用图形的方式形象地呈现出来的理论、方法和技术

2、可视化与web开发的区别

  1. 使用语言侧重不同
  • web开发用html描述结构、用css描述表现、用js描述行为
  • 可视化主要使用图形api像canvas、svg、webgl
  1. 呈现内容侧重不同
  • web开发主要用来呈现块状的内容
  • 可视化主要呈现各种各样的形状和结构
  1. 针对的信息特征不同
  • web开发着重处理普通的文本和多媒体信息
  • 可视化着重处理结构化数据
  1. 样式细节控制和处理不同
  • web开发用css处理样式更加灵活,关注内容和样式
  • 可视化更多的处理偏视觉方面的细节信息控制图形的绘制和细节的呈现,像大小、距离、角度、高度、光线、阴影等等

3、可视化与web开发的共同点

  1. 最终都以图像呈现在浏览器上、有很多通用的方法论
  • 二者都要涉及dom、处理浏览器事件、采用同样的颜色表达方式、同样的资源请求方法
  1. 都是使用浏览器端的js
  2. 都有成熟的工具可供使用
  • web开发有响应式框架(Vue、React、Angular)、设计系统(Ant Design、ElementUI)、函数库(Underscore、Lodash)等等
  • 可视化的使用工具分为四类: (1)可视化有图表库(专业呈现各种类型图表):通常绘制大量的图表,比如,柱状图、折线图、饼图,还有一些简单的平面地图等等 像ECharts、chartist、chart.js (2)地理库(专业处理地图、地理位置):一座城市的交通线路和建筑物三维模型、一个园区的立体建筑模型等等(地图库的底层渲染是基于渲染库) 像Mapbox、Leaflet、Deck.gl、CesiumJS (3)渲染库(专业处理视觉呈现):绘制其他更灵活的图形、图像或者物理模型、2D 渲染可以选择 SpriteJS,3D 渲染可以选择 ThreeJS、BabylonJS 以及 SpriteJS3D 扩展等等 像ThreeJS、SpriteJS (4)数据驱动框架(处理数据的组织形式) 像D3.js

4、可视化与web开发的关系

image