d3可视化Airline Routes（条形图）

最新推荐文章于 2025-03-15 16:58:49 发布

7TribeZ

最新推荐文章于 2025-03-15 16:58:49 发布

阅读量576

点赞数

分类专栏：可视化设计

本文链接：https://blog.youkuaiyun.com/wildand/article/details/90581323

版权

可视化设计专栏收录该内容

12 篇文章

订阅专栏

Airline routes visualization

1.数据

2.任务描述

显示不同的航空公司的航线数量

首先要对数据，所有的航线的数量按其航线公司进行一个聚合。用一个条形图将所有的航线的数量分割到不同的航空公司。

3.效果图

4.代码

我的代码有点呆，多的就不谈了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			font-family:Helvetica;
		}
		svg {
			width: 500px;
			height: 500px;

		}
		.top-label{
			font-size: 13px;
			font-style: italic;
			text-transform: uppercase;
	
		}
		.name-label{
			text-align: right;
			font-weight: bold;
			width: 90px;
			padding-right: 10px;
		}
		.clearfix{
			clear: box;
		}
		.bar{
			fill:DarkSlateBlue;
		}
		.bar-label{
			text-anchor: end;
		}
		.axis-label{
			text-anchor: middle;
			font-size: 13px;
		}
		.x.axis line{
			fill:none;stroke: #000;
		}
		.x.axis text{
			font-size: 13px;
		}
		.axis path{
			display: none;
		}
		.y.axis line{
			display: none;
		}
	</style>
</head>
<body>
	<script type="text/javascript" src="d3.v3.js">//我把d3源文件放在同个文件夹下了
 	</script> 
 	<script>

 			var airnames = new Array("Air Berlin","Air Canada","Air China","Air France","AirTran Airways","Alitalia","American Airlines","China Eastern Airlines","China Southern Airlines","Delta Air Lines","easyJet","Iberia Airlines","KLM Royal Dutch Airlines","Lufthansa","Ryanair","Shenzhen Airlines","Southwest Airlines","Turkish Airlines","US Airways")
			console.log(typeof(airnames));
    	 	var popData=[
    	 	{name:"",value:0},
    	 	{name:"",value:0},
    	 	{name:"",value:0},
    	 	{name:"",value:0},
    	 	{name:"",value:0},
    	 	{name:"",value:0},
    	 	{name:"",value:0},
    	 	{name:"",value:0},
    	 	{name:"",value:0},
    	 	{name:"",value:0},
    	 	{name:"",value:0},
    	 	{name:"",value:0},
    	 	{name:"",value:0},
    	 	{name:"",value:0},
    	 	{name:"",value:0},
    	 	{name:"",value:0},
    	 	{name:"",value:0},
    	 	{name:"",value:0},
    	 	{name:"",value:0}
    	 	];
    	 	for (var i=0;i<airnames.length;i++)
    	 	{
    	 		popData[i].name=airnames[i];
    	 	}
    	    d3.csv('Airlines Routes.csv',function(error,data){
   			for(var i=0;i<airnames.length;i++)
   			{
   				popData[i].value=data.filter(function(element){return element.AirlineName==airnames[i]}).length;

   			}

    	
    		console.log(popData);

    		//异步调用所以必须放在里面
	    	var margin={top:30,right:0,bottom:0,left:100},
	 		width=500-margin.left-margin.left,
	 		height=450-margin.top-margin.bottom;

	 		var x=d3.scale.linear()
	 		.domain([0,d3.max(popData,function(element){return element.value;})])
	 		.range ([0,width]);

	 		var y=d3.scale.ordinal()
	 		.domain(popData.map(function(element){return element.name}))
	 		.rangeBands([0,height],0.2,0);

	 		var xAxis=d3.svg.axis()
	 		.scale(x)
	 		.orient("top")
	 		.ticks(5);

	 		var yAxis=d3.svg.axis()
	 		.scale(y)
	 		.orient("left");

	 		var body=d3.select("body");

	 		body.append("h2")
	 		.text("The total number of airline routes");

	 		body.append("div")
	 		.attr("class","top-label name-label")
	 		.append("p")
	 		.text("AirlineName");

	 		body.append("div")
	 		.attr("class","top-label")
	 		.append("p")
	 		.text("number of airline routes");

	 		body.append("div")
	 		.attr ("class","clearfix");
	         

	 		var svg=body.append("svg")
	 		.attr("width",width+margin.left+margin.right)
	 		.attr("height",height+margin.top+margin.bottom)
	 		.append("g")
	 		.attr("transform","translate("+margin.left+
	 			","+margin.top+")");

	 		var barGroup=svg.append("g")
	 		.attr("class","bar");  

	 		barGroup.selectAll("rect")
	 		.data(popData)
	 		.enter().append("rect")
	 		.attr("x",0)
	 		.attr("y",function(d){return y(d.name)})
	 		.attr("width",function(d){return x(d.value)})
	 		.attr("height",y.rangeBand());

	 		svg.append("g")
	 		.call(xAxis)
	 		.attr("class","x axis");

	 		svg.append("g")
	 		.call(yAxis)
	 		.attr("class","y axis");


    	});

 		
 		
 		

 	</script> 
</body>
</html>