cartocss - how to combine chloropleth, bubble and cluster designs in CARTO?

To be concrete, I have a map of election results by precinct. As I do not have shapefiles for the precincts, I geocoded the polling places, but many precincts share polling places. I have the following design in mind, but as it goes beyond the available wizards in Carto, some guidelines about what is feasible with CartoCSS (and mabye how) would be welcome.

1. It would be nice if the precincts did not overlap. Some design where they are clustered by polling place or "jiggled" to appear around the polling place but not on top of each other would be nice, if possible.


2. The size of the markers should vary be the size of the precinct, just like in a bubble design.


3. The color/filling of the markers should vary by the vote share in the precinct, basically as in a chloropleth design.

+1. It would be nice if the map could be interactive and the user could toggle between two different vote shares coloring the same precincts with the same bubble sizes. (Basically, "No" votes in a referendum vs. invalid ballots.)

+2. A Torque-like design could replace point 3 (but still combined with points 1 and 2), where precincts bubble up over time according to their results. I was surprised this was not easier: the election results being numbers between 0 and 0.5, they did not automatically span the time of the animation, I am not sure if this is possible without manipulating the underlying data into a different range of numbers.

I hope at least points 1-3. are possible to combine.

Answer

1. 
   

   You can overcome the points overlapping problem using different approaches. On the one hand, you can use CARTO.js and Leaflet L.Markercluster and spidify() methods. Here you have a working example. On the other hand, there is an SQL trick that I really like called "stacking chips" where you gradually offset the points located on the same spot. Here you have a working example.

   
   


2. 
   

   & 3. Both can be achieved separately with the Wizard. But if you want to mix them, follow these steps. First, select Choropleth Map from the Wizard. Then copy the CartoCSS code (and paste and save it in a text editor). Secondly, go back to the Wizard and select Bubble Map. Finally, go to the CartoCSS tab and paste at the end the Choropleth CartoCSS style.

   
   

+1 You can add a hover/click infowindows.

+2 It is possible to design a custom CartoCSS mixing Torque, Choropleth and Bubble styles like this one.