presentChart = {
const zoom = d3.zoom()
.scaleExtent([1, 8])
.on("zoom", zoomed)
const svg = d3.create("svg")
.attr("width", width)
.attr("height", 610)
.attr("viewBox", [0, 0, 975, 610])
.on("click", reset)
const g = svg.append("g")
const nationBoundary = g.append("path")
.datum(topojson.feature(us, us.objects.nation))
.attr("fill", "#ddd")
.attr("d", path)
const stateBoundary = g.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-width", "1px")
.attr("stroke-linejoin", "round")
.attr("d", path)
const circles = g.append("g")
.attr("fill", "teal")
.attr("fill-opacity", 0.5)
.attr("stroke", "#fff")
.attr("stroke-width", 0.5)
.selectAll()
.data(data)
.join("circle")
.attr("transform", d => `translate(${centroid(d.county)})`)
.attr("r", d => radius(d.population))
.attr("class", "circles")
const label = g.append("text").attr("class", "label")
circles
.on("mouseover", function(e, d){
d3.select(this)
.transition()
.duration(200)
.style("opacity", 1)
.style("stroke", "white")
.style("stroke-width", "6px")
const labelText = `${d.county.properties.name} county: \n ${format(d.population)}`
label
.attr("display", null)
.attr("font-size", 15)
.attr("font-weight", "bold")
.style("opacity", 1)
.attr("transform", `translate(${centroid(d.county)})`)
.attr("dx", 9)
.attr("dy", -7)
.text(d => labelText)
})
.on("mouseleave", function(e, d){
d3.select(this)
.transition()
.duration(200)
.style("stroke", "white")
.style("stroke-width", "1px")
label
.attr("display", "none")
})
// Create the legend
const legend = svg.append("g")
.attr("fill", "#777")
.attr("transform", "translate(915,608)")
.attr("text-anchor", "middle")
.style("font", "10px sans-serif")
.selectAll()
.data(radius.ticks(4).slice(1))
.join("g")
legend.append("circle")
.attr("fill", "none")
.attr("stroke", "#ccc")
.attr("cy", d => -radius(d))
.attr("r", radius)
legend.append("text")
.attr("y", d => -2 * radius(d))
.attr("dy", "1.3em")
.text(radius.tickFormat(4, "s"))
svg.call(zoom)
function reset() {
svg.transition().duration(750).call(
zoom.transform,
d3.zoomIdentity,
d3.zoomTransform(svg.node()).invert([width / 2, height / 2])
)
}
function zoomed(event){
const {transform} = event
g.attr("transform", transform)
g.attr("stroke-width", 1/transform.k)
d3
.selectAll(".circles")
.attr("r", d => radius(d.population)/transform.k)
d3
.selectAll(".label")
.attr("font-size", Math.floor(15/transform.k))
}
return svg.node()
}