1、大屏数据可视化总结

设计图尺寸计算方法 
单块屏幕分辨率(一般为1920x1080)，根据横排和竖排数目换算比例，根据主流显示器分辨率1920x1080，得到一个缩放值。将得到的缩放值赋予文档的body的scale属性，这样就可以在可视区域最大范围内看到页面整体的效果了。当然如果是长宽比过大，则需要以宽获取缩放值。

大屏设计注意点

1. 字体 
   字体过大或过小都会影响人的视觉，尤其是在大面积文字区。一般大面积的文字区是为了增强识别性，在兼顾整体效果的情况下应减小字号并增大行间距，以免带来视觉疲劳。

2. 配色 
   一般为暗色背景，蓝色系大家用的比较多，统计图饱和度和明度可以高些，一些线条可以使用高明度低饱和度的荧光色。另外和屏幕显示也有很大关系，如果显示器显示的不够鲜艳，可以适当提高饱和度。

3. 布局 
   重点突出，详略得当。

4. 观感 
   多屏组装会产生缝隙，因此应尽量避免使用会受到影响的元素。

5. 特效 
   有时为了追求更炫的效果，会添加一些对比度高的效果，比如在较暗背景下提亮某个点或区域，使整体富有层次感。

6. 动画 
   主要是为了提升视觉效果，既能提升层次感，又能增强视图表现力。

7. 交互 
   交互是为了增强用户体验。

一般情况下，只需要对设计图做还原就可以了，但是如果遇到一些比较坑的情况，比如显示器扩展不正确导致页面被拉伸或压缩，这时候就需要对此做应变处理。先得到被拉伸/压缩的比例，对整体视图做压缩/拉伸处理，再由其拉伸/压缩。使用浏览器的全屏功能，放弃物理全屏。以牺牲效果来达到效果。记住一点：变形针对视图的所有元素，局部变形可能会引起更难接受的效果，最好是针对body使用变形，这样既能保证效果，又能在显示器正常的情况下不做修改直接使用。

优点：供应商和开发改动较小，能比较快的解决问题。 
缺点：全屏功能成鸡肋，且不知道被拉伸比例的情况下只能靠猜和尝试获取被拉伸比例的近似值。

数据可视化的几种类型

统计数据可视化：用于对统计数据进行展示、分析。统计数据一般都是以数据库表的形式提供，常见的统计可视化类库有 
HighCharts、ECharts、G2、Chart.js 等等，都是用于展示、分析统计数据。 
关系数据可视化：主要表现为节点和边的关系，比如流程图、网络图、UML 图、力导图等。常见的关系可视化类库有 
mxGraph、JointJS、GoJS、G6 等。 
地理空间数据可视化：地理空间通常特指真实的人类生活空间，地理空间数据描述了一个对象在空间中的位置。在移动互联网时代，移动设备和传感器的广泛使用使得每时每刻都产生着海量的地理空间数据。常见类库如 
Leaflet、Turf、Polymaps 等等，最近 Uber 开源的 deck.gl 也属于此类。 还有时间序列数据可视化（如 
timeline）、文本数据可视化（如 worldcloud）等等。

Web 的可视化技术

• SVG：可缩放矢量图形（Scalable Vector Graphics），是基于可扩展标记语言（标准通用标记语言的子集）用于描述二维矢量图形的一种图形格式。

d3.js(Data-Driven Documents，nvd3.js、dc.js、c3.js) 

• Canvas 2D：Canvas 通过 JavaScript 来绘制 
2D 图形，通过逐像素来进行渲染。 

• Canvas 3D WebGL：WebGL（Web Graphic Library）是一个 JavaScript API，用于在任何兼容的 Web 浏览器中渲染 3D 图形。WebGL 程序由用 JavaScript 编写的控制代码和用 OpenGL 着色语言（GLSL）编写的着色器代码构成，这种语言类似于 C 或 C++，可在 GPU 上执行。three.js基础绘图库。