Cleaned up and simplified heatmaps

[jens-ox]

The heatmap demo overflows on the top (see the white half circle):

This is due to the way the y-positions of the heatmap elements are calculated. This can be simplified by using the array lengths to calculate the positions (imho the cleaner way).

This is what the updated Heatmap demo looks like:

---

💥 Breaking Changes

• Different vx-heatmap API

🚀 Enhancements

• Cleaner vx-heatmap API, better Heatmap layout
• Adds a separation attribute (margin between the two heatmaps) to the heatmap demo
• Removes usage of data[0].bins.length as reference bins length, calculates maximum

🐛 Bug Fix

• Fixes broken Heatmap demoo
• Removes hardcoded left margin of 5

[hshoff]

Hi @jens-ox thanks for the pull request!

I agree this would simplify the API only this would come at the cost of control. The heatmap API used to be simpler but was changed to address #302 in #307. Explanation: #302 (comment).

90% of the time users will likely scale on the index of the bin. The other 10% may need to do something else to support their data. Supporting that last 10% is a tradeoff. So I think for now we'll keep the API as is for now. Happy to continue the discussion.

I'd love to land your heatmap demo tile fix. I agree it looks much better with your improvements!

[jens-ox]

Hi @hshoff, thanks for your feedback! I don't see how this PR would pose a problem to scenarios like #302, as no bin function is used anymore. HeatmapRect would look like this:

<HeatmapRect
  data={data}
  xScale={xScale}
  yScale={yScale}
  colorScale={colorScale2}
  opacityScale={opacityScale}
  bins={d => d.values}
  binWidth={bWidth}
  binHeight={bWidth}
  gap={2}
/>

The only difference to the example is the additional bins attribute.

https://gist.github.com/jens-ox/83e85812a959b969a8c9feace61b64c8 is the code of the Heatmap demo using the same data structure as @JacquiManzi.

[hshoff]

Nice, I see now. LGTM