Visualizing London's Brexit vote

UCL dataviz 2026

\n This is a visualization of Brexit voting patterns for the London\n boroughs by various demographic groups included in the survey.\n

\n Interesting correlations were found for age, immigrant status,\n educational attainment and geographic location.\n

\n\n

Flexbox foursome

\n Below you'll see a div of 'container' class (flex display with direction\n column) containing two divs of 'row' class (flex display with direction\n row).
\n The rows each contain two divs of class chart-container with equal 'flex' value (same width).\n Three of the boxes contain charts, the fourth notes in a div of class\n 'sidebar'. Use the 'styles/index.css' CSS file to add class (.) flex rules that achieve the desired 2x2 grid shown in the lecture 3 notebook.\n

\n \n $\"brexit$ \n

\n \n $\"brexit$ \n\n \n

\n \n

\n\n

Remain vs Leave votes for the London Boroughs

\n Comparing remain vs leave voting percentages for the London boroughs\n shows a very different voting patterns, from the very strong leave\n majority of Barking and Dagenham to an even stronger remain vote in\n boroughs such as Lambeth and Islington.\n

\n\n

\n \n

\n\n

Mapping Brexit London

\n This map shows the Remain voting percentages for the central London\n boroughs. Note the rough correlation between distance from the center of\n London and tendency to vote Leave.\n\n \n

\n \n \n \n

\n \n

