D3.js: How to Deal with Null Values in Choropleth Map (Tooltip)

Question

I've created a US choropleth map in D3. There are two layers; the first is a state layer that simply has blank states. The second layer is a county layer that colors the counties based on data. I have also created a tooltip to show the data.

There are, however, a few states for which I have no data. I either want for there to be no tooltip at all for those states; or alternatively, the tooltip could just say something like "no data available."

This is what my map looks like:

This is what the tooltip looks like for a county with data:

This is what the tooltip looks like when it hits a null value:

It's that last one that I want to fix.

Here is the code for the tooltip, where I tried to create an alternative tooltip:

// add tooltip
const tip = d3.tip()
    .attr('class', 'tooltip-container')
    .html(d => {  
        let content = `<div class="tooltip-left"><strong>County: </strong><span class="tooltip-right">${countyNames[d.id]}</span></div>`;
        content += `<div class="tooltip-left"><strong>Avg Prem: </strong><span class="tooltip-right">$&nbsp${premById[d.id]}</span></div>`;

        return content;
    })

svg.call(tip);

// add null tooltip
const null_tooltip = d3.tip()
    .attr('class', 'tooltip-container')
    .html(d => {  
        let content = `<div class="tooltip-left"><strong>No Data Available</strong></div>`;

        return content;
    })

svg.call(null_tooltip);

// add events
svg.selectAll('path')
    // mouse hover event
    .on('mouseover', (d, i, n) => {

        if (i){
            tip.show(d,n[i]);
            // handleMouseOver(d,i,n);
            }
        else {

            null_tooltip.show();
        }

    })

This doesn't work at all, but I'm quite confused how to create an if-else statement that might test for a null value here. Or alternatively, if there's just a way to not trigger the tooltip code for the nulls?

I have more experience in Python than JS and I know there are easy ways to do this in Python; not sure about JS.

Edit: Solved; see below. Basically, I realized that the FIPS codes are 5 digits for counties, but only 2 digits for states. I then used "d.id.length" in the if statement and required it to be greater than 4. Might still be a better solution, and this one avoided the "null value" issue, but it works in this case.

Ragnar Lothbrok · Answer 1 · 2019-07-13T20:45:23.037

Alright, I solved this, albeit somewhat indirectly. Still might be a better solution out there.

When I console logged "d.id", I realized it was still giving me the FIPS codes for the states (rather than a null). Since FIPS County Codes have 5 digits and state codes only have 2 digits, I changed my tooltip function to:

// add events
    svg.selectAll('path')
        // mouse hover event
        .on('mouseover', (d, i, n) => {
            console.log(d.id.length);

            if (d.id.length > 4){
                tip.show(d,n[i]);
                // handleMouseOver(d,i,n);
                }

        })

"d.id" would just be the data object and the "id" is the FIPS code. So I just required the length of "d.id" to be greater than 4 and that eliminates the tooltip for the "null states".

score 0 · Answer 2 · answered Jul 13 '19 at 20:40

0

I think your condition if (i){ in the mousover callback should be if (d){. if (i){ seems like it's checking for an index, not for data.

answered Jul 13 '19 at 20:40

ldtcoop

680
4
14

It was, but the index in this case was the FIPS county / state codes. I thought it was generating errors / nulls for the states, but it turns out it was not, so I think that was the problem. I just had to change the code to test the length of the FIPS codes. – Ragnar Lothbrok Jul 13 '19 at 20:48

D3.js: How to Deal with Null Values in Choropleth Map (Tooltip)

2 Answers2