{"id":1605,"date":"2014-12-05T21:51:07","date_gmt":"2014-12-05T21:51:07","guid":{"rendered":"http:\/\/41j.com\/blog\/?p=1605"},"modified":"2014-12-05T21:51:43","modified_gmt":"2014-12-05T21:51:43","slug":"simple-basic-heatmap-d3-js","status":"publish","type":"post","link":"https:\/\/41j.com\/blog\/2014\/12\/simple-basic-heatmap-d3-js\/","title":{"rendered":"Simple basic heatmap in D3.JS"},"content":{"rendered":"<p><a href=\"http:\/\/41j.com\/blog\/wp-content\/uploads\/2014\/12\/heatmap.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/41j.com\/blog\/wp-content\/uploads\/2014\/12\/heatmap.png\" alt=\"heatmap\" width=\"222\" height=\"212\" class=\"aligncenter size-full wp-image-1606\" \/><\/a><\/p>\n<p>The code below creates the extremely basic heatmap shown above using D3.JS. The heatmap data is stored in a flat 1D array, so X and Y dimensions need to be provided. I don&#8217;t think it would be too hard to modify this to process 2D arrays.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n&lt;svg class=&quot;output&quot; width=&quot;500&quot; height=&quot;500&quot;&gt;\r\n&lt;\/svg&gt;\r\n\r\n&lt;script src=&quot;http:\/\/d3js.org\/d3.v3.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;script&gt;\r\n\r\nvar max_value = 9;\r\n\r\n\/\/ This function converts a 0-&gt;max_value number to a rgb string for the heatmap\r\nfunction get_rgb(d) {\r\n  var ratio = 2 * (d\/max_value)\r\n  var r = Math.floor(Math.max(0, 255*(ratio - 1)))\r\n  var b = Math.floor(Math.max(0, 255*(1 - ratio)))\r\n  var g = 255 - b - r\r\n  \r\n  return &quot;rgb(&quot; + r + &quot;,&quot; + g + &quot;,&quot; + b + &quot;)&quot;;\r\n}\r\n\r\nvar svg = d3.select(&quot;.output&quot;)\r\n\r\nvar mydata = &#x5B;\r\n   0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\r\n   0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0, 0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,\r\n   0,0,0,0,1,1,1,2,2,2,2,2,1,1,1,0,0,0,0,0, 0,0,0,0,1,1,1,2,2,2,2,2,1,1,1,0,0,0,0,0,\r\n   0,0,0,1,1,2,2,3,3,3,3,3,2,2,1,1,0,0,0,0, 0,0,0,1,1,2,2,3,3,3,3,3,2,2,1,1,0,0,0,0,\r\n   0,0,1,1,2,3,3,3,4,4,4,3,3,3,2,1,1,0,0,0, 0,0,1,1,2,3,3,3,4,4,4,3,3,3,2,1,1,0,0,0,\r\n   0,0,1,1,2,3,4,4,4,5,4,4,4,3,2,2,1,0,0,0, 0,0,1,1,2,3,4,4,4,5,4,4,4,3,2,2,1,0,0,0,\r\n   0,1,1,2,3,3,4,5,5,6,5,5,4,4,3,3,2,1,0,0, 0,1,1,2,3,3,4,5,5,6,5,5,4,4,3,3,2,1,0,0,\r\n   0,1,2,2,3,4,4,5,6,7,6,5,5,4,4,3,2,1,0,0, 0,1,2,2,3,4,4,5,6,7,6,5,5,4,4,3,2,1,0,0,\r\n   0,1,2,3,3,4,5,5,6,8,7,6,5,5,4,3,2,1,0,0, 0,1,2,3,3,4,5,5,6,8,8,6,5,5,4,3,2,1,0,0,\r\n   0,1,2,3,4,4,5,6,6,7,7,6,5,5,4,3,2,1,0,0, 0,1,2,3,4,4,5,6,6,7,6,6,5,5,4,3,2,1,0,0,\r\n   0,1,2,3,4,4,5,5,6,6,6,5,5,4,4,3,2,1,0,0, 0,1,2,3,4,4,5,5,6,6,6,6,5,4,4,3,2,1,0,0,\r\n   0,1,2,3,3,4,4,5,5,6,5,5,4,4,3,3,2,1,0,0, 0,1,2,3,3,4,4,5,5,6,5,5,5,4,3,3,2,1,0,0,\r\n   0,1,1,2,3,3,4,4,5,5,5,4,4,4,3,2,1,1,0,0, 0,1,1,2,3,3,4,4,5,5,5,4,4,4,3,2,1,1,0,0,\r\n   0,0,1,1,2,3,3,4,4,4,4,4,3,3,3,2,1,0,0,0, 0,0,1,1,2,3,3,4,4,4,4,4,3,3,3,2,1,0,0,0,\r\n   0,0,1,1,2,2,3,3,3,4,4,3,3,2,2,1,1,0,0,0, 0,0,1,1,2,2,3,3,3,4,4,3,3,2,2,1,1,0,0,0,\r\n   0,0,0,1,1,2,2,2,3,3,3,2,2,2,1,1,0,0,0,0, 0,0,0,1,1,2,2,2,3,3,3,2,2,2,1,1,0,0,0,0,\r\n   0,0,0,0,1,1,1,2,2,2,2,2,1,1,1,0,0,0,0,0, 0,0,0,0,1,1,1,2,2,2,2,2,1,1,1,0,0,0,0,0,\r\n   0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0, 0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,\r\n   0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\r\n   0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\r\n   0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\r\n   0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0, 0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,\r\n   0,0,0,0,1,1,1,2,2,2,2,2,1,1,1,0,0,0,0,0, 0,0,0,0,1,1,1,2,2,2,2,2,1,1,1,0,0,0,0,0,\r\n   0,0,0,1,1,2,2,3,3,3,3,3,2,2,1,1,0,0,0,0, 0,0,0,1,1,2,2,3,3,3,3,3,2,2,1,1,0,0,0,0,\r\n   0,0,1,1,2,3,3,3,4,4,4,3,3,3,2,1,1,0,0,0, 0,0,1,1,2,3,3,3,4,4,4,3,3,3,2,1,1,0,0,0,\r\n   0,0,1,1,2,3,4,4,4,5,4,4,4,3,2,2,1,0,0,0, 0,0,1,1,2,3,4,4,4,5,4,4,4,3,2,2,1,0,0,0,\r\n   0,1,1,2,3,3,4,5,5,6,5,5,4,4,3,3,2,1,0,0, 0,1,1,2,3,3,4,5,5,6,5,5,4,4,3,3,2,1,0,0,\r\n   0,1,2,2,3,4,4,5,6,7,6,5,5,4,4,3,2,1,0,0, 0,1,2,2,3,4,4,5,6,7,6,5,5,4,4,3,2,1,0,0,\r\n   0,1,2,3,3,4,5,5,7,8,7,6,5,5,4,3,2,1,0,0, 0,1,2,3,3,4,5,5,7,8,8,6,5,5,4,3,2,1,0,0,\r\n   0,1,2,3,4,4,5,6,6,7,7,6,5,5,4,3,2,1,0,0, 0,1,2,3,4,4,5,6,6,7,6,6,5,5,4,3,2,1,0,0,\r\n   0,1,2,3,4,4,5,5,6,6,6,6,5,4,4,3,2,1,0,0, 0,1,2,3,4,4,5,5,6,6,6,5,5,4,4,3,2,1,0,0,\r\n   0,1,2,3,3,4,4,5,5,6,5,5,4,4,3,3,2,1,0,0, 0,1,2,3,3,4,4,5,5,6,5,5,4,4,3,3,2,1,0,0,\r\n   0,1,1,2,3,3,4,4,5,5,5,4,4,4,3,2,1,1,0,0, 0,1,1,2,3,3,4,4,5,5,5,4,4,4,3,2,1,1,0,0,\r\n   0,0,1,1,2,3,3,4,4,4,4,4,3,3,3,2,1,0,0,0, 0,0,1,1,2,3,3,4,4,4,4,4,3,3,3,2,1,0,0,0,\r\n   0,0,1,1,2,2,3,3,3,4,4,3,3,2,2,1,1,0,0,0, 0,0,1,1,2,2,3,3,3,4,4,3,3,2,2,1,1,0,0,0,\r\n   0,0,0,1,1,2,2,2,3,3,3,2,2,2,1,1,0,0,0,0, 0,0,0,1,1,2,2,2,3,3,3,2,2,2,1,1,0,0,0,0,\r\n   0,0,0,0,1,1,1,2,2,2,2,2,1,1,1,0,0,0,0,0, 0,0,0,0,1,1,1,2,2,2,2,2,1,1,1,0,0,0,0,0,\r\n   0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0, 0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,\r\n   0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\r\n\r\n]\r\n\r\n\r\nvar selection = svg.selectAll(&quot;rect&quot;)\r\n  .data(mydata)\r\n\r\nvar cellsize = 5;\r\n\r\nvar x_dim = 40;\r\nvar y_dim = 40;\r\n\r\nselection.enter().append(&quot;rect&quot;)\r\n  .attr(&quot;x&quot;, function(d,i) { return (i%x_dim)*cellsize; })\r\n  .attr(&quot;y&quot;, function(d,i) { return (Math.floor(i\/x_dim))*cellsize; })\r\n  .attr(&quot;width&quot;, cellsize)\r\n  .attr(&quot;height&quot;, cellsize)\r\n  .style(&quot;fill&quot;, function(d) {return get_rgb(d);})\r\n\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The code below creates the extremely basic heatmap shown above using D3.JS. The heatmap data is stored in a flat 1D array, so X and Y dimensions need to be provided. I don&#8217;t think it would be too hard to modify this to process 2D arrays. &lt;html&gt; &lt;body&gt; &lt;svg class=&quot;output&quot; width=&quot;500&quot; height=&quot;500&quot;&gt; &lt;\/svg&gt; &lt;script src=&quot;http:\/\/d3js.org\/d3.v3.min.js&quot;&gt;&lt;\/script&gt; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-1605","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1RRoU-pT","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/1605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/comments?post=1605"}],"version-history":[{"count":1,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/1605\/revisions"}],"predecessor-version":[{"id":1607,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/1605\/revisions\/1607"}],"wp:attachment":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/media?parent=1605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/categories?post=1605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/tags?post=1605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}