Heatmap can now handle null and NaN values

heatmap/data.csv

@@ -1,7 +1,7 @@
 name,London,South East,East of England,South West,Scotland,North West,West Midlands,East Midlands,Yorkshire and The Humber
-Admin,20.85373832,17.6949027,84.86276061,31.5783842,48.20562268,92.09218949,80.66789858,50.56484924,31.1986153
+Admin,20.85373832,17.6949027,NaN,31.5783842,48.20562268,92.09218949,80.66789858,50.56484924,31.1986153
 Arts,75.10385606,92.78801932,98.42939789,95.19411478,38.58584155,99.36743553,59.81457575,87.03107767,13.74814058
-Retail,64.12511024,36.80002708,38.20913822,4.832285581,31.60393462,49.45953284,67.95744598,21.37821922,78.39457609
+Retail,64.12511024,36.80002708,38.20913822,null,31.60393462,49.45953284,67.95744598,21.37821922,78.39457609
 Manufacturing,58.04407128,91.82819229,44.15710484,93.53981204,32.06639495,84.91241512,60.32044686,3.489901745,82.20569463
 Construction,49.29571885,61.7405718,2.633201818,12.00880742,86.95296893,52.89787277,29.47984492,93.683539,57.04940039
 Health and social work,26.42919394,68.3881695,38.34804204,45.46625342,24.65361361,11.23520019,68.82058623,43.13596269,84.71592843

heatmap/script.js

@@ -176,42 +176,38 @@ function drawGraphic() {
     .call(yAxis)
     .selectAll('text').call(wrap, margin.left - 10)
 
-  svg.append('g')
+svg.append('g')
     .selectAll('rect')
     .data(dataPivoted)
     .join('rect')
-    .attr('fill', d => colour(+d.value))
+    .attr('fill', d => isNaN(d.value) || d.value === null ? "#A09FA0" : colour(+d.value))
     .attr('x', d => x(d.region))
     .attr('y', d => y(d.name))
     .attr('width', x.bandwidth())
     .attr('height', y.bandwidth())
-    .on('mouseover', function(d) {
-      d3.select('#keytext')
-        .text(d3.format(config.essential.dataLabelsNumberFormat)(d3.select(this).data()[0].value))
-        .transition()
-        .attr('x', legendx(+d3.select(this).data()[0].value))
-
-      d3.select('#keysymbol path')
-        .attr('opacity', 1)
-
-      d3.select('#keysymbol')
-        .transition()
-        .attr('transform', 'translate(' + legendx(+d3.select(this).data()[0].value) + ',0)')
-    })
+.on('mouseover', function(d) {
+  let dataValue = d3.select(this).data()[0].value;
+  let displayText = isNaN(dataValue) || dataValue === null ? "No data" : d3.format(config.essential.dataLabelsNumberFormat)(dataValue);
+
+  d3.select('#keytext')
+    .text(displayText)
+    .transition()
+    .attr('x', isNaN(dataValue) || dataValue === null ? 0 : legendx(+dataValue))
+})
     .on("mouseout", mouseout)
 
-  svg.append('g')
+svg.append('g')
     .selectAll('text')
     .data(dataPivoted)
     .join('text')
     .attr('class', 'dataLabels')
-    .attr('fill', d => d.value >= breaks[2] ? "#ffffff" : "#414042")
+    .text(d => isNaN(d.value) || d.value === null ? "NA" : d3.format(config.essential.dataLabelsNumberFormat)(d.value))
     .attr('x', d => x(d.region))
     .attr('dx', x.bandwidth() / 2)
     .attr('y', d => y(d.name))
     .attr('dy', y.bandwidth() / 2 + 4)
     .attr('text-anchor', 'middle')
-    .text(d => d3.format(config.essential.dataLabelsNumberFormat)(d.value))
+    .text(d => isNaN(d.value) || d.value === null ? "NA" : d3.format(config.essential.dataLabelsNumberFormat)(d.value))
     .attr("pointer-events", "none")
 
   //create link to source