How to display county tooltip in d3 map? - d3.js

Question

I am trying to create a tooltip in a D3 map. (also using DC.js). The problem is that it seems that the DC chart (mexicoChart) which holds the map is above everything or it is not compatible with the following code
(Nothing happens after adding it):
var width = 960
var height = 500
var projection = d3.geo.mercator()
.scale(1200)
.center([-102.34034978813841, 24.012062015793]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("svg")
.append("g")
.attr("width", width)
.attr("height", height);
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0)
.style("width", 600);
var g = svg.append("g");
d3.json("static/geojson/mx_tj.json", function(error, mx) {
svg.selectAll("path")
.data(topojson.feature(mx, mx.objects.municipalities))
.enter().append("path")
.attr("d", d3.geo.path().projection(projection))
.attr("fill", "transparent")
.style("stroke", "#333")
.style("stroke-width", ".2px")
.attr("class", "muns");
g.selectAll("path")
.data(topojson.feature(mx, mx.objects.states))
.enter().append("path")
.attr("d", d3.geo.path().projection(projection))
.attr("fill", "transparent")
.style("stroke", "#333");
svg.append("g")
.attr("class", "muns")
.selectAll("path")
.data(topojson.feature(mx, mx.objects.municipalities))
.enter().append("path")
.attr("d", path)
.on("mouseover", function (d) {var tip = "<h3>" + d.properties.name + "</h3>";
tooltip.html(tip)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY) + "px");
tooltip.transition()
.duration(500)
.style("opacity", .7); })
.on("mouseout", function (d) { tooltip.transition()
.duration(500)
.style("opacity", 0);
});
});
This is the second part of the code where the DC Charts are:
queue()
.defer(d3.json, "/homicidios/projects")
.defer(d3.json, "static/geojson/municipios.json")
.await(makeGraphs);
function makeGraphs(error, projectsJson, mx) {
//Clean projectsJson data
var homicidiosProjects = projectsJson;
var dateFormat = d3.time.format("%Y-%m-%d %H:%M:%S");
homicidiosProjects.forEach(function(d) {
d["fecha"] = dateFormat.parse(d["fecha"]);
d["fecha"].setMinutes(0);
d["fecha"].setSeconds(0);
// d["no_muertos"] = +d["no_muertos"];
});
//Create a Crossfilter instance
var ndx = crossfilter(homicidiosProjects);
//Define Dimensions
var FechaDim = ndx.dimension(function(d) {
return d["fecha"];
});
var zonaDim = ndx.dimension(function(d) {
return d["entidad_federativa"];
});
var pobrezaDim = ndx.dimension(function(d) {
return d["marginacion"];
});
var MunDim = ndx.dimension(function(d) {
return d["CVE_MUN"];
});
var noMuertosDim = ndx.dimension(function(d) {
return d["no_muertos"];
});
//Calculate metrics
var numProjectsPorFecha = FechaDim.group();
var numProjectsPorZona = zonaDim.group();
var numProjectsPorPobreza = pobrezaDim.group();
var noMuertosPorMun = MunDim.group().reduceSum(function(d) {
return d["no_muertos"];
});
var all = ndx.groupAll();
var noMuertos = ndx.groupAll().reduceSum(function(d) {
return d["no_muertos"];
});
var max_mun = noMuertosPorMun.top(1)[0].value;
//Define values (to be used in charts)
var minDate = FechaDim.bottom(1)[0]["fecha"];
var maxDate = FechaDim.top(1)[0]["fecha"];
//Charts
var timeChart = dc.barChart("#time-chart");
var zonaChart = dc.rowChart("#zona-row-chart");
var pobrezaChart = dc.rowChart("#pobreza-row-chart");
var mexicoChart = dc.geoChoroplethChart("#mexico-Chart");
var numberProjectsND = dc.numberDisplay("#number-projects-nd");
var noMuertosND = dc.numberDisplay("#no-muertos-nd");
numberProjectsND
.formatNumber(d3.format("d"))
.valueAccessor(function(d) {
return d;
})
.group(all);
noMuertosND
.formatNumber(d3.format("d"))
.valueAccessor(function(d) {
return d;
})
.group(noMuertos)
.formatNumber(d3.format(".3s"));
timeChart
.width(1000)
.height(180)
.margins({
top: 10,
right: 50,
bottom: 20,
left: 50
})
.dimension(FechaDim)
.group(numProjectsPorFecha)
.transitionDuration(500)
.x(d3.time.scale().domain([minDate, maxDate]))
.elasticY(true)
.xAxisLabel("Dia")
.yAxis().ticks(10);
zonaChart
.width(300)
.height(350)
.dimension(zonaDim)
.group(numProjectsPorZona)
.xAxis().ticks(4);
pobrezaChart
.width(300)
.height(250)
.dimension(pobrezaDim)
.group(numProjectsPorPobreza)
.xAxis().ticks(4);
d3.json("static/geojson/municipios.json", function (error, mx) {
mexicoChart.width(1000)
.height(630)
.dimension(MunDim)
.group(noMuertosPorMun)
.colors(["#FFE5EC", "#FFCCD9", "#FFB2C6", "#FF99B3", "#FF7FA0", "#FF668D", "#FF4C7A", "#FF3367", "#FF1954", "#FF0041"])
.colorDomain([0, max_mun])
.overlayGeoJson(mx.features, "municipio", function(d) {
return d.properties.CVE_MUN;
})
.projection(d3.geo.mercator()
.center([-101.45, 19.28])
.scale(1600)
.translate([490, 490]))
.title(function(p) {
return "State: " + p["key"] +
"\n" +
"Total Muertos: " + Math.round(p["value"]) + " $";
})
dc.renderAll();
});
}