Manual class breaks eliminate class by not defining each break explicitly

[makella]

@rochoa @saleiva

Building on this issue: https://github.com/CartoDB/turbo-carto/issues/56

Context

TurboCARTO creates one less class than requested and the first color in the color scheme is assigned as the default polygon-fill. This has unintended consequences as seen in the election map example below.

The purpose of the map is to color each county by its winner and then and adjust that color depending on the percent of the win (typical choropleth map use). Because a county was won by a candidate, the minimum value of a county that was won is 0.5 (50%).

There are two ways this map can be made:

• using three custom class breaks ( for example >0.5,>0.6,>0.8)
• or using one of our built-in classification methods

I am noticing the issue with both methods. This ticket describes the manual classification method in more detail in this ticket.

I will describe the use of CartoCSS conditions and the second method of making a map in another issue.

Traditional CartoCSS

With traditional CartoCSS, you would make a map with custom class breaks like this:

#layer {
 //republican styling
  [county_winner="gop"] {
    [pct_gop>0.5]{polygon-fill: #FBD0D0;}
    [pct_gop>0.6]{polygon-fill: #E99D99;}
    [pct_gop>0.8]{polygon-fill: #CF615D;}  
  }

 //democratic styling
  [county_winner="dem"] {
    [pct_dem>0.5]{polygon-fill: #9CC0E3;}
    [pct_dem>0.6]{polygon-fill: #6193C7;}
    [pct_dem>0.8]{polygon-fill: #006AAB;}  
  }
}

The result would be a map where counties won by the republican candidate would vary from light to dark red based on the percentage of the votes and the same pattern except shades of blue for the democratic winner.

Example Map: https://team.carto.com/u/mamataakella/builder/af62fae6-c7de-11e6-aae2-0e233c30368f/embed

TurboCARTO

If you attempt to make the same map with TurboCARTO, only the middle shade and dark shade show on the map.

What is happening is that the lightest color is being assigned as the default polygon-fill, >50 is getting the middle color and >60 is getting the darkest color. Since >80 meets the critera of >60, the counties that meet that criteria do not get colored.

What should happen is that >50 should get the lightest color, >60 the middle color, and >80 the darkest color.

For example, if I were to try this:

#layer {
  [county_winner="gop"]{
    polygon-fill: ramp([pct_gop],  (#FBD0D0,#E99D99,#CF615D),(0.5,0.6,0.8),">");
  }
  [county_winner="dem"]{
    polygon-fill: ramp([pct_gop],(#9CC0E3,#6193C7,#006AAB),(0.5,0.6,0.8),">");
  }
}

The output CartoCSS is this:

#layer {
  [county_winner="gop"]{
    polygon-fill: #FBD0D0;
    [ pct_gop > 0.5 ] {polygon-fill: #E99D99;}
    [ pct_gop > 0.6 ] {polygon-fill: #CF615D;}
  }

  [county_winner="dem"]{
    polygon-fill: #9CC0E3;
    [ pct_dem > 0.5 ] {polygon-fill: #6193C7;}
    [ pct_dem > 0.6 ] {polygon-fill: #006AAB;}  
  }
}

You'll notice that the map results with only 2 classes showing for each party: https://team.carto.com/u/mamataakella/builder/aefb8c9c-9942-49a1-8aa9-6babe41a60a6/embed

.carto file (with TurboCARTO applied)

Elections_ TurboCARTO Import (on 2016-12-22 at 22.55.47).carto.zip

[saleiva]

@makella for the time being, and according to the documentation, you should be using a decreasing ramp instead.

polygon-fill: ramp([pct_dem],(#9CC0E3 ,#6193C7 ,#006AAB ),(0.5,0.6,0.8),"<");

@rochoa and myself will be thinking on this for this ticket.

[makella]

@saleiva @rochoa

ok, got it. feels counterintuitive to use < when the colors (#9CC0E3,#6193C7,#006AAB) and the values are increasing sequentially (0.5,0.6,0.8) left to right which is the natural order or reading... But now that you pointed it out, I can see it both ways.

Good to know!