Plotting heatmap with available attributes instead of range D3 React

Question

I'm working on a heatmap which basically plots the graph between taxIDs and KeywordNames from an external JSON. While I'm able to plot the values I see many blank spaces on the graph and clueless how I can plot them with the available data.

Here's the link to codesandbox: https://codesandbox.io/s/40mnzk9xv4

On the X-Axis I'm plotting the TaxIDs which are being calculated within the given range. I did try using the function rangeBands() but I get an error everytime.

Its the similar case with Y-Axis where I'am plotting the keywordIDs which are also being calculated within a range. I'm trying to print all the KeywordNames on Y axis and all taxIDs on the X-Axis and plot their corresponding spectracount on graph.

Please help me where have I gone wrong.

The output I'm looking for is something similar to this: https://bl.ocks.org/Bl3f/cdb5ad854b376765fa99

Thank you.

Answer 1

Some things to help you get you one your way:

First, your scales should use scaleBand() , not scaleLinear() , as they have discrete domains (ie categories of something, rather than continuous)

Second, your scale domains is taking every value of taxId and keywordName in your data as a possible value. But some values are repeated more than once. You need to be filtering them so you only have unique values. So your scale code should be:

const xValues = d3.set(data.map(d => d.taxId)).values();
const yValues = d3.set(data.map(d => d.keywordName)).values();
const xScale = d3.scaleBand()
    .range([0, width])
    .domain(xValues); //X-Axis

const yScale = d3.scaleBand()
    .range([0, height])
    .domain(yValues); //Y-Axis

Finally, your code that places the heatmap tiles needs to be calling the scale functions so it works out the position of each rect correctly:

  chart.selectAll('g')
    .data(data).enter().append('g')
    .append('rect')
    .attr('x', d => { return xScale(d.taxId) })
    .attr('y', d => { return yScale(d.keywordName) })

That should get you most of the way there. You'll want to also reduce cellSize and remove the tickFormat calls on the axes as they are trying to convert your text labels to numbers.