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",[176],"2fe614ce-ed81-11f0-8651-42dde27851f2","favicon.svg","019ba3d1-3692-777d-9915-48d11ed2e0dd",["D",1767979955823],"",[184],"2fe5f156-ed81-11f0-8651-42dde27851f2","README.md","019ba3d1-3692-777d-9915-47f413b36b24",["D",1767979955823],"# Welcome to Val Town\n\nVal Town is the simplest way to get code running in the cloud.\n\nThis is a basic HTML starter template.\n\n1. Click `Remix` on this val to get a copy of it\n2. Click `main.tsx` to view the website\n3. Saves to any file will instantly deploy\n\n### ← main.tsx\n\nThis HTTP server hosts all of the other files in this val.\n\nTo view your site in a new tab, click on the `...` menu of `main.tsx` to copy\nyour live HTTP endpoint.\n\n### ← README.md\n\nThat's this file, where you can tell people what your cool website does and how\nyou built it.\n\n### ← index.html\n\nWhere you'll write the content of your website.\n\n### ← style.css\n\nCSS files add styling rules to your content.\n\n### ← script.js\n\nIf you're feeling fancy you can add interactivity to your site with JavaScript.\n\nIf you want more interactivity, check out this\n[React starter](https://www.val.town/x/std/reactHonoStarter).\n\n### ← favicon.svg\n\nThe icon that shows up in the brower tab. Tip: AIs are pretty good at writing\nSVG favicons.\n\n---\n\nThis template was inspired by https://glitch.new/blank.",[190],"2fe5e6ca-ed81-11f0-8651-42dde27851f2","scripts","019ba3d1-3692-777d-9915-403dec48afd7",["D",1767979955823],"directory",[196],"b828c912-ed81-11f0-8439-42dde27851f2","images","b693b878-ed81-11f0-8276-42dde27851f2",5,["D",1767980184425],[202],"b439d846-ed81-11f0-b5c9-42dde27851f2","data","b2d5764a-ed81-11f0-a274-42dde27851f2",["D",1767980177865],[208],"pulls","branches","forks","envVars",{"_219":63,"_221":63},"connections",{"_219":63,"_220":63},"count","unfilledCount","emptyCount",{"_44":207,"_32":208,"_30":209,"_153":-5,"_42":43,"_41":92,"_155":59,"_39":262,"_13":157,"_34":199,"_36":-5,"_24":25,"_159":-5,"_233":263,"_27":264},{"_44":201,"_32":202,"_30":203,"_153":-5,"_42":43,"_41":204,"_155":59,"_39":259,"_13":157,"_34":199,"_36":-5,"_24":25,"_159":-5,"_233":260,"_27":261},{"_44":195,"_32":196,"_30":197,"_153":-5,"_42":43,"_41":157,"_155":59,"_39":256,"_13":63,"_34":199,"_36":-5,"_24":25,"_159":-5,"_233":257,"_27":258},{"_44":251,"_32":33,"_30":31,"_153":197,"_42":43,"_41":14,"_155":25,"_39":252,"_13":253,"_34":35,"_36":38,"_24":25,"_159":-5,"_233":254,"_27":255},{"_44":189,"_32":190,"_30":191,"_153":-5,"_42":43,"_41":157,"_155":59,"_39":248,"_13":63,"_34":20,"_36":193,"_24":25,"_159":-5,"_233":249,"_27":250},{"_44":183,"_32":184,"_30":185,"_153":-5,"_42":43,"_41":157,"_155":59,"_39":245,"_13":63,"_34":20,"_36":187,"_24":25,"_159":-5,"_233":246,"_27":247},{"_44":175,"_32":176,"_30":177,"_153":-5,"_42":43,"_41":178,"_155":25,"_39":242,"_13":180,"_34":20,"_36":181,"_24":25,"_159":-5,"_233":243,"_27":244},{"_44":167,"_32":168,"_30":169,"_153":-5,"_42":43,"_41":170,"_155":25,"_39":239,"_13":172,"_34":35,"_36":173,"_24":25,"_159":-5,"_233":240,"_27":241},{"_44":161,"_32":162,"_30":57,"_153":-5,"_42":43,"_41":157,"_155":59,"_39":236,"_13":63,"_34":164,"_36":165,"_24":25,"_159":-5,"_233":237,"_27":238},{"_44":150,"_32":151,"_30":152,"_153":-5,"_42":43,"_41":154,"_155":59,"_39":232,"_13":157,"_34":20,"_36":158,"_24":25,"_159":-5,"_233":234,"_27":235},["D",1767982896978],"children",[],[151],["D",1767979955823],[],[162],["D",1767987153104],[],[168],["D",1767986714219],[],[176],["D",1767979955823],[],[184],["D",1767979955823],[],[190],"90fb1654-ed92-11f0-8796-42dde27851f2",["D",1767987420177],6,[],[196,33],["D",1767979955823],[225],[196],["D",1767980184425],[],[202],["D",1767980177865],[],[208],["D",1767979955823],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":55,"_104":105,"_106":25},{"_13":86,"_32":87,"_44":43,"_88":45,"_89":90,"_91":92,"_93":51,"_94":95,"_96":65,"_97":46,"_98":99},"ctx",{"_79":-5,"_129":302,"_303":304,"_305":306,"_307":25,"_308":25,"_309":25,"_310":59,"_311":-5,"_312":-7,"_313":-7,"_314":63,"_315":25,"_316":25,"_317":-5,"_318":25,"_319":25,"_320":25,"_321":-5},"ENV",{"_273":274,"_275":276,"_277":87,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

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

Diff · v32