diff --git a/heatmap/data.csv b/heatmap/data.csv index fd63c9f..9e1f4e5 100644 --- a/heatmap/data.csv +++ b/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 diff --git a/heatmap/script.js b/heatmap/script.js index eff9a9e..483220b 100644 --- a/heatmap/script.js +++ b/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