Exploring the Brexit result using vega-lite's grammar of interaction

Results data are made available by the Electoral Commission; Census 2011 data by the Office for National Statistics. A full data analysis can be accessed from this githib repository and more involved workshops using ggplot2's grammar of graphics from this this repository.

Scatterplot

"data": {"url": "data/data_gb.csv"},
"mark": {"type": "point", "filled": true},
"encoding": {
   "x": {"field": "degree_educated", "type": "quantitative"},
   "y": {"field": "share_leave", "type": "quantitative"},
   "color": {"field": "region", "type": "nominal"}
}

Sctterplot with view composition

"data": {"url": "data/data_gb.csv"},
"repeat" : {"column": ["degree_educated", "private_transport_to_work"]},
"spec": {
   "mark": {"type": "point", "filled": true},
   "encoding": {
     "x": {"field": {"repeat": "column"}, "type": "quantitative"},
     "y": {"field": "share_leave", "type": "quantitative"},
     "color": {"field": "region", "type": "nominal"}
   }
}

Scatterplot with single point select

"data": {"url": "data/data_gb.csv"},
"mark": {"type": "point", "filled": true},
"selection" : {"picked": {"type": "single", "on":"mouseover"}},
"encoding": {
   "x": {"field": "degree_educated", "type": "quantitative"},
   "y": {"field": "share_leave", "type": "quantitative"},
   "color": {
     "condition": {"selection": "picked", "field": "region", "type": "nominal"}, "value": "#d9d9d9"
     }
}

Scatterplot with field-level select

"data": {"url": "data/data_gb.csv"},
"mark": {"type": "point", "filled": true},
"selection" : {"picked": {"type": "multi", "on":"mouseover", "nearest": true, "fields": ["region"]}},
"encoding": {
   "x": {"field": "degree_educated", "type": "quantitative"},
   "y": {"field": "share_leave", "type": "quantitative"},
   "color": {
     "condition": {"selection": "picked", "field": "region", "type": "nominal"}, "value": "#d9d9d9"
  }
}

Scatterplot with linked views

"data": {"url": "data/data_gb.csv"},
"hconcat": [
{
   "repeat" : {"column": ["degree_educated", "not_good_health", "private_transport_to_work"]},
   "spec": {
     "width" : 160,
     "mark": {"type": "point", "filled": true},
     "encoding": {
       "x": {"field": "share_leave", "type": "quantitative"},
       "y": {"field": {"repeat": "column"}, "type": "quantitative"},
       "color": {
         "condition": {"selection": "turnout_select", "field": "region", "type": "nominal"}, "value": "#d9d9d9"
       }
     }
   }
}, {
   "width" : 600,
   "height" : 100,
   "mark": "bar",
   "selection": {"turnout_select": {"type": "interval", "encodings": ["x"]}},
   "encoding": {
     "x": {"field": "area", "type": "nominal", "axis": null,
     "sort": {"op": "mean","field":"turnout", "order": "descending"}},
     "y": {"field": "turnout", "type": "quantitative"},
     "color": {"condition": {"selection": "turnout_select", "value": "#969696"}, "value": "#cccccc"}
  }
}]

Choropleths

"data": {"url": "data/gb_las.topojson", "format": {"type": "topojson", "feature": "foo"}},
"transform": [{
  "lookup": "id", "from": {"data": {"url": "data/data_gb.csv"}, "key": "id","fields": ["margin_leave", "resids_degrees"]}}
}],
"projection": {"type": "mercator"},
"repeat" : {"column": ["margin_leave", "resids_degrees"]},
"spec": {
   "vconcat": [{
     "width": 300, "height": 300,
     "mark": {"type": "geoshape", "stroke": "#636363", "strokeWidth": 0.1},
     "encoding": {
       "color": {"field": {"repeat": "column"},"type": "quantitative", "scale": {"scheme": "redblue", "domain": [-0.3, 0.3]}, "legend": false}
     }
   },{
     "width": 200,
     "mark": "tick",
     "encoding": {
       "x": {"field": {"repeat": "column"}, "type": "quantitative", "scale": {"domain": [-0.3, 0.3]}},
       "color": {"field": {"repeat": "column"}, "legend": false, "type": "quantitative", "scale": {"scheme": "redblue", "domain": [-0.3, 0.3]}}
     }
   }]
},
"config": {"style": {"cell": {"stroke": "transparent"}},"text": {"align": "right"}}