繼上一篇建立好視覺化的基礎畫布後，我們需要將資料的特性映射到我們想要的視覺化元素上，X 軸的位置對應的是時間資訊，代表每週的特定起始日期; Y 軸代表的是熱門標籤的排名，由上而下是排名的高到低的映射; 圓圈的大小代表的是該標籤所包含的總文章數量，並將圓圈大小分成三個等級，將文章總數映射至這三個等級中; 最後圓圈顏色所代表的是標籤包含文章的所有點擊數總和，並將顏色分成十個等級，將點擊數映射至十個等級中。

實作

function biingDataAndDrawingBubble( data, based_term, svgElement ){
	var color_based_array = [];		//mean or total_pv
	var article_counts_array = [];

	//取得總pv數的序數陣列為的是取得十分位數的切點
	//依據文章的排序將之作為大小正規化的切點
	data.sort(function(a,b) { return +a.article_counts - +b.article_counts; });
	for( var i=0; i<data.length; i++ ){
		data[i].countsId = i;
		article_counts_array.push(data[i].article_counts);
		if(based_term == "pv")
			color_based_array.push(data[i].total_pv);
		else if(based_term == "mean")
			color_based_array.push(data[i].mean);
	}
	//大小的正規化方法
	var sizeScale = d3.scaleQuantile()
					  .domain([0, data.length/2, data.length])
					  .range([5, 10, 20]);
	//顏色的十分位數正歸化方法
	var colorQuantile = d3.scaleQuantile()
						.domain(color_based_array)
						.range([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]);

	//將十個數值對應到顏色的數值裡
	var colorScaleByQuantile = d3.scaleSequential()
	            				 .domain([0, 100]);

	(based_term == "pv") ? colorScaleByQuantile.interpolator(d3.interpolatePlasma) : colorScaleByQuantile.interpolator(d3.interpolateViridis);


	svgElement.selectAll("circle")
			.data(data)
			.enter()
			.append("circle")
			.attr("class", function(d){
				return "tag" + d.tagID;
			})
			.attr("cx", function(d){
				var t = x(new Date(d.weekStart));
				return t-4;
			})
			.attr("cy", function(d){
				var yPosition;

				(based_term == "pv") ? yPosition = y(d.total_pv_rank) : yPosition = y(d.meanRank);

				return yPosition;
			})
			.attr("r", function(d){
				var size = sizeScale(d.countsId);
				return size;
			})
			.attr("fill-opacity","0.6")
			.attr("stroke","black")
			.attr("stroke-width",0)
			.attr("fill", function(d){
				var quantileValue;

				(based_term == "pv") ? quantileValue = colorQuantile(d.total_pv) : quantileValue = colorQuantile(d.mean);

				return colorScaleByQuantile(quantileValue);
			})
}

重要函式說明

• domain - 可以設定要映射的資料特性，資料類型是陣列
• range - 可以是定映射後的視覺化員元素的值域，資料類型是陣列
• scaleQuantile - 可以設定以分位數作為切割的映射值

基本上視覺化的精髓則在於用適合的視覺化元素來代表一種資料的特性，透過複數元素的組合搭配不同維度的變化即可呈現一個視覺化圖表幫助我們解析資料。