interactiveChoropleth = {
var width = 1000,
height = 740;
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
var g = svg.append('g');
var textBox = svg.append('div').attr('id', 'info-box').attr('x', 10).attr('y', 20).html('<span>HELLO</span>');
var tooltip = d3.select("body").append("div")
.attr("id", "choroplethTooltip");
var max_houses = d3.max(sfHousingData.features, d => {
return d.properties.COUNT
});
var color = d3.scaleLinear().domain([0, max_houses]).range(['beige', 'red']);
var mercatorProjection = d3.geoMercator()
.center([-122.43598, 37.76091])
.scale(270000)
.translate([width / 1.95, height / 1.65]);
var geoPath = d3.geoPath()
.projection(mercatorProjection);
g.selectAll('path')
.data(sfHousingData.features)
.enter()
.append('path')
.attr('fill', d => {
return color(d.properties.COUNT);
})
.attr('stroke', '#fff')
.attr('stroke-width', 1)
.attr('d', geoPath)
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`<span>${d.properties.COUNT} units were built in <strong>${d.properties.nhood}</strong>.</span>`)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
d3.select(this).style('stroke-width', 3);
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
d3.select(this).style('stroke-width', 1);
});
return html`${svg.node()}`;
}