From eb75f0f255150128f48ffc4e9f74b93ffae2a283 Mon Sep 17 00:00:00 2001 From: Micheal Slade <50627681+Micheal-Slade@users.noreply.github.com> Date: Sat, 25 Mar 2023 17:24:37 +0000 Subject: [PATCH 1/3] heatmap now handles NaN and null values in .csv --- heatmap/data.csv | 4 ++-- heatmap/script.js | 24 ++++++++++++++---------- 2 files changed, 16 insertions(+), 12 deletions(-) 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..672f929 100644 --- a/heatmap/script.js +++ b/heatmap/script.js @@ -176,42 +176,46 @@ 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 ? "#cccccc" : 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) { +.on('mouseover', function(d) { + let dataValue = d3.select(this).data()[0].value; + let displayText = dataValue === "NaN" ? "No data" : d3.format(config.essential.dataLabelsNumberFormat)(dataValue); + d3.select('#keytext') - .text(d3.format(config.essential.dataLabelsNumberFormat)(d3.select(this).data()[0].value)) + .text(displayText) .transition() - .attr('x', legendx(+d3.select(this).data()[0].value)) + .attr('x', dataValue === "NaN" ? 0 : legendx(+dataValue)) d3.select('#keysymbol path') - .attr('opacity', 1) + .attr('opacity', dataValue === "NaN" ? 0 : 1) d3.select('#keysymbol') .transition() - .attr('transform', 'translate(' + legendx(+d3.select(this).data()[0].value) + ',0)') + .attr('transform', dataValue === "NaN" ? 'translate(0,0)' : 'translate(' + legendx(+dataValue) + ',0)') }) + .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 From 902b93f766b54b034b72db1a620dfda0b9ea8338 Mon Sep 17 00:00:00 2001 From: Micheal Slade <50627681+Micheal-Slade@users.noreply.github.com> Date: Sat, 25 Mar 2023 17:48:37 +0000 Subject: [PATCH 2/3] Legend now displays No data for Nan and null --- heatmap/script.js | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/heatmap/script.js b/heatmap/script.js index 672f929..e69343b 100644 --- a/heatmap/script.js +++ b/heatmap/script.js @@ -186,22 +186,14 @@ svg.append('g') .attr('width', x.bandwidth()) .attr('height', y.bandwidth()) .on('mouseover', function(d) { - let dataValue = d3.select(this).data()[0].value; - let displayText = dataValue === "NaN" ? "No data" : d3.format(config.essential.dataLabelsNumberFormat)(dataValue); - - d3.select('#keytext') - .text(displayText) - .transition() - .attr('x', dataValue === "NaN" ? 0 : legendx(+dataValue)) - - d3.select('#keysymbol path') - .attr('opacity', dataValue === "NaN" ? 0 : 1) - - d3.select('#keysymbol') - .transition() - .attr('transform', dataValue === "NaN" ? 'translate(0,0)' : 'translate(' + legendx(+dataValue) + ',0)') - }) - + 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') From d87d73fcf5656a147f0173ca5067187a1d5de058 Mon Sep 17 00:00:00 2001 From: Micheal Slade <50627681+Micheal-Slade@users.noreply.github.com> Date: Mon, 27 Mar 2023 09:37:00 +0100 Subject: [PATCH 3/3] Update to grey style. --- heatmap/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/heatmap/script.js b/heatmap/script.js index e69343b..483220b 100644 --- a/heatmap/script.js +++ b/heatmap/script.js @@ -180,7 +180,7 @@ svg.append('g') .selectAll('rect') .data(dataPivoted) .join('rect') - .attr('fill', d => isNaN(d.value) || d.value === null ? "#cccccc" : 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())