前面已介紹資料視覺化的工具，而此篇使用 javascript & D3.js 實作第一個視覺化來初探資料視覺化的奧妙，這裡我們會簡單利用一些概念來講解並撰寫一些程式碼來實作。

這次我們要實作的是氣泡圖的變形，利用二維的 XY 座標圖搭配 bubble chart 的概念做成，而進行的資料來源及故事則是獲取網路上的某內容網站。

目的

資料來源可為任何一個內容網站系統，可以是痞客邦或是 Dcard 等撰寫文章的系統，而這次視覺化的目的是為了呈現特定時間內文章分類所獲得的聲量變化，藉此來分析怎樣的文章分類較受歡迎，以及他的周變化及趨勢。

資料說明

擷取三月至六月的文章資料，而文章資料必須帶有以下欄位

• tagName - 標籤名稱
• total_pv - 文章點擊量總數（亦可以是聲量的量化值）

取得資料的方法可以使用爬蟲技術來達成，這之後可以做一個案例來演示，而此處只針對資料視覺化應用進行說明，而我們須將這些資料組成我們需要的結構，進而將此結構提供給視覺化方法使用，資料結構如下：

[{"tagID":0,"tagName":"延伸閱讀","articleCounts":6879,"totalPV":331686,"totalPVRank":1,"weekStart":"2017-03-26","timeArray":[1,1,1,1,1,1,1,1,1,1,1,1,1,1]},{"tagID":1,"tagName":"正面思考","articleCounts":1448,"totalPV":124024,"totalPVRank":9,"weekStart":"2017-03-26","timeArray":[1,1,1,1,1,1,1,1,1,1,1,1,1,1]}]

將全部的標籤的資訊都儲存為 JSON 格式並帶有以下欄位：

• tagID
• tagName
• articleCounts - 該標籤的文章總數
• totalPV - 總點擊數
• totalPVRank - 總點擊排名
• weekStart - 開始日期
• timeArray - 時間陣列，有出現的時間區段顯示 true (1)

開始做圖

利用 D3 來進行二維圖的繪製，首先我們需要先設定畫布以及時間軸

function createPanel(){

	//設定主要畫布的寬高
	svg = d3.select("#main_panel")
				.append("svg")
				.attr("width", panel_width)
				.attr("height", panel_height);

	time_series_bubble_chart = svg.append("g")
									  .attr("class", "mainChart");

	//時間軸x方向的設定
	x = d3.scaleTime()
	        .domain([new Date(startTime),new Date(endTime)])
	        .range([0,width-20]);

	//時間軸y方向的設定
	y = d3.scaleLinear()
			.domain([1, 20])
			.range([bubbleLimitHeightTop, height-bubbleLimitHeightBottomBlank]);


	timeAxis = d3.axisBottom(x)
	                .tickFormat(d3.timeFormat("%m/%d"))
	                .ticks(15);

	gtimeX = time_series_bubble_chart.append("g")
	    		.attr("transform","translate("+50+", "+(height-60)+")")
	    		.attr("class","timeAxis");

	gtimeX.call(timeAxis)
	   	  .attr("fill","none")
	      .attr("stroke","#000")
	      .selectAll("text")
	      .attr("fill","#000")
	      .attr("stroke","bold")
	      .style("font-size","18px")
	      .style("text-anchor", "end")
	      .attr("dx", "-.8em")
	      .attr("dy", ".15em")
	      .attr("transform", "rotate(-45)");


	bubbles = time_series_bubble_chart.append("g")
	    			.attr("transform","translate(50, -15)");

	svg.call(tool_tip);
}

如此一來就可以將時間軸設定完成，我們利用開始時間來作為 X 軸的定義，而 Y 軸的定義則是排名的順序，至於細節的函式使用以及 bubble chart 的繪製下一篇可繼續探討，最後先附上成果。