{
String.prototype.ucFirst= function() {
var words = this.toLowerCase().split(' ');
return words
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ');
}
const wrapper = d3.select(DOM.element("div"));
const svg = wrapper.append("svg")
.attr("width", mapWidth)
.attr("height", mapHeight)
.attr("style", "background-color:blue");
var tooltip = d3.select("body").append("div")
.attr("id", "choroplethTooltip");
const g = svg.append("g");
const u = g
.selectAll('path')
.data(geojson.features);
u.enter()
.append('path')
.attr('d', geoGenerator)
.attr('fill', (d) => colors[d.properties.nsw_loca_2]||'#fff')
.attr('stroke', '#bbb')
.attr('stroke-width', 0.5)
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<span>${d.properties.nsw_loca_2.ucFirst()}</strong> ${postcode_lookup.get(d.properties.nsw_loca_2).postcode}</span>`)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
d3.select(this).style('stroke-width', 2);
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
d3.select(this).style('stroke-width', 0.5);
});
var zoom = d3
.zoom()
.scaleExtent([.3, 16])
.on("zoom", zoomed);
function zoomed() {
g.attr("transform", d3.event.transform);
}
svg.call(zoom);
return wrapper.node()
}