Election Templates (CA)

election-templates.md

Election Map Templates

Projections

Projections determine how your data will display and visually prioritize your view of the world. It's important to pick a projection that complements your area of geographic focus

For North American area maps our cartographer recommends the "Albers Equal Area Conic" projection, to show your map with equal area representations of Canada or the US, you can eliminate those queries if you're not interested in a new projection, but I included them in any case.

Here's an example of the SQL and resulting map pairings for multiple projections, search through the examples to find the one that suits you.

Equal Area Conic looks like this:

##MAP 1: Choropleth Link:http://cdb.io/1KSMMdi

There are a few layers in this one, mostly for the custom basemaps, so I included the CSS/SQL pairing that might be most useful to you.

###CARTOCSS

test_resul is your results column in this case, table_name is the name of your dataset/table.

/** choropleth visualization */

#table_name{
  polygon-fill: #0080ff;
  polygon-opacity: 0.8;
  line-color: #FFF;
  line-width: 0;
  line-opacity: 1;
}
#table_name [ test-resul <= 9] {
   polygon-fill: lighten(#D6301D,10);
}
#table_name [ test-resul <= 7] {
   polygon-fill: lighten(#D6301D,20);
}
#table_name [ test-resul <= 4] {
   polygon-fill: lighten(#D6301D,30);
}

#table_name [ test-resul <= -2] {
   polygon-fill: #3E7BB6;
}
#table_name [ test-resul <= -5] {
   polygon-fill: lighten( #3E7BB6,20);
}
#table_name [ test-resul <= -8] {
   polygon-fill: lighten( #3E7BB6,35);
}

###SQL

To reset the projection, you would replace your USERNAME to run the query in your account, and run something like the following depending the projection you'd like to work with.

SELECT 
	ST_Transform(the_geom, 42303) 
AS 
	the_geom_webmercator,
	fake_resul
FROM 
	USERNAME.cartodb_query_3

##MAP 2: Bubble Link: http://cdb.io/1OpiXHo

Bubble maps with proportional symbols are treated in this tutorial (which gives you more info about how to do bubble maps for numeric values etc.):

Here's the CartoCSS and SQL for the election template linked above.

###CARTOCSS

county_points_with_population is an example table name, but you would change this for your dataset of county level counts with some population information per county.

/** simple visualization */

#county_points_with_population{
  marker-fill-opacity: 0.9;
  marker-line-color: #FFF;
  marker-line-width: 0.5;
  marker-line-opacity: 1;
  marker-placement: point;
  marker-type: ellipse;
  marker-width: [symbol_size];
  marker-fill: #9ab2c1;
  marker-allow-overlap: true;
  
  [estimate_total >= 1000000]{
    marker-fill: #2167AB;
  }
}

###SQL

In this example estimate_total is a column name, you would change this for your dataset and the columns appropriately in that table.

SELECT * FROM USERNAME.county_points_with_population ORDER BY estimate_total DESC

##MAP 3: Bivariate Link: http://cdb.io/1FLZzBk Link: http://cdb.io/1FM03r6

This one is the purple-ish map you saw that we're currently trying to make into a bivariate choropleth, it's still in development though and is kind of complicated so it might be best to try with the first two options.

Alpha bivariate has a few data layers and special SQL and CSS for each:

####Layer 1 Romney vote counts ###CARTOCSS

This example uses Election 2012 data for the U.S., table or dataset names and the column names (like romney_percent_num) would change for your dataset.

@1:rgb(229,197,196);
@2:rgb(203,143,141);
@3:rgb(179,94,92);
@4:rgb(158,55,51);


#election2012_sample {

  polygon-opacity: 0.5;
  line-width: 0;
  //polygon-comp-op:overlay;
  
  
  [romney_percent_num >=0.00]
  [romney_percent_num <=40.00] {
    polygon-fill:@1;
  }
  
  [romney_percent_num >=40.01]
  [romney_percent_num <=49.99] {
    polygon-fill: @2;
  }

  [romney_percent_num >=50.0][
  romney_percent_num <=59.99] {
    polygon-fill:@3;
  }
  [romney_percent_num >=60.0]{
    polygon-fill:@4;
  }

}

###SQL

SELECT 
	ST_Transform(the_geom, 42303)
