Data Visualization Using D3.js

Presentation on theme: "Data Visualization Using D3.js"— Presentation transcript:

1 Data Visualization Using D3.js
Linsong Cheng

2 目录 什么是D3.js 为什么进行数据可视化 基本函数介绍 常见可视化图形 实例程序

3 什么是D3.js D3.js的全称是（Data-Driven Documents）
,是一个基于数据操作文档的JavaScript函 数库，使用它主要是用来做数据可视化的。 D3提供了各种简单易用的函数，大大简化 了 JavaScript操作数据的难度。D3已经将 生成可视化的复杂步骤精简到了几个简单 的函数，只需要输入几个简单的数据，就 能够转换为各种绚丽的图形。 由于它本质上是 JavaScript ，所以用 JavaScript 也是可以实现所有功能的，但它能大大减小你的工作量，尤其是在数据可视化方面，

4 D3.js的安装和学习 1. 下载 D3.js 的文件： 解压后，在 HTML 文件中包含相关的 js 文件即可。 2. 直接包含网络的链接： <script src=" charset="utf-8"></script> 学习网站：

5 为什么进行数据可视化

6 基本函数介绍 1. 绑定数据 var set = ["I like dog","I like cat","I like snake"]; var sp = d3.select("body").selectAll("p"); //选择元素 sp.data(set) //绑定数据 .text(function(d,i){ return d; }); 2. 选择元素 d3.select(“p”) 和 d3.selectAll(“p”)

7 基本函数介绍 3. 插入、删除数据 4. 比例尺 var new_h1 = body.append("h1");
new_h1.text("Append new h1"); new_h1.remove(); 4. 比例尺 var wx = d3.scale.linear() .domain([0,d3.max(dataset)]) .range([0,500]);

8 基本函数介绍 5. 坐标轴 var axis = d3.svg.axis() .scale(xScale)
.orient("bottom");

9 基本函数介绍 动态效果函数 一个动态柱状图实例： http://www.ourd3js.com/demo/transition.html
transition() 启动转变效果 duration() 指定转变持续多少时间 ease() 指定转变的方式 delay() 指定转变延迟 一个动态柱状图实例：

10 基本函数介绍 交互式操作 交互式操作实例： http://www.ourd3js.com/demo/event.html
click ： 鼠标单击某元素时， mouseover ： 鼠标移到某元素上 mouseout ： 鼠标从某元素移开 mousemove ： 鼠标被移动 mousedown : 鼠标按钮被按下 mouseup : 鼠标按钮被松开 dblclick ： 鼠标双击 交互式操作实例：   .on("click", function(){ } )

11 常见可视化图形 Layout 是 D3 中 “制作常见图形的函数”，D3 中共有12组 Layout 函数，这些 函数不是为了在绘制中布局什么，而是对输入的数据进行转换，转换成容易 进行可视化的数据。 Layout的API：

12 常见可视化图形 Pie： var dataset = [ 30 , 10 , 43 , 55 , 13 ];
var pie = d3.layout.pie();

13 常见可视化图形 var force = d3.layout.force() .nodes(nodes) .links(edges) .size([width,height]) .linkDistance(200) .charge([-100]) .start(); Force:

14 常见可视化图形 结合地图和力学图，制作可拖动的地图：

15 实例程序 https://github.com/mbostock/d3/wiki/Gallery
提供了各种简单易用的函数，大大简化了数据可视化的难度 数据和可视化分离开来，提高开发效率

16 Thanks！