heatmap = {
var chartWidth = width - margin.left - margin.right,
chartHeight = height - margin.top - margin.bottom;
var svg = d3.create('svg')
.attr("width", chartWidth + margin.left + margin.right)
.attr("height", chartHeight + margin.top + margin.bottom);
var vis = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var toolTip = d3.select("body").append("div").attr("class", "toolTip");
var xAxisLabel = [...new Set(JSON.parse(LRTResultYear).map(n => n.year))];
var yAxisLabel = [...new Set(JSON.parse(LRTResultYear).map(n => n.AE))].sort();
var x = d3.scaleBand()
.range([ 0, chartWidth ])
.domain(xAxisLabel)
.padding(0.01);
vis.append("g")
.attr("transform", "translate(0," + chartHeight + ")")
.call(d3.axisBottom(x))
var y = d3.scaleBand()
.range([ chartHeight, 0 ])
.domain(yAxisLabel)
.padding(0.01);
vis.append("g")
.call(d3.axisLeft(y));
var myColor = d3.scaleLinear()
.range(["#fc836a", "#3BAFDA", "lightblue"])
.domain([0, 0.06, 1]);
var rect = vis.selectAll()
.data(JSON.parse(LRTResultYear), function(d) {return d.year+':'+d.AE;})
.enter()
.append("rect");
rect.attr("x", function(d) { return x(d.year) })
.attr("y", function(d) { return y(d.AE) })
.attr("width", x.bandwidth() )
.attr("height", y.bandwidth() )
.style("fill", "lightblue")
.on('mousemove', nodeMouseOver)
.on('mouseout', nodeMouseOut )
.transition()
.duration(600)
.style("fill", function(d) { return myColor(d.pvalue)} );
vis.selectAll(".signalLabel")
.data(JSON.parse(LRTResultYear), function(d) {return d.year+':'+d.AE;})
.enter().append("text")
.attr("class", "signalLabel")
.attr("x", function(d) { return x(d.year) + x.bandwidth()/2 ; })
.attr("y", function(d) { return y(d.AE) + y.bandwidth()/2 + 5 ; })
.text(d => d.is_signal == true ? '❕' : '' )
.style('font-size', '0.65rem')
.style('opacity', 0.6);
function nodeMouseOver(event, d){
toolTip.style("left", event.pageX + (18) + "px")
.style("top", event.pageY + (18) + "px")
.style("display", "block")
.html(`<center><b>${d.AE}</b></center>
<center><b>Year: ${d.year}</b></center>
<center><b>Is Signal: ${d.is_signal}</b></center>
<center>logLR: ${parseFloat(d.logLR).toFixed(2)}</center>
<center>P-value: ${d.pvalue}</center>
<center>alpha: ${d.alpha}</center>`);
d3.select(event.target).style("cursor", "pointer");
d3.select(event.target)
.transition()
.attr('stroke', '#aeaeae')
.attr('stroke-width', 2);
}
function nodeMouseOut(event, d){
toolTip.style("display", "none");
d3.select(event.target).style("cursor", "default");
d3.select(event.target)
.transition()
.attr('stroke', '#fff')
.attr('stroke-width', 0);
}
return svg.node()
}