Blurred Matrix Heatmap

Blur-diffused heatmap.

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select('svg'),
    width = +svg.attr('width'),
    height = +svg.attr('height');

/*******************************************************************************
 * Color Palette
 */

var colorScale = d3.scaleQuantize()
  .range(['#ffffb2', '#fed976', '#feb24c', '#fd8d3c', '#f03b20', '#bd0026']);

/******************************************************************************
 * Gooey Filter
 * Source: https://bl.ocks.org/nbremer/3da658e9a21cd3c71d0819f9698f3bfa
 */

var defs = svg.append('defs');
var filter = defs.append('filter').attr('id','gooeyCodeFilter');
filter.append('feGaussianBlur')
  .attr('in','SourceGraphic')
  .attr('stdDeviation','20')
  //to fix safari: https://stackoverflow.com/questions/24295043/svg-gaussian-blur-in-safari-unexpectedly-lightens-image
  .attr('color-interpolation-filters','sRGB')
  .attr('result','blur');
filter.append('feColorMatrix')
  .attr('in','blur')
  .attr('mode','matrix')
  .attr('values','1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9')
  .attr('result','gooey');

/******************************************************************************
 * Generate 20x10 matrix.
 */

/******************************************************************************
 * Render to grid.
 */

var wrap = svg.append('g');

Object.keys(groups).forEach(function (color) {
  var cell = wrap.append('g')
      .attr('class', 'cells')
      .style('filter', 'url(#gooeyCodeFilter)')
    .selectAll('rect')
    .data(groups[color])
    .enter().append('rect')
      .attr('width', 48)
      .attr('height', 48)
      .attr('x', (d) => d.x * 48)
      .attr('y', (d) => d.y * 48)
      .attr('fill', (d) => d.color);

cell.append('title')
    .text((d) => d.value);
});

</script>

https://d3js.org/d3.v4.min.js