define("techm_viz_ext_usmmps-src/js/render", [], function() {

/*
* This function is a drawing function; you should put all your drawing
logic in it.
* it's called in moduleFunc.prototype.render
* @param {Object} data - proceessed dataset, check dataMapping.js
* @param {Object} container - the target d3.selection element of plot a
rea
* @example
* container size:
this.width() or this.height()
* chart properties: this.properties()
* dimensions info:
data.meta.dimensions()
* measures info:
data.meta.measures()
*/
var render = function(data, container) {
// TODO: add your own visualization implementation code below ..
.
container.selectAll("svg").remove();
container.selectAll("g").remove();
var width = this.width(),
height = this.height();//
var zoomed;
var zoom = d3.behavior.zoom().translate([0, 0])
.scale(1).on("zoom", zoomed).scaleExtent([1, 8]);
var projection = d3.geo.albersUsa().scale([1000])/*.translate([width,height])
*/;
var path = d3.geo.path().projection(projection);
var svgg = container.append("svg").attr("height",height).attr("width",width).
call(zoom,function(){console.log("zoomed");});
var rect = container.append("g").append("rect").attr("width",220).attr("height
",90).attr("x", width-255).attr("y", 20).style("opacity",0);
var svgFcode = container.append("g","#101").append("text").attr("x", width-255
).attr("y",36 ).style("font-size", "14px");
var svgDtime = container.append("g","#101").append("text").attr("x", width-255
).attr("y",54 ).style("font-size", "14px");
var svgAtime = container.append("g","#101").append("text").attr("x", width-255
).attr("y",72 ).style("font-size", "14px");
var svgAline = container.append("g","#101").append("text").attr("x", width-255
).attr("y",90 ).style("font-size", "14px");
var svgCpair = container.append("g","#101").append("text").attr("x", width-255
).attr("y",108 ).style("font-size", "14px");
var chartt = d3.json("cb_2014_us_state_20m.json", function(json){
svgg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d",path)
.attr("fill","white")
.attr("stroke","grey");

d3.csv("CleanFlightData.csv",function(fdata){
svgg.selectAll("path").data(fdata).enter().append("circle").attr("r",3).
attr("transform", function(d) {
var res;

if(projection([-1*d.Dest_Long,d.Dest_Lat]) != null & projection(

[-1*d.Dep_Long,d.Dep_Lat]) != null ){
res = "translate(" + projection([
-1*d.Dep_Long,
d.Dep_Lat
]) + ")" ; }
else
{res = "translate(" + [0,0]+ ")"; }
return res;
}).style("fill","brown");
svgg.selectAll("path").data(fdata).enter().append("circle").attr("r",3).at
tr("stroke-width",1.5).attr("transform", function(d) {
var res;
if(projection([-1*d.Dest_Long,d.Dest_Lat]) != null & projection(
[-1*d.Dest_Long,d.Dest_Lat]) != null ){
res = "translate(" + projection([
-1*d.Dest_Long,
d.Dest_Lat
]) + ")" ; }
else
{res = "translate(" + [0,0]+ ")"; }
return res;
}).style("fill","none").attr("stroke","brown");
svgg.selectAll("path").data(fdata).enter().append("path")
.attr("d",function(d){
if(projection([-1*d.Dest_Long,d.
Dest_Lat]) != null & projection([-1*d.Dep_Long,d.Dep_Lat]) != null ){
var dx = projection([-1*d.Dest_L
ong,d.Dest_Lat])[0]-projection([-1*d.Dep_Long,d.Dep_Lat])[0],
dy = projection([-1*d.De
st_Long,d.Dest_Lat])[1]-projection([-1*d.Dep_Long,d.Dep_Lat])[1],
dr = Math.sqrt(dx * dx +
dy * dy);
return "M" + projectio
n([-1*d.Dep_Long,d.Dep_Lat])[0] + "," + projection([-1*d.Dep_Long,d.Dep_Lat])[1]
+ "A" + dr + "," + dr +
" 0 0,1 " + proj
ection([-1*d.Dest_Long,d.Dest_Lat])[0] + "," + projection([-1*d.Dest_Long,d.Dest
_Lat])[1];
}})
.attr("fill","none")
.attr("stroke","blue")
.on("mouseover",function(d){
d3.select(this).attr("stroke","orange").attr("stroke-wi
dth",5);
svgAtime.text("ARRIVAL TIME" + ": " + d.Arrival_Time).at
tr("fill","black");
svgDtime.text("DEPARTURE TIME" + ": " + d.Depart_Time).a
ttr("fill","black");
svgFcode.text("FLIGHT CODE" + ": " + d.AC_ID).attr("fill
","black");
svgAline.text("AIR LINE" + ": " + d.Airline).attr("fill"
,"black");
svgCpair.text("CITYPAIR" + ": " + d.City_Pair).attr("fil
l","black");
rect.style("opacity", 0.3);
})

.on("mouseout",function(){
d3.select(this).attr("stroke","blue").attr("stroke-width
",1);
rect.style("opacity",0);
svgAtime.attr("fill","white");
svgDtime.attr("fill","white");
svgFcode.attr("fill","white");
svgAline.attr("fill","white");
svgCpair.attr("fill","white");
})
;
zoomed = function(){
svgg.attr("transform", "translate(" + d3.event.translate + ")scale(" +
d3.event.scale + ")");
console.log("zoomed triggered");
} ;
});
});

};
return render;
});