AS
	the_geom_webmercator,
	romney_percent_num,
	cartodb_id
FROM USERNAME.election2012_sample

####Layer 2 Obama vote counts

###CARTOCSS

/** choropleth visualization */

@red: red;
@blue: blue;


#election2012_sample{
  //polygon-fill: #FFFFB2;
  polygon-opacity: 0.5;
  //line-color: #FFF;
  line-width: 0;
  //line-opacity: 1;
  //comp-op:;
  
  [obama_percent_num >=0.00]
  [obama_percent_num <=40.00]{
    polygon-fill: rgb(200,207,221);
}
  
  [obama_percent_num >=40.01]
  [obama_percent_num <=49.99]{
    polygon-fill:rgb(147,161,188); 
  }
  [obama_percent_num >=50.0]
  [obama_percent_num <=59.99]{
    polygon-fill:rgb(98,118,156);
  }
  [obama_percent_num >=60.0]{
    polygon-fill:rgb(55,79,127);//rgb(200,207,221);
}

}

###SQL

SELECT 
	ST_Transform(the_geom, 42303)
AS
	the_geom_webmercator,
	obama_percent_num,
	cartodb_id
FROM USERNAME.election2012_sample

####Layer 3 Election 2012 counts

###CARTOCSS

/** choropleth visualization */

#election2012_sample{
  polygon-fill: #Fff;
  polygon-opacity: 1;
  comp-op:lighten;

#election2012_sample [ total_vote <= 1915242] {
   polygon-fill: #7c7c7c;
    polygon-opacity: 0.8;
     
 
}
#election2012_sample [ total_vote <= 18856] {
   polygon-fill: #d8d8d8;
   //comp-op:lighten;
    polygon-opacity: 0.8;
}
#election2012_sample [ total_vote <= 6590.5] {
   polygon-fill: #FFFFFF;
  polygon-opacity: 0.6;
  
}
}

###SQL

SELECT 
	ST_Transform(the_geom, 42303)
AS
	the_geom_webmercator,
	obama_percent_num,
	romney_percent_num,
	cartodb_id,
	total_vote
FROM USERNAME.election2012_1

##MAP 4: Hexagons You can make a hexagon map in the editor too, here's how you convert polygon geometries to hexagon bins: http://docs.cartodb.com/tips-and-tricks.html#grid-visualization-functions

Here's one made for a dataset about bee loss, this is the original polygon version of that, which splits state polygons into hexagons, doing the same for other countries and districts might require some rethinking for what type of hexagon abstraction might best fit with your usecase.

###CARTOCSS

#us_states_hexgrid{
  polygon-fill: #aaa;
  polygon-opacity: 0.8;
  line-color: #FFF;
  line-width: 0.5;
  line-opacity: 0.5;
}

#us_states_hexgrid::labels {
  text-name: [label];
  text-face-name: 'DejaVu Sans Book';
  text-size: 14;
  text-label-position-tolerance: 100;
  text-fill: #FFFFFF;
  text-halo-fill: fadeout(#081B47, 80%);
  text-halo-radius: 2;
  text-dy: 0;
  text-allow-overlap: false;
  text-placement: point;
  text-placement-type: simple;
  text-placements: "X,14,12,10,8";
}

#us_states_hexgrid [ counts <= 66] {
   polygon-fill: #C1373C;
}
#us_states_hexgrid [ counts <= 58] {
   polygon-fill: #CC4E52;
}
#us_states_hexgrid [ counts <= 50] {
   polygon-fill: #D4686C;
}
#us_states_hexgrid [ counts <= 42] {
   polygon-fill: #DB8286;
}
#us_states_hexgrid [ counts <= 34] {
   polygon-fill: #E39D9F;
}
#us_states_hexgrid [ counts <= 26] {
   polygon-fill: #EBB7B9;
}
#us_states_hexgrid [ counts <= 18] {
   polygon-fill: #F2D2D3;
}

Here's the state grid data for download along with a rendered CartoDB map.

Here's another approach for a US bin map with CartoDB: http://www.cepr.net/blogs/cepr-blog/the-union-dividend-it-reaches-beyond-members.

Simon Mercier did one a while ago but it is now outdated I think, still useful for inspiration.

thumbnail.png