Browse Tag: 可视化

数据可视化基本概念

定义

分为信息可视化和数据可视化

广义数据可视化: 2D,3D,运动等

狭义数据可视化: 将数据生成常见的二维图表

历史

起源18世纪,最早的图表是柱形图和折线图。

目的

有效地,明确地传递数据

构成要素

  • 大小
  • 颜色
  • 标签
  • 坐标
  • 关联

受欢迎

  • 作为大数据一部分
  • 比较简单
  • 好玩

常用工具

  • D3
  • Highcharts
  • Echarts
  • Processing.js

D3

  • 数据与DOM绑定
  • 数据转换与绘制独立
  • 代码简介
  • 大量布局
  • 基于SVG

基础概念

  • 选择集: 所有被选择元素的集合
  • 数据绑定
  • 比例尺
  • 生成器: 生成绘图所需的SVG元素
  • 过度: 控制元素的运动
  • 布局: 将输入数据转换成用于绘图的数据

选择集

D3 学习笔记

选择集

d3.select(), d3.selectAll() 选择元素返回的对象

  • 标签选择
  • # id选择
  • . class选择
  • 支持链式语法

数据绑定

datum(): 绑定一个数据到选择集上

data(): 绑定一个数组到选择集上

使用data() 绑定数据时,数据与元素格式不匹配

  • update 绑定数据
  • enter 元素不够集
  • exit 元素多余集

元素操作

  • append() 附加元素
  • insert() 元素前插入
  • remove() 删除

body.append("p").text("append p element");

添加简单图表

添加画布

添加矩形

  • x:矩形左上角的 x 坐标
  • y:矩形左上角的 y 坐标
  • width:矩形的宽度
  • height:矩形的高度

比例尺

比例尺: 将某一区域的值映射到另一区域,其大小关系不变。

线性比例尺

离散比例尺

坐标轴

  • d3.svg.axis():D3 中坐标轴的组件,能够在 SVG 中生成组成坐标轴的元素。
  • scale():指定比例尺。
  • orient():指定刻度的朝向,bottom 表示在坐标轴的下方显示。
  • ticks():指定刻度的数量。

在SVG中添加坐标轴

添加图示

生成器

读取文件

  • d3.text 读取服务器文本
  • d3.json 读取服务器json数据

折线

线段的第一个点和最后一个会连接,需要使用css打断

指定线段生成器

绘制线段

散点图

过渡效果

动作在初始状态到最终状态之间的变化

散点

布局

布局:计算出适合于作图的数据

弧生成器

添加作图所需分组

添加路径