Browse Category: 前端

数据可视化基本概念

定义

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

广义数据可视化: 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打断

指定线段生成器

绘制线段

散点图

过渡效果

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

散点

布局

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

弧生成器

添加作图所需分组

添加路径

D3教程

集群图

http://www.ourd3js.com/wordpress/?p=245

资料

D3.js 飞速入门 http://edu.csdn.net/course/detail/1665

1. 第一个D3程序
2. 制作柱形图 
3. 为柱形图添加坐标轴 
4. 用生成器制作折线图 
5. 有动态效果的散点图 
6. 布局的简单应用

CSDN博客 http://blog.csdn.net/lzhlzz

OUR D3.JS http://www.ourd3js.com/wordpress/?p=2209#more-2209

数据可视化与 D3.js http://edu.csdn.net/course/detail/17951. 数据可视化

  1. 数据可视化
    1.1 计算机图形学
    1.2 历史简介
    1.3 目的
    1.4 常用工具
    2. D3.js
    2.1 简介
    2.2 选择集和数据绑定
    2.3 布局

精通D3.js:交互式数据可视化高级编程

  • 1
  • 2