数据可视化D3相关记录

记载本学期数据可视化相关课程内容，主要为D3直方图、饼图、力导向图、地图相关记录。

直方图

直方图是常见的几种数据可视化方式之一，横轴表示数据种类，纵轴表示数据大小，以柱体长短直观展示数据分布。

以以下数据为例，画一个辅以x轴，y轴的直方图。

var X = ['A','B','C','D','E'];
var Y = [5,8,3,6,12,9,];

画布

var svg=d3.select("body")
          .attr("width",w)
		  .attr("height",h);

x轴

var xScale = d3.scaleOrdinal()
			   .domain(X)
			   .range([200,240,280,320,360,400,440]);//X轴起点位置及间隔
var xAxis = d3.axisBottom()
			  .scale(xScale);
svg.append('g')
   .call(xAxis)
   .attr("transform", "translate(0," + (h - padding.bottom) + ")")
   .selectAll("text")
   .attr("dx", "20px")
   .attr("font-size", "14px");

y轴

// y轴      
var yScale = d3.scaleLinear()
	           .domain([0, 15])
			   .range([h - padding.bottom, padding.top]);
var yAxis = d3.axisLeft()
		      .scale(yScale)
			  .ticks(5);//y轴格数
svg.append('g')
   .call(yAxis)
   .attr("transform", "translate(" + 200 + ",0)");

柱体

var bar = svg.selectAll(".bar")
			 .data(Y)
			 .enter().append("g")
			 .attr("class", "bar")
		     .attr("transform", function(d, i) {
   
			     return "translate(" + (xScale(i * 30)+5) + "," + yScale(d) + ")";
		      });
bar.append("rect")
   .attr("x",1)
   .attr("width", 30)
   .attr("height", function(d) {
   
	   return h - yScale(d) - padding.bottom;
	})
   .attr("fill",function(d,i){
   
	   return d3.rgb(100,d,220);
	})

饼图

饼图是另一种常见的数据可视化方式，能更直观地看到各个数据的分布占比情况，延用直方图数据绘制一个饼图中的环状图。

var svg=d3.select("body")
		  .attr("width",w)
		  .attr