tooltipChart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
const legendMap = svg.append("g")
.attr("transform", "translate(550,20)")
.append(() => Legend(color, {title: "Unemployment rate (%)", width: 220}))
const xaxis = svg.append("g")
.attr("transform", `translate(0,${height - margins.bottom})`)
.call(d3.axisBottom(x).tickSize(0))
.call((g) => g.select(".domain").remove())
.call((g) => g.append("text")
.attr("x", width)
.attr("y", margins.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text("Variable 1 →"))
const yaxis = svg.append("g")
.attr("transform", `translate(${margins.left},0)`)
.call(d3.axisLeft(y).tickSize(0))
.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("↑ Variable 2"))
const squares = svg.selectAll()
.data(data, d => d.group + ':' + d.variable)
.join("rect")
.attr("x", d => x(d.group))
.attr("y", d => y(d.variable))
.attr("rx", 4)
.attr("ry", 4)
.attr("width", x.bandwidth())
.attr("height", y.bandwidth())
.style("fill", d => color(d.value))
.style("stroke-width", 4)
.style("stroke", "none")
.style("opacity", 0.8)
const tooltip = svg.append("g").style("display", "none")
squares
.on("mouseover", function(e, d){
const [xm, ym] = d3.pointer(e)
d3.select(this)
.style("stroke", "black")
.style("opacity", 1)
const labelText = d.value
// tooltip
tooltip
.transition()
.duration(200)
.style("display", null)
tooltip.attr("transform", `translate(${xm - 4},${ym + 3})`);
const path = tooltip.append("path")
.attr("fill", "white")
.attr("stroke", "black");
const textLabel = `Energy: ${d.value}`
const text = tooltip
.append("text")
.text(textLabel)
size(text, path)
})
.on("mousemove", function(e, d){
const [xm, ym] = d3.pointer(e)
d3.select(this)
.transition()
.duration(200)
.attr("stroke", d => "#00cc99")
tooltip.attr("transform", `translate(${xm - 4},${ym + 3})`);
const path = tooltip.selectAll("path")
.attr("fill", "white")
.attr("stroke", "black");
const textLabel = `Energy: ${d.value}`
const text = tooltip.selectAll("text")
.text(textLabel);
size(text, path);
})
.on("mouseleave", function(e, d){
d3.select(this)
.style("stroke", "none")
.style("opacity", 0.8)
// label.attr("display", "none")
tooltip
.style("display", "none")
})
// Wraps the text with a callout path of the correct size, as measured in the page.
function size(text, path) {
const {x, y, width: w, height: h} = text.node().getBBox();
text.attr("transform", `translate(${-w / 2},${15 - y})`);
path.attr("d", `M${-w / 2 - 10}, 5H-5l5, -5l5, 5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);
}
// 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("Heatmap")
return svg.node()
}