Choropleth map using leaflet not displaying correct style

Question

I created a map of the 2016 election at the county level, where if one party gets more votes than the other in one county, that county gets the color of said party. So obviously, I use a conditional statement. Almost all counties are looking fine, they're following the rule, but some are NOT. For example, Gray County, TX, where the dems only got around 9%, while the gop got 88%. For some reason, the map displays this county in blue, not the gop color scheme:

You can find the map here: https://sushirittoman.github.io/maps/counties_project/index.html

And here is the code I wrote for the map, borrowing heavily from the leaflet tutorial for choropleth maps ( https://leafletjs.com/examples/choropleth/ ):

//Red palette for Gop 
function getColorGop(v) {
            return v > 70 ? '#800026' :
                   v > 50 ? '#BD0026' :
                   v > 40 ? '#E31A1C' :
                   v > 30 ? '#FC4E2A' :
                   v > 20 ? '#FD8D3C' :
                   v > 10 ? '#FEB24C' :
                            '#FED976' ;                                  

}

//Blue palette for Dems
function getColorDem(v) {
            return v > 70 ? '#08589e':
                   v > 50 ? '#2b8cbe':
                   v > 40 ? '#4eb3d3':
                   v > 30 ? '#7bccc4':
                   v > 20 ? '#a8ddb5':
                   v > 10 ? '#ccebc5':
                            '#e0f3db';                               

}

//Ultimate style, where we insert the conditional statement
function style(feature) {
            if ([feature.properties.per_dem * 100] > [feature.properties.per_gop * 100]) {
                return {
                    fillColor: getColorDem(feature.properties.per_dem * 100),
                    weight: 1,
                    opacity: 1,
                    color: 'black',                    
                    fillOpacity: 1                        
                }                                        
            } 
            else {
                return {
                    fillColor: getColorGop(feature.properties.per_gop * 100),
                    weight: 1,
                    opacity: 1,
                    color: 'black',                   
                    fillOpacity: 1                        
                };
}        

I am stumped. I was hoping this could be my first official non-tutorial webmap. This issue seems to be an anomaly. I would very much appreciate your thoughts.

Answer 1

Your comparison is written as

[feature.properties.per_dem * 100] > [feature.properties.per_gop * 100]

[...] in Javascript is the syntax for declaring an array, which means that you are trying to determine if an array is bigger than an other and that's probably not what you want (given how type casting in JS works, predicting the outcome can be tricky).

Try

if (feature.properties.per_dem * 100 > feature.properties.per_gop * 100)

or ( + are there to cast the strings in your geoJSON into numbers)

if (+feature.properties.per_dem > +feature.properties.per_gop)