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>