利用HTML5 Canvas创建交互式Bubble Chart_H5之家 - 中国HTML5教程资源分享第一站

众所周知资讯图像一种使数据易于理解和充满娱乐性的方式。不同的人采用不同的方式使数据易于理解充满娱乐性，一些人通过充满创意的平面设计实现这个目标如打印资讯信息，另外也有一些人通过增加动画和交互性实现目标。软件工程师、研究者、业余设计师Josh Marinacci强烈推荐读者看Hans Rosling教授和一群富有想象力的人的TED会谈。这个会谈揭露了关于发展中国家的共同的神话。会谈中Rosling教授成功的关键是他采用一种非专业人士不能理解的方式渲染数据。他作品的核心是一个令人惊奇的Bubble Chart，可以随着时间的推移比较世界上的各个地区的数据信息。

Josh Marinacci也在其博客中详细地介绍了“如何利用HTML5 Canvas创建可以在移动桌面上运行的交互式图表以及如何利用真实数据填充图表。”下面让我们跟随作者学习如何创建我们自己的Bubble Chart。

准备工作：

需要知识：媒介HTML和JavaScript

需求：文本编辑器和现代浏览器

关于Bubble Chart

Bubble Chart就和它听起来一样是由气泡组成的图表，气泡实际上就是一些圆。但是Bubble Chart却能可视化五维数据，这也是其强大之处。每个气泡代表由 X和Y坐标定位的数据点，这和任何其他的线状图和散点图一样。可是每个气泡的大小和颜色属性可以表示另外两维的数据。如果我们动态显示图表，那么我们可以增加时间作为第五维数据。

尽管Bubble Chart的五个属性都可以代表任何类型的数据，但是实践中我们通常用X和Y坐标代表数字型数据，而气泡颜色这个属性用于区分两个不同的数据集。例如利用X和Y分表代表儿童的“死亡数”和“受教育比例”，而气泡颜色代表不同的国家。气泡大小一般用来代表某种事物的数量如某个国家的人口。当动态显示图标时，第五维的坐标用来代表时间如表示从1960年到现在。仔细地创造性地使用这些气泡属性是创造出一个与众不同的资讯图标的关键。

利用模拟数据创建简单的图表

数据本身应该代表按照一定标准分组随着时间变化的数据点。假设数据由5格国家，20个时间点(从1980到2000年)的数据组成。每个数据点由x、y和大小三个属性组成。初始化这些模拟数据的代码如下：

接下来在屏幕上用气泡描绘出这些数据，代码如下：

var canvas = document.getElementById(‘canvas’); var ctx = canvas.getContext(’2d’); var colors = ["red","green","blue","yellow","orange"]; var time = 0; function draw() { //bg and border ctx.fillStyle = ”white”; ctx.fillRect(0,0, canvas.width,canvas.height); ctx.strokeStyle = ”black”; ctx.strokeRect(0,0,canvas.width,canvas.height); //time indicator ctx.fillStyle = ”black”; ctx.fillText(“time “ + time, 10,20); //draw the data for the current time slice data[time].forEach(function(d) { ctx.save(); ctx.fillStyle = colors[d.country%colors.length]; ctx.globalAlpha = 0.5; ctx.beginPath(); ctx.arc(d.x,d.y,d.size,0,Math.PI*2); ctx.fill(); ctx.restore(); }); }

上述代码用白色填充背景，利用Canvas边框作为背景的边界。然后描绘当前时间指示器，最后描绘数据本身。每个数据点都根据当前点的x、y和大小描绘成相应的圆。每个国家的颜色从定义的颜色列表中选取。

基本表如下：

为了增加表的时间属性，我们只需要用不同的时间变量重复调用描绘函数重复描绘即可。代码如下：

$(“#play”).click(function() { var animdraw = function() { draw(); time++; if(time < data.length) { setTimeout(animdraw,100); } else { time = 0; } } animdraw(); });

获取“世界数据银行”的数据

至此已经创建了一个基本表。下面让我们利用一些真实的数据填充这个表让它更有意思。我们从“世界数据银行”选择需要的数据，它是一个庞大的组织，具有从UN和其他公开的数据源采集到的庞大的数据集。除了数据承载基地，它还有一个定制的报表生成器，它可以让你创建数据切片以支持多种格式的数据下载。

本文选择了“世界发展指标和全球发展金融”数据库。选择“东亚及太平洋地区”，“欧洲和中亚”，“拉丁美洲和加勒比地区”一些国家或地区作为集合，利用气泡的颜色属性表示不同的集合。选择“死亡率”、“人口密度”、“总人口”作为研究点，分别用x、y坐标以及气泡的大小属性表示。最后选择了时间变量。简单的点击“全选”按钮即可选择从1960年到现在以年为单位的数据变量。

现在我们已经选定了一份报告。点击“导出”按钮下载CSV文件格式的数据。我们可以利用Excel打开CSV文件查看从“世界数据银行”所得到的这份报告的内容。如果你利用Excel打开下载的CSV文件，将看到每个国家或者地区都有三行组成，我们选择的每个变量都有一行。另外你可能看到早年的一些数据值并不存在，这意味着那几年并没有收集这些国家的数据。

解析CSV数据