presentChart = {
const height = 500
const margins = ({
top: 60,
right: 20,
bottom: 50,
left: 40
})
const bins = d3.bin()
.thresholds(radius)
.value((d) => d.rate)
(data)
const x = d3.scaleLinear()
.domain([bins[0].x0, bins[bins.length - 1].x1])
.range([margins.left, width - margins.right])
const y = d3.scaleLinear()
.domain([0, d3.max(bins, (d) => d.length)])
.range([height - margins.bottom, margins.top])
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;")
const barColor = "lightblue"
const barHighlightColor = "pink"
// Add a rect for each bin.
const bars = svg.append("g")
.attr("fill", barColor)
.selectAll()
.data(bins)
.join("rect")
.attr("x", (d) => x(d.x0) + 1)
.attr("width", (d) => x(d.x1) - x(d.x0) - 1)
.attr("y", (d) => y(d.length))
.attr("height", (d) => y(0) - y(d.length))
.attr("opacity", 0.8)
.attr("class", "bars")
const label = svg.append("text")
bars
.on("mouseover", function(e, d){
d3.selectAll(".bars")
.transition()
.duration(200)
.style("opacity", 0.5)
d3.select(this)
.transition()
.duration(200)
.attr("fill", "pink")
.attr("opacity", 1)
const labelText = `${d.length}`
label
.attr("display", null)
.attr("font-size", "15px")
.style("opacity", 1)
.attr("transform", `translate(${d3.select(this).attr("x")},${d3.select(this).attr("y")})`)
.attr("dx", -5)
.attr("dy", -7)
.text(d => labelText)
})
.on("mousemove", function(e, d){
d3.selectAll(".bars")
.transition()
.duration(10)
.attr("fill", barColor)
.style("opacity", 1)
d3.select(this)
.transition()
.duration(10)
.attr("fill", barHighlightColor)
.attr("opacity", 1)
})
.on("mouseleave", function(e, d){
d3.selectAll(".bars")
.transition()
.duration(200)
.attr("fill", barColor)
.style("opacity", 1)
label
.attr("display", "none")
})
// Add the x-axis and label.
const xaxis = svg.append("g")
.attr("transform", `translate(0,${height - margins.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
.call((g) => g.append("text")
.attr("x", width)
.attr("y", margins.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text("Unemployment rate (%) →"))
// Add the y-axis and label, and remove the domain line.
const yaxis = svg.append("g")
.attr("transform", `translate(${margins.left},0)`)
.call(d3.axisLeft(y).ticks(height / 40))
.call((g) => g.select(".domain").remove())
.call((g) => g.append("text")
.attr("x", -margins.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text("↑ Frequency (no. of counties)"))
// Add a title
const title = svg.append("g")
.append("text")
.attr("x", width / 2)
.attr("y", (margins.top / 2))
.attr("text-anchor", "middle")
.attr("front-weight", "bold")
.attr("font-family", "Helvetica Neue, Arial")
.attr("font-size", "20px")
.text("Unemployment rate in America")
// Return the SVG element.
return svg.node()
}