{"id":4680,"date":"2019-12-22T08:36:18","date_gmt":"2019-12-22T08:36:18","guid":{"rendered":"http:\/\/wiki.davelevy.info\/?p=4680"},"modified":"2022-01-04T19:29:31","modified_gmt":"2022-01-04T19:29:31","slug":"visualising-electoral-data-again","status":"publish","type":"post","link":"https:\/\/davelevy.info\/wiki\/visualising-electoral-data-again\/","title":{"rendered":"Visualising electoral data again"},"content":{"rendered":"<p>Obviously with the results of the general election announced my mind turns to analysis and visualisation. I had\/have been looking at this for a while, and here are my notes. Actually this is an index entry as much of what I had found is catalogued in the two related posts below\/overleaf. &#8230;<!--more--><\/p>\n<p>The ONS offer tools visualising facts by constituency<\/p>\n<ol>\n<li><a href=\"https:\/\/www.ons.gov.uk\/peoplepopulationandcommunity\/housing\/articles\/visualisingyourconstituency\/2015-03-26\">Visualising your constituency<\/a><\/li>\n<\/ol>\n<p>I had another look at this in 2021. I have found the following links,<\/p>\n<ol>\n<li><a href=\"https:\/\/open-innovations.org\/blog\/2017-05-08-mapping-election-with-hexes\">https:\/\/open-innovations.org\/blog\/2017-05-08-mapping-election-with-hexes<\/a>, an opening page at odileeds, mainly about why hexagons.<\/li>\n<li><a href=\"https:\/\/odileeds.github.io\/odi.hexmap.js\/\">https:\/\/odileeds.github.io\/odi.hexmap.js\/<\/a>, they say, &#8220;This library assumes you have an existing hex layout as <a href=\"https:\/\/odileeds.org\/projects\/hexmaps\/hexjson\">HexJSON<\/a> (e.g. <a href=\"https:\/\/github.com\/odileeds\/hexmaps\/tree\/gh-pages\/maps\">layouts we&#8217;ve made<\/a>) and the ability to add Javascript to a webpage. The library creates an SVG (scalable vector graphic) of hexes &#8211; which can be styled via CSS &#8211; and some basic event callbacks.&#8221; This has a lot of example code, otherwise known by me as<style>\r\na.imPop:hover span { display:block; position:absolute; top:1em; left:1em;\r\nwidth:300px; height:136px;}<\/style>\r\n<a class=\"imPop\"  href=\"https:\/\/odileeds.github.io\/odi.hexmap.js\/\">ODI - Getting Started<span>\r\n<img decoding=\"async\" src=\"https:\/\/davelevy.info\/wiki\/wp-content\/uploads\/2021\/12\/leeds-odi-home-w650.png\" alt=\"odi\"  border=\"0\" \/>\r\n<\/span><\/a><\/li>\n<li><a href=\"https:\/\/open-innovations.org\/projects\/hexmaps\/ge2019\/\">https:\/\/open-innovations.org\/projects\/hexmaps\/ge2019\/<\/a> this is the <strong>2019 GE<\/strong> with <em>popups<\/em> on the constituencies, <style>\r\na.imPop:hover span { display:block; position:absolute; top:1em; left:1em;\r\nwidth:300px; height:136px;}\r\n<\/style>\r\n<a class=\"imPop\"  href=\"https:\/\/open-innovations.org\/projects\/hexmaps\/ge2019\/\">ODI - 2029 GE thumbnail<span>\r\n<img decoding=\"async\" src=\"https:\/\/davelevy.info\/wiki\/wp-content\/uploads\/2021\/12\/odi-ge2019-w650.png\" alt=\"odi\"  border=\"0\" \/>\r\n<\/span><\/a><\/li>\n<li><a href=\"https:\/\/open-innovations.org\/blog\/2017-05-08-mapping-election-with-hexes\">https:\/\/open-innovations.org\/blog\/2017-05-08-mapping-election-with-hexes<\/a>\u00a0 or how Leeds got there! They point at <a href=\"https:\/\/open-innovations.org\/projects\/hexmaps\/constituencies\/\">the hexmap of constituencies<\/a>, and the <a href=\"https:\/\/github.com\/odileeds\/hexmaps\">code<\/a> that does the 2015 and other results.<\/li>\n<li><a href=\"https:\/\/github.com\/jbaileyh\/geogrid\">https:\/\/github.com\/jbaileyh\/geogrid<\/a> claims to be a tool that generates the cartograms from HexJson. It does and works from a .csv spreadsheet.\u00a0 I used <a href=\"https:\/\/www.w3schools.com\/colors\/colors_picker.asp\">this colour picker<\/a> to get the colour hex codes.<\/li>\n<li>A <a href=\"https:\/\/open-innovations.org\/projects\/hexmaps\/hexjson.html\">document on HexJSON<\/a> and how to write it.<\/li>\n<\/ol>\n<p><a href=\"https:\/\/davelevy.info\/wiki\/wp-content\/uploads\/2019\/12\/lewdept-hexmap.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6057 size-medium\" src=\"https:\/\/davelevy.info\/wiki\/wp-content\/uploads\/2019\/12\/lewdept-hexmap-283x300.png\" alt=\"\" width=\"283\" height=\"300\" srcset=\"https:\/\/davelevy.info\/wiki\/wp-content\/uploads\/2019\/12\/lewdept-hexmap-283x300.png 283w, https:\/\/davelevy.info\/wiki\/wp-content\/uploads\/2019\/12\/lewdept-hexmap.png 650w\" sizes=\"auto, (max-width: 283px) 100vw, 283px\" \/><\/a><\/p>\n<p>So I made <a href=\"http:\/\/test.davelevy.info\/hexmap\/hexmap4.htm\">a hexmap<\/a>, it&#8217;s not finished yet.<\/p>\n<ol>\n<li>I started from <a href=\"https:\/\/odileeds.github.io\/odi.hexmap.js\/\">here<\/a>, where they publish code that almost works. I found this via <a href=\"https:\/\/odileeds.github.io\/odi.hexmap.js\/\">the ODI page documenting the javascript<\/a>.<\/li>\n<li>I used<a href=\"https:\/\/open-innovations.org\/projects\/hexmaps\/builder.html\"> this page<\/a> to generate <a href=\"https:\/\/docs.google.com\/document\/d\/1UaxxJkRpOlOe5APg1sy43IdwX5P6dyWU5OK4cvLnYhw\/edit?usp=sharing\">the hexmap<\/a> in json.<\/li>\n<\/ol>\n<p><div class=\"scroll-box\" style=\"border: gray; background-color: linen;\">\r\n<span>\r\n&LT;style><br\/>\r\n&nbsp; #hexmap1 { height: 300px; width: 100%; }<br\/>\r\n&LT;\/style><br\/>\r\n&LT;script type=\"text\/javascript\"<br\/>\r\n&nbsp;&nbsp;&nbsp;          src=\"https:\/\/odileeds.github.io\/odi.hexmap.js\/odi.hexmap.js\"><br\/>&LT;\/script><br\/>\r\n&LT;script><br\/>\r\n     ODI.ready(function(){<br\/>\r\n&nbsp;     hex = new ODI.hexmap(document.getElementById('hexmap1'),{<br\/>\r\n&nbsp;                'labels': { 'show': true },<br\/>\r\n&nbsp;                'hexjson':{ \"layout\":\"odd-r\",<br\/>\r\n&nbsp;&nbsp;           \"hexes\": { <br\/>\r\n&nbsp;&nbsp;&nbsp;&nbsp;  \"1\":{\"n\":\"Evelyn\",\"id\":1,\"q\":2,\"r\":3,\"colour\":\"red\",\"threat\":\"Tory\"},<br\/>\r\n &nbsp;&nbsp;&nbsp;&nbsp;                         \"2\":{\"n\":\"New Cross Gate\",\"id\":2,\"q\":2,\"r\":2,\"colour\":\"#900\",\"threat\":\"Tory\"},<br\/>&nbsp;&nbsp;&nbsp;&nbsp;      \r\n                        \"3\":{\"n\":\"Deptford\",\"id\":3,\"q\":3,\"r\":2,\"colour\":\"#900\",\"threat\":\"Tory\"},<br\/>&nbsp;&nbsp;&nbsp;&nbsp;      \r\n                        \"4\":{\"n\":\"Telegraph Hill\",\"id\":4,\"q\":1,\"r\":1,\"colour\":\"#900\",\"threat\":\"TUSC\"},<br\/>&nbsp;&nbsp;&nbsp;&nbsp;      \r\n                        \"5\":{\"n\":\"Brockley\",\"id\":5,\"q\":2,\"r\":1,\"colour\":\"#f66\",\"threat\":\"Green Party\"},<br\/>&nbsp;&nbsp;&nbsp;&nbsp;      \r\n                        \"6\":{\"n\":\"Crofton Park\",\"id\":6,\"q\":1,\"r\":0,\"colour\":\"threat\",\"pop\":\"Tory\"},<br\/>&nbsp;&nbsp;&nbsp;&nbsp;      \r\n                        \"7\":{\"n\":\"Ladywell\",\"id\":7,\"q\":2,\"r\":0,\"colour\":\"#f66\",\"threat\":\"Tory\"},<br\/>&nbsp;&nbsp;&nbsp;&nbsp;      \r\n                        \"8\":{\"n\":\"Lewisham Central\",\"id\":8,\"q\":3,\"r\":0,\"colour\":\"#f66\",\"threat:\"Tory\"}<br\/>\r\n                    }\r\n                }\r\n            });\r\n        });\r\n&LT;\/script><br\/>\r\n&LT;div id=\"hexmap1\">&LT;\/div><br\/>\r\n<\/span><\/div><\/p>\n<p>I had to poke around the ODI pages to find the ODI.ready(function(){ rune, which I found inside <a href=\"view-source:https:\/\/odileeds.github.io\/odi.hexmap.js\/\">the ODI javascript<\/a>. They talk about a format function which I can&#8217;t quite get to work. Format is used if varying the SVG file, it uses <code>tspan<\/code> entity. I would like to offer a popup box rather than use this tool.<\/p>\n<h3>Related Posts<\/h3>\n<ol>\n<li><a href=\"https:\/\/davelevy.info\/wiki\/analysing-the-2015-general-election\/\">Analysing the 2015 general election<\/a><\/li>\n<li><a href=\"https:\/\/davelevy.info\/wiki\/visualising-electoral-data\/\">Visualising electoral data<\/a><\/li>\n<\/ol>\n<p>The latter <a href=\"https:\/\/davelevy.info\/wiki\/visualising-electoral-data\/\">link<\/a> has the following links,<\/p>\n<ol>\n<li><a href=\"https:\/\/odileeds.org\/blog\/2017-05-08-mapping-election-with-hexes\">Election hex mapping<\/a>, at ODI Leeds.<\/li>\n<li><a href=\"https:\/\/odileeds.org\/blog\/2017-06-09-election-hex-map\">2017 General Election hex map<\/a>, at ODI Leeds.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Obviously with the results of the general election announced my mind turns to analysis and visualisation. I had\/have been looking at this for a while, and here are my notes. Actually this is an index entry as much of what I had found is catalogued in the two related posts below\/overleaf. &#8230;<\/p>\n","protected":false},"author":1,"featured_media":4374,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_share_on_mastodon":"0"},"categories":[140],"tags":[1105,1067,1705,141,527],"class_list":["post-4680","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-politics","tag-democracy","tag-elections","tag-hexmap","tag-politics-2","tag-visualisation"],"share_on_mastodon":{"url":"","error":""},"jetpack_featured_media_url":"https:\/\/davelevy.info\/wiki\/wp-content\/uploads\/2019\/05\/constituecy-hexmap.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/4680","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/comments?post=4680"}],"version-history":[{"count":2,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/4680\/revisions"}],"predecessor-version":[{"id":6145,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/4680\/revisions\/6145"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/media\/4374"}],"wp:attachment":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/media?parent=4680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/categories?post=4680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/tags?post=4680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}