Unfilled choropleth cells

[bnaul]

I've noticed that often some cells will not receive a color depending on the corresponding value. I uploaded an example GeoJSON that reproduces this behavior on the latest master:

viz = ChoroplethViz('https://gist.githubusercontent.com/bnaul/9cabfecc998ea8ffce5aa0b44afc1dda/raw/b7f88c5c7d13306851d220ded36445395c45bf17/example.json',
                    access_token=TOKEN,
                    color_property='mean_household_income',
                    color_stops=create_color_stops([20_000, 60_000, 100_000, 200_000], colors='Blues'),
                    color_function_type='interpolate',
                    line_color='rgb(38,0,128)',
                    center=(-79.95, 43.75),
                    height='800px',
                    zoom=11,
                    )
viz.show()

I thought maybe there was something wrong with the polygons themselves, but changing the color stops fixes the issue (here I just divided all the color stops by 100):

Anecdotally this seems more likely to affect values near the middle of the scale, but that could be my imagination...

[akacarlyann]

@bnaul Thanks for the heads up! The line change I mention below may correct the problem for you.

@ryanbaumann I think this may be related to difference in behavior for an exponential interpolation versus the linear interpolation that was originally in place. I was able to display the colors properly by changing line 96 in main.html from expression = ['interpolate', ['exponential', 1.2], ['get', propertyValue]] to expression = ['interpolate', ['linear'], ['get', propertyValue]].

For context:

function generateInterpolateExpression(propertyValue, stops) {
    var expression;
    if (propertyValue == 'zoom') {
        expression = ['interpolate', ['exponential', 1.2], ['zoom']]
    }
    else if (propertyValue == 'heatmap-density') {
        expression = ['interpolate', ['exponential', 1.2], ['heatmap-density']]
    }
    else {
        expression = ['interpolate', ['linear'], ['get', propertyValue]]
    }

    for (var i=0; i<stops.length; i++) {
        expression.push(stops[i][0], stops[i][1])
    }
    return expression
}

[ryanbaumann]

@akacarlyann yes, changing to linear interpolation should fix this issue. Expressions for non-zoom driven functions should scale linearly by default.

[akacarlyann]

Sweet. That also resolves a slight mismatch in color computation for vector vizes vs geojson choropleth maps.