\n \n \n \n \n \n \n",[],[218],{"_103":227,"_96":228,"_158":229,"_160":-5,"_161":140,"_162":230,"_163":117,"_105":231,"_100":232,"_166":194,"_168":233,"_169":22,"_170":-5,"_171":234,"_99":235},"f1cae2bc-ed91-11f0-8b53-42dde27851f2","index.js","019ba3d1-3692-777d-9915-540f761b6f08",31,["D",1767987153104],4,"/* If you're feeling fancy you can add interactivity\n to your site with Javascript.\n Note: TypeScript won't work in this file. */\n\n// prints \"hi\" in the browser's dev tools console\nconsole.log(\"hi\");\n\nPlotly.newPlot(\"brexit-map\", brexitMap.data, brexitMap.layout)\n .then(() => console.log(\"Plot created successfully\"))\n .catch(err => console.error(\"newPlot error:\", err));",[],[228],{"_103":237,"_96":238,"_158":115,"_160":-5,"_161":140,"_162":165,"_163":117,"_105":239,"_100":32,"_166":240,"_168":241,"_169":22,"_170":-5,"_171":242,"_99":243},"2fe62522-ed81-11f0-8651-42dde27851f2","main.tsx",["D",1767979955823],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer();",[],[238],{"_103":245,"_96":246,"_158":247,"_160":-5,"_161":140,"_162":248,"_163":117,"_105":249,"_100":165,"_166":204,"_168":250,"_169":22,"_170":-5,"_171":251,"_99":252},"08f2d68e-ed88-11f0-bd1c-42dde27851f2","style.css","019ba3d1-3692-777d-9915-58a465a15a25",13,["D",1767982896978],".html,\nbody {\n height: 100%;\n font-family: Georgia, serif;\n /* font-family: sans-serif; */\n /* min-height: 800px; */\n background: #fff1e5;\n font-size: 1.4em;\n}\n\nh1.title {\n font-size: 2.1em;\n}\n\nh2, h3 {\n font-family: sans-serif;\n}\n\ndiv {\n /* border: 1px dotted red; */\n}\n\n.main {\n padding: 10px;\n min-width: 800px;\n max-width: 1200px;\n min-height: 100%;\n /* height: 100%; */\n padding-bottom: 100px;\n margin: 0 auto;\n}\n\n.container {\n display: flex;\n flex-direction: column;\n gap: 20px;\n/* align-items: stretch; */\n /* height: 100%; */\n/* min-height: 800px; */\n}\n\n.container .row {\n display: flex;\n flex-direction: row;\n gap: 20px;\n}\n\n.chart-container {\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: stretch;\n/* width: 100%; */\n/* min-height: 400px; */\n /* height: 100%; */\n}\n\n.svg-container svg:first-of-type {\n background: #fff1e5 !important;\n}\n\n.chart {\n flex: 1;\n}\n\n.chart-container img {\n width: 100%;\n}\n\n.sidebar {\n font-family: sans-serif;\n font-size: 0.8em;\n flex: 1;\n/* padding: 20px; */\n background: #ffebd9;\n}\n\n.sidebar div {\n padding: 20px;\n}\n\n.sidebar h3 {\n margin: 0;\n}\n\n.sidebar p {\n margin: 0.5em 0;\n}\n\n#chart2 {\n /* flex: 2; */\n}\n\n.map-container {\n margin: 2em auto;\n display: flex;\n/* align-items: center; */\n}",[],[246],"files",[155,174,182,188,199,208,216,226,236,244],"counts",{"_257":32,"_258":165,"_259":32,"_260":261},"pulls","branches","forks","envVars",{"_262":32,"_263":32},"count","emptyCount","contents",[266,269,272,275,278,281,284,287,290],{"_103":156,"_96":157,"_158":159,"_160":-5,"_161":140,"_162":145,"_163":117,"_105":267,"_100":165,"_166":167,"_168":-5,"_169":22,"_170":-5,"_99":268},["D",1767980177865],[157],{"_103":175,"_96":176,"_158":177,"_160":-5,"_161":140,"_162":178,"_163":117,"_105":270,"_100":165,"_166":167,"_168":-5,"_169":22,"_170":-5,"_99":271},["D",1767980184425],[176],{"_103":183,"_96":184,"_158":185,"_160":-5,"_161":140,"_162":165,"_163":117,"_105":273,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_99":274},["D",1767979955823],[184],{"_103":200,"_96":201,"_158":202,"_160":-5,"_161":140,"_162":165,"_163":117,"_105":276,"_100":32,"_166":204,"_168":205,"_169":22,"_170":-5,"_99":277},["D",1767979955823],[201],{"_103":209,"_96":210,"_158":211,"_160":-5,"_161":140,"_162":165,"_163":117,"_105":279,"_100":32,"_166":204,"_168":213,"_169":22,"_170":-5,"_99":280},["D",1767979955823],[210],{"_103":217,"_96":218,"_158":219,"_160":-5,"_161":140,"_162":220,"_163":117,"_105":282,"_100":222,"_166":204,"_168":223,"_169":22,"_170":-5,"_99":283},["D",1767986714219],[218],{"_103":227,"_96":228,"_158":229,"_160":-5,"_161":140,"_162":230,"_163":117,"_105":285,"_100":232,"_166":194,"_168":233,"_169":22,"_170":-5,"_99":286},["D",1767987153104],[228],{"_103":237,"_96":238,"_158":115,"_160":-5,"_161":140,"_162":165,"_163":117,"_105":288,"_100":32,"_166":240,"_168":241,"_169":22,"_170":-5,"_99":289},["D",1767979955823],[238],{"_103":245,"_96":246,"_158":247,"_160":-5,"_161":140,"_162":248,"_163":117,"_105":291,"_100":165,"_166":204,"_168":250,"_169":22,"_170":-5,"_99":292},["D",1767982896978],[246],"upstreamProject",{"_103":148,"_96":295,"_111":-5,"_112":-5,"_109":110,"_23":296},"basic-html-starter",{"_94":95,"_132":133},"upstreamBranch",{"_103":143,"_105":299,"_300":301,"_96":44,"_141":148,"_100":145,"_142":302,"_144":303,"_304":305,"_107":-5,"_152":22,"_109":110,"_151":95,"_16":121,"_150":295},["D",1761662448837],"updatedAt",["D",1761662492233],"7a3b261a-4186-11f0-ae9b-76b3cceeab13",70,"lockfileKey","1761968475022-esm.town_v_kyrand_basic-html-starter@3-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_94":95,"_96":97,"_101":312,"_260":317,"_318":22},{"_103":104,"_96":97,"_105":313,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":-5,"_119":-5,"_120":32,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":314,"_134":315,"_137":316,"_152":22},["D",1767979955823],{"_94":95,"_132":133},{"_94":95,"_136":133,"_14":113},{"_100":139,"_96":44,"_103":140,"_141":104,"_142":143,"_144":145,"_146":110,"_147":148,"_149":121,"_150":97,"_151":95},[],"isTeamOrg","actionData","errors"]

Visualizing London's Brexit vote

UCL dataviz 2026

Flexbox foursome

Notes

Remain vs Leave votes for the London Boroughs

Notes

Mapping Brexit London

Notes

Notes

kyrand

UCL-dataviz-from-notebook-to-the-web

Environment variables