Blur-diffused heatmap.
xxxxxxxxxx<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. */var groups = {};for (var i = 0; i < 20; i++) { for (var j = 0; j < 10; j++) { var value = 1 - (Math.abs(10 - i) + Math.abs(5 - j)) / 15; value *= 0.8 + Math.random() * 0.2; // Noise. var color = colorScale(value); if (!groups[color]) groups[color] = []; groups[color].push({x: i, y: j, value: value, color: color}); }}/****************************************************************************** * 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