D3.js zoomable map

Question

I have this code and would like to have it reviewed:

function thisClient() {
 "use strict"
 var self = this
 var width = 960,
 height = 500,
 centered, data
 this.init = function () {
 //now.receiveLocation = function(message) {
 // console.log(message)
 // // FIXME only push markers depending on the country/adm1 level
 // self.drawMarker(message)
 //}
 self.drawMap()
 }
 this.fileExists = function (url) {
 "use strict"
 var http = new XMLHttpRequest()
 http.open('HEAD', url, false)
 http.send()
 return http.status != 404
 }
 this.quantize = function (d) {
 "use strict"
 return "q" + Math.floor(getCountyNorm(d.id) * 10) + "-9";
 }
 // Map code
 this.drawMap = function () {
 "use strict"
 var map = d3.geo.equirectangular().scale(150)
 self.path = d3.geo.path().projection(map)
 self.svg = d3.select("#map").append("svg")
 .attr("width", "100%")
 .attr("height", "90%")
 .attr("viewBox", "0 0 " + width + " " + height)
 .attr("preserveAspectRatio", "xMidYMid")
 // Add a transparent rect so that zoomMap works if user clicks on SVG
 self.svg.append("rect")
 .attr("class", "background")
 .attr("width", width)
 .attr("height", height)
 .on("click", self.zoomMap)
 // Add g element to load country paths
 self.g = self.svg.append("g")
 .attr("id", "countries")
 // Load topojson data
 d3.json("./topo/world.json", function (topology) {
 self.g.selectAll("path")
 //.data(topology.features)
 .data(topojson.object(topology, topology.objects.countries).geometries)
 .enter().append("path")
 .attr("d", self.path)
 .attr("id", function (d) {
 return d.properties.name
 })
 //.attr("class", data ? self.quantize : null)
 .on("mouseover", function (d) {
 d3.select(this)
 .style("fill", "orange")
 .append("svg:title")
 .text(d.properties.name)
 //self.activateTooltip(d.properties.name)
 })
 .on("mouseout", function (d) {
 d3.select(this)
 .style("fill", "#aaa")
 //self.deactivateTooltip()
 })
 .on("click", self.zoomMap)
 // Remove Antarctica
 self.g.select("#Antarctica").remove()
 })
 } // end drawMap
 this.zoomMap = function (d) {
 "use strict"
 var x, y, k
 if (d && centered !== d) {
 var centroid = self.path.centroid(d)
 x = centroid[0]
 y = centroid[1]
 k = 2
 centered = d
 self.loadCountry(d, x, y, k)
 } else {
 // zoom out, this happens when user clicks on the same country
 x = width / 2
 y = height / 2
 k = 1
 self.centered = null
 // as we zoom out we want to remove the country layer
 self.svg.selectAll("#country").remove()
 }
 self.g.selectAll("path")
 .classed("active", centered && function (d) {
 return d === centered
 })
 self.g.transition()
 .duration(1000)
 .delay(100)
 .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
 .style("stroke-width", 1.5 / k + "px")
 } // end zoom function
 this.loadCountry = function (d, x, y, k) {
 "use strict"
 // we remove the country
 self.svg.selectAll("#country").remove()
 // load country json file
 var adm1_key = d.id + "_adm1"
 var adm1_path = "./topo/" + d.id + "_adm1.json"
 // check to see if country file exists
 if (!self.fileExists(adm1_path)) {
 console.log("We couldn't find that country!")
 } else {
 console.log("Load country overlay")
 var country = self.svg.append("g").attr("id", "country")
 self.countryGroup = self.svg.select("#country")
 d3.json(adm1_path, function (error, topology) {
 var regions = topology.objects
 for (var adm1_key in regions) {
 var o = regions[adm1_key]
 }
 self.countryGroup.selectAll("path")
 .data(topojson.object(topology, o).geometries)
 .enter().append("path")
 .attr("d", self.path)
 .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
 .attr("id", function (d) {
 return d.properties.NAME_1
 })
 .classed("country", true)
 .attr("class", "country")
 .style("stroke-width", 1.5 / k + "px")
 .on("mouseover", function (d) {
 d3.select(this)
 .style("fill", "#6C0")
 .append("svg:title")
 .text(d.properties.NAME_1)
 })
 .on("mouseout", function (d) {
 d3.select(this)
 .style("fill", "#000000")
 })
 .on("click", function (d) {
 console.log('clicked on country')
 self.loadProjects()
 })
 })
 } // end else
 }
 this.loadProjects = function () {
 console.log('loadProjects')
 } // end loadProjects
 this.init()
} // end thisClient
jQuery(function () {
 thisClient = new thisClient()
})

Answer 1

From a once over:

• Because you have use strict on top in function thisClient() {, you do not need it within functions declared within thisClient like this.fileExists
• I am all for Spartan coding but variable like d and k have to go
• Using the http method HEAD is cool, I learned something
• Don't keep commented out code
• You do not use semicolons, please use semicolons; what will the neighbors say?
• The lack of semicolons also breaks JsHint

• Your aligning is a bit odd in this part:

  d3.json("./topo/world.json", function (topology) {
   self.g.selectAll("path")
   //.data(topology.features)
   .data(topojson.object(topology, topology.objects.countries).geometries)
   .enter().append("path")
   .attr("d", self.path)
   .attr("id", function (d) {
   return d.properties.name
   })
   //.attr("class", data ? self.quantize : null)
   .on("mouseover", function (d) {
   d3.select(this)
   .style("fill", "orange")
   .append("svg:title")
   .text(d.properties.name)
   //self.activateTooltip(d.properties.name)
   })
   .on("mouseout", function (d) {
   d3.select(this)
   .style("fill", "#aaa")
   //self.deactivateTooltip()
   })
   .on("click", self.zoomMap)
  

  I would put the .on next tothe }):

  d3.json("./topo/world.json", function (topology) {
   self.g.selectAll("path")
   .data(topojson.object(topology, topology.objects.countries).geometries)
   .enter().append("path")
   .attr("d", self.path)
   .attr("id", function (d) {
   return d.properties.name
   }).on("mouseover", function (d) {
   d3.select(this)
   .style("fill", "orange")
   .append("svg:title")
   .text(d.properties.name)
   //self.activateTooltip(d.properties.name)
   }).on("mouseout", function (d) {
   d3.select(this)
   .style("fill", "#aaa")
   //self.deactivateTooltip()
   }).on("click", self.zoomMap)
  

• It is kind of evil to create a constructor and then replace it with an instance of it self, you cant possibly name that variable correctly ;)
• Please do not use console.log in production code
• You should assign color constants .style("fill", "#6C0") to properly named variables, somewhere on the top

• There must be better ways than this to get the last adm1_key:

  for (var adm1_key in regions) {
   var o = regions[adm1_key]
  }