D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
donmccurdy
Full window
Github gist
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. */ 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