I am having some trouble with getting my d3 map to load correctly.
When I have it running locally through mozilla it does not fail but when I place it on a web server it stops after the google map is loaded. I think there is trouble reading the 'mapData.features' object.
If i go into the console and copy the entire contents of main.js and run it through the console it performs all of the code which makes me think it may be running before everything is loaded. I am really new to d3 and javascript so any help would be greatly appreciated.
main.js
var venuesArray = [];
var mapData = [];
d3.json("venues.json",function(data){return venuesArray=data;});
d3.json("mapData.json",function(data){return mapData=data;});
var a = [];
$(function () {
var turnoverWidth = $(window).width()*0.3;
var turnoverHeight = $(window).height()*0.4;
var maxTO = d3.max(venuesArray,function(d){return +d.Half_Years[13];});
var minTO = d3.min(venuesArray,function(d){return +d.Half_Years[13];});
var halfYearLabels = ["H1FY10","H2FY10","H1FY11","H2FY11","H1FY12","H2FY12","H1FY13","H2FY13","H1FY14","H2FY14","H1FY15","H2FY15","H1FY16","H2FY16"];
// 40 Custom DDV colors
var colorLines = d3.scale.category10().domain([0,10]);
var numLines;
var selectedLinesData = [];
var selectedVenues = [];
var selectedFigures = [];
var maxYLines;
var colorCircle = d3.scale.linear()
.domain([minTO, maxTO])
.clamp(true)
.range(['#e6e600', '#e60000']);
var currencyFormat = d3.format("$,.0f");
var currencyFormat1 = d3.format("$.3s");
var $map = $("#map");
var map = new google.maps.Map($map[0], {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: {lat:-37.0884077, lng:144.961116}
});
var overlay = new google.maps.OverlayView();
var venuePopupDiv = d3.select("body").append("div")
.attr("id", "venue-pop-up")
.style("opacity", 0);
var venueTurnoverD3Div = d3.select("body").append("div")
.attr("id", "venue-pop-up-turnover-graph")
.style("opacity", 0);
var venueTurnoverSVG = venueTurnoverD3Div.append("svg")
.attr("id","turnoverSVG")
.style("width",turnoverWidth)
.style("height",turnoverHeight);
$( "#venue-pop-up-turnover-graph" ).draggable();
var marginTurnover = {top: 20, right: 30, bottom: 40, left: 100},
widthTurnover = parseInt(venueTurnoverSVG.style("width"),10) - marginTurnover.left - marginTurnover.right,
heightTurnover = parseInt(venueTurnoverSVG.style("height"),10) - marginTurnover.top - marginTurnover.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, widthTurnover],0.2)
.domain(halfYearLabels);
var y = d3.scale.linear()
.rangeRound([heightTurnover, 0],0)
.domain([0,4000000]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(currencyFormat1);
var line = d3.svg.line()
.x(function(d,i) {return x(halfYearLabels[i]); })
.y(function(d) {return y(d); });
var gTurnover = venueTurnoverSVG.append("g")
.attr("transform", "translate(" + marginTurnover.left + "," + marginTurnover.top + ")")
.attr("id","lineChart");
gTurnover.append("g")
.attr("class","x-axis")
.attr("transform", "translate(0," + heightTurnover + ")")
.call(xAxis)
.selectAll(".tick")
.selectAll("text")
.attr("transform","rotate(-45)")
.attr("y",0)
.attr("x",-28)
;
gTurnover.append("g")
.attr("class","y-axis")
.call(yAxis);
var venuePopupTitle = venuePopupDiv.append("div")
.attr("id", "venue-pop-up-title");
var venuePopupContent = venuePopupDiv.append("div")
.attr("id", "venue-pop-up-content");
var venuePopupTurnover = venuePopupContent.append("div")
.attr("id", "venue-pop-up-turnover");
var venuePopupEGM = venuePopupContent.append("div")
.attr("id", "venue-pop-up-egm");
var venuePopupNMR = venuePopupContent.append("div")
.attr("id", "venue-pop-up-nmr");
var lgaPopupDiv = d3.select("body").append("div")
.attr("id", "lga-pop-up")
.style("opacity", 0);
var lgaPopupTitle = lgaPopupDiv.append("div")
.attr("id", "lga-pop-up-title");
overlay.onAdd = function () {
var layer = d3.select(this.getPanes().overlayMouseTarget).append("div").attr("class", "SvgOverlay");
var svg = layer.append("svg");
var lgas = svg.append("g").attr("class", "LGAS");
var venues = svg.append("g").attr("class", "Venues");
overlay.draw = function () {
var markerOverlay = this;
var overlayProjection = markerOverlay.getProjection();
// Turn the overlay projection into a d3 projection
var googleMapProjection = function (coordinates) {
var googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);
var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];
}
var path = d3.geo.path().projection(googleMapProjection);
lgas.selectAll("path")
.data(mapData.features)
.attr("d", path)
.attr("class","myPathClass")
.enter().append("svg:path")
.attr("d", path)
.on("mouseover", lgaMouseOver)
.on("mouseout", lgaMouseOut);
venues.selectAll("circle")
.data(venuesArray)
.attr("cx", function (d) { return googleMapProjection([d.Longitude,d.Latitude])[0]; })
.attr("cy", function (d) { return googleMapProjection([d.Longitude,d.Latitude])[1]; })
.attr("r", "5px")
.attr('stroke-width', 1)
.attr("stroke", "black")
.attr("fill", function (d) { return colorCircle(d.Half_Years[13]); })
.enter().append("svg:circle")
.attr("cx", function (d) { return googleMapProjection([d.Longitude,d.Latitude])[0]; })
.attr("cy", function (d) { return googleMapProjection([d.Longitude,d.Latitude])[1]; })
.attr("r", "5px")
.attr('stroke-width', 1)
.attr("stroke", "black")
.attr("fill", function (d) { return colorCircle(d.Half_Years[13]); })
.on('mouseover', venueMouseover)
.on('mouseout', venueMouseout)
.on('click',venueMouseClick);
};
};
overlay.setMap(map);
function lgaMouseOver(d){
lgaPopupDiv.transition(500)
.style("display","block")
.style("opacity",0.9)
.style("z-index", 99);
$("#lga-pop-up-title").html(d.properties.LGA_NAME11);
}
function lgaMouseOut(d){
lgaPopupDiv.transition(500)
.style("opacity",0)
.style("display","none");
}
function venueMouseover(d){
venuePopupDiv.transition(500)
.style("display","block")
.style("opacity",0.9)
.style("z-index", 99);
$("#venue-pop-up-title").html(d.Venue_Name.toUpperCase());
$("#venue-pop-up-turnover").html("FY2016 H2 Revenue: "+currencyFormat(d.Half_Years[13]));
$("#venue-pop-up-egm").html("EGM's: "+ d.EGM);
$("#venue-pop-up-nmr").html("NMR: "+ currencyFormat(d.Half_Years[13]*2/(365*d.EGM)));
}
function venueMouseClick(d,i){
if(d3.select(this).classed("active")){
d3.select(this).classed("active",false);
selectedLinesData.splice(selectedVenues.indexOf(d.Venue_Name), 1);
selectedVenues = selectedLinesData.map(function(data){return data.venue_name});
selectedFigures = selectedLinesData.map(function(data){return data.half_years});
y.domain([d3.min([].concat.apply([], selectedFigures))*0.9,d3.max([].concat.apply([], selectedFigures))*1.1]);
yAxis.scale(y);
d3.select(".y-axis").call(yAxis);
}else{
d3.select(this).classed("active",true);
selectedLinesData.push({venue_name:d.Venue_Name, half_years:d.Half_Years});
selectedVenues = selectedLinesData.map(function(data){return data.venue_name});
selectedFigures = selectedLinesData.map(function(data){return data.half_years});
y.domain([d3.min([].concat.apply([], selectedFigures))*0.9,d3.max([].concat.apply([], selectedFigures))*1.1]);
yAxis.scale(y);
d3.select(".y-axis").call(yAxis);
}
if(d3.selectAll('.active').size()==0){
venueTurnoverD3Div.transition(500)
.style("opacity",0)
.style("display","none");
}else{
venueTurnoverD3Div.transition(500)
.style("opacity",0.9)
.style("display","block");
gTurnover.selectAll("g.line").remove();
var gLine = gTurnover.selectAll("g.line")
.data(selectedLinesData)
.enter().append("g")
.attr("class", "line")
.style("stroke",function(d,i){return colorLines(i);})
.style("stroke-width","2px")
.style("fill","none")
.on("mouseover",function(d,i){console.log(d.venue_name);});
gTurnover.selectAll("path.line").remove();
var pathLine = gLine.append("g").attr("class","line-line");
gLine.selectAll("path.line").remove();
pathLine
.data(function(d,i){return selectedLinesData;})
.append("path")
.attr("class", "line")
.attr("d",function(d){return line(d.half_years);})
.style("stroke",function(d,i){return colorLines(i);})
.style("stroke-width","2px");
var point = gLine.append("g").attr("class","line-point");
point.selectAll("circle")
.data(function(d,i){return selectedLinesData[i].half_years;})
.enter().append("circle")
.attr("class", "line")
.attr("r",2)
.attr("cx",function(d,i) {return x(halfYearLabels[i])})
.attr("cy",function(d,i) {return y(d);})
.on("mouseover",function(d,i){console.log(d);});
}
//numLines = selectedVenues.length - 1;
//console.log(d3.extent([].concat.apply([], selectedFigures)));
a = selectedLinesData[0];
}
function venueMouseout(d){
venuePopupDiv.transition(500)
.style("opacity",0)
.style("display","none");
}
});
The page I am having trouble with can be found here: http://andrew3stedall.netne.net/vicMap/
