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.

1 Answer 1

  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.

  • Thanks! For 1, the blog link crashes a current Safari Technology Preview, and even in Chrome or Safari, I do not see the embedded code properly, neither the full code on GitHub, so I could not easily adapt it. 2 & 3 worked beautifully.
    – László
    Oct 6, 2016 at 17:57
  • 1
    Happy to help! Sorry about the issue regarding the blog post. Anyway, here you have the key part, the SQL query that allows you to offset the overlapping points. Oct 7, 2016 at 7:51
  • 1
    @László btw, if you think this answer have solved your question please marked as answered in order to other users know it. Oct 7, 2016 at 10:55
  • I know, I am just getting back to this! One thing: I could adapt the SQL code in your link (other variables as q.variable), but then in the map view the cartoCSS window in disabled. Is there something wrong or I shall just save a copy of the newly modified data, redo (paste) the CSS code in a new map of that data, and go from there?
    – László
    Oct 7, 2016 at 10:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.