利用HTML5 Canvas創(chuàng)建交互式Bubble Chart
Josh Marinacci也在其博客中詳細(xì)地介紹了“如何利用HTML5 Canvas創(chuàng)建可以在移動(dòng)桌面上運(yùn)行的交互式圖表以及如何利用真實(shí)數(shù)據(jù)填充圖表。”下面讓我們跟隨作者學(xué)習(xí)如何創(chuàng)建我們自己的Bubble Chart。
準(zhǔn)備工作：
需要知識：媒介HTML和JavaScript
需求：文本編輯器和現(xiàn)代瀏覽器
關(guān)于Bubble Chart
Bubble Chart就和它聽起來一樣是由氣泡組成的圖表，氣泡實(shí)際上就是一些圓。但是Bubble Chart卻能可視化五維數(shù)據(jù)，這也是其強(qiáng)大之處。每個(gè)氣泡代表由 X和Y坐標(biāo)定位的數(shù)據(jù)點(diǎn)，這和任何其他的線狀圖和散點(diǎn)圖一樣?？墒敲總€(gè)氣泡的大小和顏色屬性可以表示另外兩維的數(shù)據(jù)。如果我們動(dòng)態(tài)顯示圖表，那么我們可以增加時(shí)間作為第五維數(shù)據(jù)。
盡管Bubble Chart的五個(gè)屬性都可以代表任何類型的數(shù)據(jù)，但是實(shí)踐中我們通常用X和Y坐標(biāo)代表數(shù)字型數(shù)據(jù)，而氣泡顏色這個(gè)屬性用于區(qū)分兩個(gè)不同的數(shù)據(jù)集。例如利用X和Y分表代表兒童的“死亡數(shù)”和“受教育比例”，而氣泡顏色代表不同的國家。氣泡大小一般用來代表某種事物的數(shù)量如某個(gè)國家的人口。當(dāng)動(dòng)態(tài)顯示圖標(biāo)時(shí)，第五維的坐標(biāo)用來代表時(shí)間如表示從1960年到現(xiàn)在。仔細(xì)地創(chuàng)造性地使用這些氣泡屬性是創(chuàng)造出一個(gè)與眾不同的資訊圖標(biāo)的關(guān)鍵。
利用模擬數(shù)據(jù)創(chuàng)建簡單的圖表
數(shù)據(jù)本身應(yīng)該代表按照一定標(biāo)準(zhǔn)分組隨著時(shí)間變化的數(shù)據(jù)點(diǎn)。假設(shè)數(shù)據(jù)由5格國家，20個(gè)時(shí)間點(diǎn)(從1980到2000年)的數(shù)據(jù)組成。每個(gè)數(shù)據(jù)點(diǎn)由x、y和大小三個(gè)屬性組成。初始化這些模擬數(shù)據(jù)的代碼如下：
var data = [];
for(var t=0; t<20; t++) {
var cdata = [];
data[t] = cdata;
for(var country=0; country<5; country++) {
cdata.push({
x:50+Math.random()*500,
y:50+Math.random()*300 ,
size: 3+Math.random()*20,
country: country});
}
}
接下來在屏幕上用氣泡描繪出這些數(shù)據(jù)，代碼如下：
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邊框作為背景的邊界。然后描繪當(dāng)前時(shí)間指示器，***描繪數(shù)據(jù)本身。每個(gè)數(shù)據(jù)點(diǎn)都根據(jù)當(dāng)前點(diǎn)的x、y和大小描繪成相應(yīng)的圓。每個(gè)國家的顏色從定義的顏色列表中選取。
基本表如下：
為了增加表的時(shí)間屬性，我們只需要用不同的時(shí)間變量重復(fù)調(diào)用描繪函數(shù)重復(fù)描繪即可。代碼如下：
$(“#play”).click(function() {
var animdraw = function() {
draw();
time++;
if(time < data.length) {
setTimeout(animdraw,100);
} else {
time = 0;
}
}
animdraw();
});
獲取“世界數(shù)據(jù)銀行”的數(shù)據(jù)
至此已經(jīng)創(chuàng)建了一個(gè)基本表。下面讓我們利用一些真實(shí)的數(shù)據(jù)填充這個(gè)表讓它更有意思。我們從“世界數(shù)據(jù)銀行”選擇需要的數(shù)據(jù)，它是一個(gè)龐大的組織，具有從UN和其他公開的數(shù)據(jù)源采集到的龐大的數(shù)據(jù)集。除了數(shù)據(jù)承載基地，它還有一個(gè)定制的報(bào)表生成器，它可以讓你創(chuàng)建數(shù)據(jù)切片以支持多種格式的數(shù)據(jù)下載。
本文選擇了“世界發(fā)展指標(biāo)和全球發(fā)展金融”數(shù)據(jù)庫。選擇“東亞及太平洋地區(qū)”，“歐洲和中亞”，“拉丁美洲和加勒比地區(qū)”一些國家或地區(qū)作為集合，利用氣泡的顏色屬性表示不同的集合。選擇“死亡率”、“人口密度”、“總?cè)丝?rdquo;作為研究點(diǎn)，分別用x、y坐標(biāo)以及氣泡的大小屬性表示。***選擇了時(shí)間變量。簡單的點(diǎn)擊“全選”按鈕即可選擇從1960年到現(xiàn)在以年為單位的數(shù)據(jù)變量。
現(xiàn)在我們已經(jīng)選定了一份報(bào)告。點(diǎn)擊“導(dǎo)出”按鈕下載CSV文件格式的數(shù)據(jù)。我們可以利用Excel打開CSV文件查看從“世界數(shù)據(jù)銀行”所得到的這份報(bào)告的內(nèi)容。如果你利用Excel打開下載的CSV文件，將看到每個(gè)國家或者地區(qū)都有三行組成，我們選擇的每個(gè)變量都有一行。另外你可能看到早年的一些數(shù)據(jù)值并不存在，這意味著那幾年并沒有收集這些國家的數(shù)據(jù)。
解析CSV數(shù)據(jù)
如果你用Excel打開報(bào)告，它看起來只是一堆行。我們需要把數(shù)據(jù)解析成我們能用的形式。為了解析數(shù)據(jù)文件，我們需要CSV解析程序。Josh Marinacci從Ben Nadel下載了一個(gè)解析程序，很好用。為了下載CSV文件并解析它Josh Marinacci使用AJAX調(diào)用jQuery。
$(“#load”).click(function() {
$.ajax({
url: ”data.csv”,
context: document.body,
success: function(c) {
var csvdata = CSVToArray(c);
console.log(“got to here “ + csvdata[1]);
}
});
}
CSV文件被解析成由許多行組成的文件，這些行可以繼續(xù)進(jìn)行子劃分被劃分成列。我們可以通過先列循環(huán)再行循環(huán)的方式處理CSV文件。
data = [];
//start at 9 to skip non-year columns and first few years
for(var t=9; t
var cdata = [];
//loop through rows by threes
for(var i=1; i
var row_mort = csvdata[i];
var row_dens = csvdata[i+1];
var row_total = csvdata[i+2];
var country = (i-1)/3;
cdata.push({
x:row_dens[t] ,
y:row_mort[t],
size: row_total[t],
country: country,
});
}
data[t-9] = cdata;
}
注意上述代碼是從第9列開始處理數(shù)據(jù)的，不僅跳過了數(shù)據(jù)不完整的的前幾年的數(shù)據(jù)點(diǎn)也跳過了一些元數(shù)據(jù)(如國家名字等等)。處理行的時(shí)候每次循環(huán)是處理三行數(shù)據(jù)目的是通過一次循環(huán)可以處理一個(gè)國家或地區(qū)的數(shù)據(jù)。
如果僅僅按照這種方式處理數(shù)據(jù)，我們將什么都看不到。整個(gè)Canvas都被單一的顏色填充，這不是我們想要的結(jié)果。這是因?yàn)閿?shù)據(jù)并沒有按比例進(jìn)行適當(dāng)?shù)臄U(kuò)展。例如在1960年東亞和太平洋地區(qū)的人口是10億。為了描繪圖表需要按比例縮小這個(gè)值。為了適用于這些未修改的數(shù)據(jù)在繪制圖表的時(shí)Josh Marinacci使用了可擴(kuò)展的功能。只需要采用如下方式改變弧度即可：
ctx.arc(
d.x*6,
canvas.height-d.y*2.5,
d.size/(1000*1000*11),
0,Math.PI*2
);
上述代碼修改了x、y和氣泡大小的值適應(yīng)Canvas。氣泡大小必須除以1100萬才能得到合理的氣泡半徑。Y值由Canvas高度減去y乘以2.5得到。Canvas的標(biāo)準(zhǔn)坐標(biāo)系要從左上方開始以便被Canvas高度減去之后可以翻轉(zhuǎn)y坐標(biāo)。
修改數(shù)據(jù)變量的值是可以任意選取的，選擇某個(gè)特定的值是為了讓表格看起來比較美觀。具體選擇什么值依賴于正在描繪的數(shù)據(jù)。可以寫一個(gè)程序分析數(shù)據(jù)尋找合理的參數(shù)值，比如通過計(jì)算每一個(gè)變量的***值或者最小值。
表格看起來如下：
增加交互性
賦予表格時(shí)間這一點(diǎn)很好，增加表格的交互性實(shí)際上就是讓圖表閱讀者通過點(diǎn)擊不同的氣泡獲取更多的信息。由于Canvas完全使用像素而不是我們需要的圖形，這種圖形使得通過程序我們可以計(jì)算哪一個(gè)圖形被點(diǎn)擊了。幸運(yùn)地是Canvas中的氣泡都是***的圓，這將使事情容易很多。我們只需要計(jì)算被點(diǎn)擊點(diǎn)與氣泡圓心的距離即可，如果距離小于半徑就認(rèn)為該氣泡被點(diǎn)擊。代碼如下：
$(“#canvas”).mousedown(function(e) {
displayInfo = false;
data[time].forEach(function(d) {
var x = d.x*6;
var y = canvas.height-d.y*2.5;
var radius = d.size/(1000*1000*11);
var dis = dist(e.offsetX,e.offsetY,x,y);
if(dis < radius) {
displayInfo = true;
displayCountry = d.country;
}
});
draw();
});
如果讀者已經(jīng)點(diǎn)擊了某個(gè)圖形，顯示信息的布爾值將變?yōu)?ldquo;true”，保存當(dāng)前的國家并觸發(fā)重繪操作，同時(shí)在右上方通過代碼嵌入一個(gè)小的信息板。
注意在重繪代碼中填充的數(shù)據(jù)是來自于當(dāng)前時(shí)間片而不是用戶點(diǎn)擊表格時(shí)的時(shí)間。這就意味著當(dāng)表格被賦予時(shí)間屬性之后顯示的內(nèi)容將更新以便用戶可以看到隨著時(shí)間變化的數(shù)據(jù)。
if(displayInfo) {
ctx.save();
ctx.translate(canvas.width-305,5);
ctx.fillStyle = ”rgba(200,200,200,0.7)”;
ctx.fillRect(0,0,300,100);
ctx.strokeStyle = ”black”;
ctx.lineWidth = 2;
ctx.strokeRect(0,0,300,100);
ctx.fillStyle = ”black”;
var displayPoint = data[time][displayCountry];
ctx.fillText(“Region: “ + regions[displayPoint.country],5,20);
ctx.fillText(“Population Density: “ + displayPoint.x,5,20+20*1);
ctx.fillText(“Mortality rate: “ + displayPoint.y,5,20+20*2);
ctx.fillText(“Population: “ + displayPoint.size,5,20+20*3);
ctx.restore();
}
改變圖表的視覺效果
一般而言圖報(bào)表不應(yīng)該有這么多的可視元素否則將減損數(shù)據(jù)的潛在表現(xiàn)性，但是選擇一個(gè)***的顏色和模式將產(chǎn)生巨大的差別。為了讓這個(gè)表看起來更好，Josh Marinacci給每個(gè)氣泡增加了一層白色覆蓋物使圓更加***。同時(shí)也給每個(gè)圓增加一個(gè)黑色的邊框并為每個(gè)集合選擇不同的顏色。相對于計(jì)算每個(gè)氣泡顏色的漸變度Josh Marinacci采用先選擇一個(gè)基本的顏色然后改變它的透明度的方式為每個(gè)不同的氣泡選擇顏色。
var radgrad = ctx.createRadialGradient(
x-radius/10,y-radius/10,0,
x-radius/10,y-radius/10,radius+30);
radgrad.addColorStop(0, ’white’);
radgrad.addColorStop(0.5, ’white’);
radgrad.addColorStop(1, ’rgba(255,255,255,0.3)’);
ctx.globalAlpha = 0.6;
ctx.fillStyle = radgrad;
ctx.fill();
為了使圖表更加美觀上述代碼改變了字體增加了邊框，使用了一個(gè)來自于Subtle Patterns網(wǎng)站充滿娛樂性的背景。最終圖表如下：
總結(jié)
上面就是創(chuàng)建Bubble Chart的基本過程。利用上面的基本圖表你可以創(chuàng)建自己的Bubble Chart。你可以增加數(shù)據(jù)自動(dòng)調(diào)整功能，讓圖表閱讀者自己選擇數(shù)據(jù)集合擴(kuò)大或者縮小，你也可以在每個(gè)時(shí)間間隔中插入時(shí)間使時(shí)間劃分更細(xì)，動(dòng)態(tài)過程更流暢。
你可以從這獲取工程源碼，也可以從作者的個(gè)人網(wǎng)站JoshOnDesign.com獲取
原文鏈接：
http://www.netmagazine.com/tutorials/create-interactive-bubble-chart-html5-canvas
