topic_matrix = {
const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto")
.style("font", "1rem verdana");
const make_class = (item) => item.toLowerCase().split(' ').join('_').split('-').join('')
const make_id = d => `coords_${Math.floor(x(d.xval))}_${Math.floor(y(d.yval))}`
const rects = svg.append("g")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("class", (d, i) => `${i} bar`)
.selectAll("g")
.data(d => categories.map(e => {return {'xval' : d.index, 'yval' : e, 'count': d[e]}}))
.enter().append("g")
.attr("class", (d, i) => `${i} tile`)
.on("mouseover", d => d3.select(`#${make_id(d)}`).transition().duration(0.25).style("opacity", 1))
.on("mouseout", d => d3.select(`#${make_id(d)}`).transition().style("opacity", 0))
rects.append("rect")
.attr("x", d => x(d.xval))
.attr("y", d => y(d.yval))
.attr("width", x.bandwidth())
.attr("height", y.bandwidth())
.style("fill", d => color(d.count))
.append("title")
.text(d => d.count)
rects.append("text")
.attr("id", d => make_id(d))
.attr("dy", ".35em")
.attr("x", d => x(d.xval) + x.bandwidth() / 2)
.attr("y", d => y(d.yval) + y.bandwidth() / 2)
.text(d => d.count)
.style("font-size", "1rem")
.style("opacity", "0")
.style("text-anchor", "middle")
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}