显示不同的航空公司的航线数量
首先要对数据，所有的航线的数量按其航线公司进行一个聚合。用一个条形图将所有的航线的数量分割到不同的航空公司。
我的代码有点呆，多的就不谈了
<!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>
