数据可视化

214 阅读2分钟

1 . 什么是数据可视化?

anything that converts data into a visual representatioon(like charrts、graphs、maps,sometimes even just tables)

0694.png

  • 数据可视化可分为科学可视化 、信息可视化两部分

0695.png

2 . why 数据可视化?

  • 记录信息

  • 分析推理

  • 证实假设

  • 交流思想

3 . 可视化设计原则和具体方法

能够正确表达数据中的信息而不产生偏差和歧义。

原则:

  • 准确的展示数据
  • 节省笔墨
  • 节省空间
  • 消除不必要的“无价值”的图形
  • 在最短时间内传达更多的信息

4 . 感知

0696.png

0697.png

0698.png

0699.png

0700.png

0701.png

0702.png

5 . 视觉编码

0703.png

6 . 面对前端的数据可视化工具库

6 . 1 D3

D3 是数据可视化开源的 JavaScript 函数库 ,被认为最好的 JavaScript可视化框架之一。

6 . 2 Vega

Vega 是一种可视化语法 。通过声明式语言 ,可以用 JSON 格式描述可视化的视觉外观和交互行为 ,并使用 Canvas 或 SVG 生成视图。

6 . 3 G2

G2 可视化引擎 ,一套面向常规统计图表 ,以数据驱动的高交互可视化图形语法。一条语句即可使用 Canvas 或者 SVG 构建出可交互的统计图表。

补充 :什么是 canvas?

canvas 是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.

Canvas标签起初只是创造了一个固定大小的画布,它公开了一个或多个渲染上下文,而我们想对它进行绘制就需要找到渲染上下文。

0704.png

补充 :什么是 svg?

  1. SVG是 Scalable Vector Graphics 的缩写 意为可缩放矢量图形
  2. SVG是一个基于文本的开放网络标准,用来定义用于网络的矢量图形
  3. SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失,因此能够优雅而简洁地渲染不同大小的图形,并和CSS,DOM,JavaScript和SMIL等其他网络标准无缝衔接
  4. SVG 使用 XML 格式定义图形
  5. SVG是万维网联盟的标准与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

0705.png

6 . 4 Echarts

Echarts 是一个使用 JavaScript 实现的开源可视化库 。