在資料視覺化中，除了將資料的特性透過視覺化方法呈現以外，一個清楚的導覽也是十分重要，好的視覺化圖表應該是不用做太多的解釋即可讓人一目瞭然，這時候繪製導覽圖就十分的重要，以上一篇的成果為例，資料的特性透過二維坐標、圓形、圓形大小、以及顏色所表示，那值域的表達就十分重要。顏色代表的是文章總點擊數量，從低到高的顏色是由深到淺，這時候我們必須繪製導覽圖讓使用者理解值域的範圍，同時也要注意做圖的美觀這才能形成較賞心悅目的資料視覺化圖表。

對於任何的視覺化圖表來說，適當的切分值域的區間是很重要的，人眼能夠辨認的形狀大小以及顏色數量在數量龐大時就會十分難以辨別，因此在圖中圓圈大小切分為三，以三個等級來表示足以讓人眼區分; 而顏色也切分為十個等級並繪製導覽圖讓使用者能夠辨別。

導覽圖繪製

function drawColorPanel( based_term ){
	var color_info_panel_x_start_at = 
		$(".mainChart")[0].getBoundingClientRect().width;

	var color_info_panel = svg.append("g")
		.attr(
			"transform",
			"translate(" + color_info_panel_x_start_at + ","+ height/4 + ")"
		)
		.attr("class","color_panel");

	var color_panel_scale = 
		d3.scaleSequential().domain([10, 0]);

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

	color_info_panel.selectAll("rect")
				    .data(testArray)
				    .enter()
				    .append("rect")
				    .attr("x", function(d){return 10;})
				    .attr("y", function(d){return d*30;})
				    .attr("width", 10)
				    .attr("height", 30)
				    .attr("fill", function(d){
				    	return color_panel_scale(d);
				    });

	appendText( "high", 5, 10, color_info_panel );

	var color_panel_low_pos = 
		$(".color_panel")[0].getBoundingClientRect().height+10;

	appendText( "low", 5, color_panel_low_pos, color_info_panel );
}

切換兩張圖表

最後製作一個按鈕將兩張圖表進行切換即可一次觀察兩種視覺化圖表

$("#switch").click(function(){
	var on_off = parseInt($(".panel").attr("name"));
	console.log(typeof(on_off));
	d3.select("svg").remove();
	(on_off === 1) ? on_off = 2 : on_off = 1;

	if(on_off == 1){
		$("#switch").attr("value", "標籤每週總pv排名視覺化");
		createPanel();
		drawLine(rankByPvDataWithLine);
		biingDataAndDrawingBubble( rankByPvData, "pv", bubbles );
		drawColorPanel( "pv" );
	}
	else if(on_off == 2){
		$("#switch").attr("value", "標籤每週文章平均pv排名視覺化");
		createPanel();
		drawLine(rankByMeanDataWithLine);
		biingDataAndDrawingBubble( rankByMeanData, "mean", bubbles );
		drawColorPanel( "mean" );
	}

    $(".panel").attr("name", on_off);
});