近年来,可视化越来越流行,许多报刊杂志、门户网站、新闻媒体都大量使用可视化技术,使得复杂的数据和文字变得十分容易理解,有一句谚语“一张图片价值于一千个字”,正是如此。D3 正是数据可视化工具中的佼佼者,基于 JavaScript 开发,项目托管于 GitHub。从 D3 诞生以来,不断受到好评,在 GitHub 上的项目仓库排行榜也不断上升。
吕之华喜欢阅读古籍,看古装剧,热爱传统文化。喜欢旅游、登山、远足。生活中有两样不可少:咖啡和葡萄酒。2014 年与好友创办 OUR D3.JS 数据可视化专题站,以 D3.js 为题发表一系列教学文章,获得读者好评。本教程即以专题站的文章为基础,整理简化而成。目前 OUR D3.JS 已经停止更新,新的内容在十二月咖啡馆工作室延续。内容撰写https://github.
本章以中国地图为例,介绍地图的制作方法。在数据可视化中,地图是很重要的一部分。很多情况会与地图有关联,如中国各省的人口多少,GDP多少等,都可以和地图联系在一起。地图数据的获取制作地图需要 JSON 文件。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。关于 JSON 的语法格式,可以学习【JSON 浅谈】系列。
树状图,可表示节点之间的包含与被包含关系。数据初始数据先写在一个 JSON 文件中,再用 D3 来读取。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。关于此格式的简介和语法规则,可分别参见两篇文章:JSON 简介和JSON 语法规则。
力导向图(Force-Directed Graph),是绘图的一种算法。在二维或三维空间里配置节点,节点之间用线连接,称为连线。各连线的长度几乎相等,且尽可能不相交。节点和连线都被施加了力的作用,力是根据节点和连线的相对位置计算的。根据力的作用,来计算节点和连线的运动轨迹,并不断降低它们的能量,最终达到一种能量很低的安定状态。力导向图能表示节点之间的多对多的关系。
本章制作一个饼状图。在布局的应用中,最简单的就是饼状图,通过本文你将对布局有一个初步了解。数据有如下数据,需要可视化:var dataset = [ 30 , 10 , 43 , 55 , 13 ];这样的值是不能直接绘图的。例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些值都不存在于数组 dataset 中。因此,需要用到布局,布局的作用就是:计算出适合于作图的数据。
布局,可以理解成 “制作常见图形的函数”,有了它制作各种相对复杂的图表就方便多了。布局是什么布局,英文是 Layout。从字面看,可以想到有“决定什么元素绘制在哪里”的意思。布局是 D3 中一个十分重要的概念。D3 与其它很多可视化工具不同,相对来说较底层,对初学者来说不太方便,但是一旦掌握了,就比其他工具更加得心应手。
坐标轴,是可视化图表中经常出现的一种图形,由一些列线段和刻度组成。坐标轴在 SVG 中是没有现成的图形元素的,需要用其他的元素组合构成。D3 提供了坐标轴的组件,如此在 SVG 画布中绘制坐标轴变得像添加一个普通元素一样简单。
与图表的交互,指在图形元素上设置一个或多个监听器,当事件发生时,做出相应的反应。什么是交互交互,指的是用户输入了某种指令,程序接受到指令之后必须做出某种响应。对可视化图表来说,交互能使图表更加生动,能表现更多内容。例如,拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等。用户用于交互的工具一般有三种:鼠标、键盘、触屏。
D3 支持制作动态的图表。有时候,图表的变化需要缓慢的发生,以便于让用户看清楚变化的过程,也能给用户不小的友好感。什么是动态效果前面几章制作的图表是一蹴而就地出现,然后绘制完成后不再发生变化的,这是静态的图表。动态的图表,是指图表在某一时间段会发生某种变化,可能是形状、颜色、位置等,而且用户是可以看到变化的过程的。
一个完整的柱形图包含三部分:矩形、文字、坐标轴。本章将对前几章的内容进行综合的运用,制作一个实用的柱形图,内容包括:选择集、数据绑定、比例尺、坐标轴等内容。添加 SVG 画布//画布大小var width = 400;var height = 400;//在 body 里添加一个 SVG 画布 var svg = d3.select("body") .append("svg") .attr("width", width) .
比例尺是 D3 中很重要的一个概念,上一章里曾经提到过直接用数值的大小来代表像素不是一种好方法,本章正是要解决此问题。为什么需要比例尺上一章制作了一个柱形图,当时有一个数组:var dataset = [ 250 , 210 , 170 , 130 , 90 ];绘图时,直接使用 250 给矩形的宽度赋值,即矩形的宽度就是 250 个像素。
柱形图是一种最简单的可视化图标,主要有矩形、文字标签、坐标轴组成。本文为简单起见,只绘制矩形的部分,用以讲解如何使用 D3 在 SVG 画布中绘图。画布是什么前几章的处理对象都是 HTML 的文字,没有涉及图形的制作。要绘图,首要需要的是一块绘图的“画布”。HTML 5 提供两种强有力的“画布”:SVG 和 Canvas。
先尝试用 D3 写第一个 HelloWorld 程序。学编程入门的第一个程序都是在屏幕上输出 HelloWorld,本课稍微有些不同,不是单纯的输出。HTML 是怎么输出 HelloWorld 的都知道 HTML 吧,如果不知道请下百度一下吧。在 HTML 中输出 HelloWorld 是怎样的呢,先看下面的代码。<html> <head> <meta charset="utf-8"> <title>
近年来,可视化越来越流行,许多报刊杂志、门户网站、新闻、媒体都大量使用可视化技术,使得复杂的数据和文字变得十分容易理解,有一句谚语“一张图片价值于一千个字”,的确是名副其实。各种数据可视化工具也如井喷式地发展,D3 正是其中的佼佼者。D3 是什么D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档。
关注时代Java