D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
tomgp
Full window
Github gist
digital heatmap
Digital heatmap. using
FatFonts
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>digital heatmap</title> <style type="text/css"> body{ font-family: sans-serif; } .empty{ fill: none; stroke: #000; stroke-width: 1; } </style> <script type="text/javascript" src="d3.v3.js"></script> <script id="grid" type="text/plain">1234567890 2345678901 3456789012 4567890123 5678901234 6789012345 7890123456 8901234567 9012345678 0123456789</script> <link rel="stylesheet" type="text/css" href="style.css"> <title>digital heatmap</title> </head> <body> <h1>digital heatmap</h1> <div class="content"> <svg width="500" height="500" xmlns="https://www.w3.org/2000/svg"> <defs> <g id="cubica1"> <rect class="sub" x="171.126" y="179" fill="none" stroke="#010101" stroke-opacity="0" width="87.874" height="87.874"/> <path class="primary" d="M129.583,0L129.583,0c9.343,0,16.917,7.574,16.917,16.917v238.75c0,15.655,3.845,17.833,19.5,17.833h108.462 c4.584,0,9.003,3.167,9.003,9.965H0C0,276.667,4.48,274,9.064,274h106.603c15.656,0,20.833-2.678,20.833-18.333v-228 C136.5,12.011,131.656,10,116,10H8.301C3.717,10,0,8.667,0,0H129.583z"/> </g> <g id="cubica2"> <rect class="sub" x="103.626" y="162" fill="none" stroke="#010101" stroke-opacity="0" width="87.874" height="87.875"/> <path class="primary" d="M72.887,13.667c-3.773,0-6.833-3.06-6.833-6.833l0,0C66.054,3.06,69.113,0,72.887,0h210.578v121.865 c0,8.424-6.888,15.468-15.312,15.468H42.145c-15.656,0-28.347,12.691-28.347,28.346v76.309c0,15.654,12.691,28.346,28.347,28.346 h225.568c8.424,0,15.752,4.709,15.752,13.131H0V139.607c0-8.059,5.716-14.383,13.634-14.939h227.484 c15.655,0,28.347-12.691,28.347-28.347V42.014c0-15.656-12.691-28.347-28.347-28.347H72.887z"/> </g> <g id="cubica3"> <rect class="sub" x="46.625" y="163.5" fill="none" stroke="#010101" stroke-opacity="0" width="87.874" height="87.874"/> <path class="primary" d="M118.786,152.668c-6.26,0-11.334-5.074-11.334-11.334l0,0c0-6.26,5.074-11.334,11.334-11.334h112.854 c15.654,0,28.347-12.691,28.347-28.347V53.013c0-15.655-12.691-28.347-28.347-28.347L82.798,24.629 c-6.801,0-12.314-5.513-12.314-12.314l0,0C70.484,5.514,75.997,0,82.798,0h200.667v283.465H0v-1.646 c0-12.507,9.46-22.664,21.968-22.664L231.641,259c15.656,0,28.349-12.691,28.349-28.347v-49.641 c0-15.655-12.691-28.347-28.349-28.347L118.786,152.668z"/> </g> <g id="cubica4"> <rect class="sub" x="73.067" y="60.734" fill="none" stroke="#010101" stroke-opacity="0" width="87.874" height="87.874"/> <path class="primary" d="M73.167,156.007L73.167,156.007c-14.82,0-26.833-12.014-26.833-26.833V24.167 C46.333,10.82,35.514,0,22.167,0H0l0.005,170.199c0,15.656,12.988,28.469,28.644,28.469h157.583v84.797h44.102v-84.797h53.131 v-42.66h-53.131V57.051c0-12.178-9.871-22.051-22.051-22.051l0,0c-12.178,0-22.051,9.873-22.051,22.051v98.957H72.5"/> </g> <g id="cubica5"> <rect class="sub" x="84.348" y="149.5" fill="none" stroke="#010101" stroke-opacity="0" width="87.875" height="87.873"/> <path class="primary" d="M0,269.194l0.222,14.271h283.465V130.013c0-15.656-12.69-28.347-28.348-28.347H75.416 c-15.656,0-28.348-12.691-28.348-28.347v-7.974C47.069,49.691,59.76,37,75.416,37h141.071c11.729,0,21.235-7.254,21.235-18.983v1 C237.723,7.288,228.215,0,216.486,0H0.711L0.506,115.938c0,9.481,7.402,17.062,16.883,17.062H210.25 c15.654,0,28.346,12.691,28.346,28.346l-0.5,62.168c0,15.654-12.69,28.348-28.346,28.348H17.439C7.958,251.86,0,259.713,0,269.194z" /> </g> <g id="cubica6"> <rect class="sub" x="99.626" y="151.28" fill="none" stroke="#010101" stroke-opacity="0" width="87.874" height="87.875"/> <path class="primary" d="M237.5,18.017c0,0.507-0.041,1.002-0.076,1.5c0.035,0.497,0.076,0.993,0.076,1.5V18.017z M255.117,101.667 H75.193c-15.656,0-28.347-12.691-28.347-28.347v-5.974C46.847,51.691,59.538,39,75.193,39h141.07 c11.222,0,20.388-8.479,21.16-19.483C236.65,8.509,227.484,0,216.264,0H0.489L0,283.465h283.465V130.013 C283.465,114.357,270.773,101.667,255.117,101.667z M236.874,223.293c0,15.656-12.69,28.348-28.347,28.348H75.193 c-15.656,0-28.347-12.691-28.347-28.348v-59.166c0-15.656,12.691-28.347,28.347-28.347h133.334 c15.654,0,28.347,12.691,28.347,28.347V223.293z"/> </g> <g id="cubica7"> <rect class="sub" x="195.257" y="195.5" fill="none" stroke="#010101" stroke-opacity="0" width="87.874" height="87.874"/> <path class="primary" d="M146.761,93.025L0,283.465l130,0.666L283.209,80.167L283.465,0H0v57.875 c0,12.606,10.219,22.777,22.825,22.777H140.06c4.417,0,8,3.582,8,8l0,0C148.062,90.266,147.583,91.768,146.761,93.025z"/> </g> <g id="cubica8"> <rect class="sub" x="97.626" y="162.5" fill="none" stroke="#010101" stroke-opacity="0" width="87.874" height="87.874"/> <path class="primary" d="M0,0v283.465h283.465V0H0z M210.716,225.54c0,15.655-12.69,28.347-28.347,28.347h-81.355 c-15.656,0-28.347-12.69-28.347-28.347v-36.193c0-15.655,12.691-28.347,28.347-28.347h81.355c15.654,0,28.347,12.691,28.347,28.347 V225.54z M210.716,92.54c0,15.655-12.69,28.347-28.347,28.347h-81.355c-15.656,0-28.347-12.69-28.347-28.347V56.347 C72.667,40.691,85.358,28,101.014,28h81.355c15.654,0,28.347,12.691,28.347,28.347V92.54z"/> </g> <g id="cubica9"> <path class="primary" d="M0,0v174.85C0,189.292,11.708,201,26.151,201h154.886c8.361,0,15.144,7.021,15.144,15.684 c0,8.663-6.781,15.686-15.144,15.686H25.917c-14.109,0-25.482,11.348-25.482,25.457l0.063,25.64h282.695V0H0z M195.729,126.153 c0,15.655-12.691,28.347-28.347,28.347h-51.307c-15.656,0-28.347-12.691-28.347-28.347V74.847c0-15.656,12.69-28.347,28.347-28.347 h51.307c15.654,0,28.347,12.691,28.347,28.347V126.153z"/> <rect class="sub" x="97.355" y="58" fill="none" stroke="#010101" stroke-opacity="0" width="87.874" height="87.874"/> </g> </defs> </svg> <p>Channeling <a href="https://blog.toffeemilkshake.co.uk/post/121689656732/text-mode-various-works-by-dutch-typographer">Dutch typographer Jurriaan Schrofer</a> Using <a href="https://fatfonts.org/">fatfonts</a> where each digit has the same visual weight as it's value i.e. the '9' character is 90% black whilst the '3' is only 30%</p> </div> </body> <script> console.log('digital heatmap (D3 v' + d3.version + ')'); var charGrid = []; d3.select("#grid").text().split('\n').forEach(function(line, i) { charGrid[i] = line.split('') }); var svg = d3.select('svg'); var scale = d3.scale.linear() .range([0, Number(svg.attr('width'))]) .domain([0, charGrid.length]); svg.selectAll('.char').data(flatten2dArray(charGrid)) .enter() .append('use') .attr({ 'xlink:href':function(d){ return '#cubica'+d.value; }, 'transform':function(d){ return 'translate(' +scale(d.i)+ ',' +scale(d.j)+ ') scale(0.176)'; }, 'class':'empty' }) .style({ 'fill': 'black' }); d3.select('content') d3.select(self.frameElement).style("height", d3.select('.content').node().getBoundingClientRect().height + "px"); function flatten2dArray(array){ var list = []; array.forEach(function(row,i){ row.forEach(function(value,j){ list.push({ i:i, j:j, value:value }) }); }); return list } </script> </html>