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\n 'flex' value (same width). Three of the boxes contain charts, the fourth\n notes in a div of class 'sidebar'. Use the 'styles/index.css' CSS file\n to add class (.) flex rules that achieve the desired 2x2 grid shown in\n the lecture 3 notebook.\n

\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 \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 \n \n \n",13,["D",1768240705303],"branchVersion","label",[18],"pulls","branches","forks","envVars",{"_282":26,"_284":26},"connections",{"_282":26,"_283":26},"count","unfilledCount","emptyCount",{"_45":370,"_13":371,"_78":372,"_55":-5,"_47":48,"_272":76,"_299":198,"_49":373,"_51":52,"_80":361,"_268":-5,"_81":24,"_273":-5,"_302":374,"_17":375},{"_45":364,"_13":365,"_78":366,"_55":-5,"_47":48,"_272":317,"_299":198,"_49":367,"_51":52,"_80":361,"_268":-5,"_81":24,"_273":-5,"_302":368,"_17":369},{"_45":359,"_13":349,"_78":342,"_55":-5,"_47":48,"_272":52,"_299":198,"_49":360,"_51":26,"_80":361,"_268":-5,"_81":24,"_273":-5,"_302":362,"_17":363},{"_45":350,"_13":351,"_78":352,"_55":342,"_47":48,"_272":353,"_299":198,"_49":354,"_51":355,"_80":318,"_268":356,"_81":24,"_273":-5,"_302":357,"_17":358},{"_45":339,"_13":340,"_78":341,"_55":342,"_47":48,"_272":343,"_299":198,"_49":344,"_51":345,"_80":318,"_268":346,"_81":24,"_273":-5,"_302":347,"_17":348},{"_45":332,"_13":333,"_78":334,"_55":-5,"_47":48,"_272":52,"_299":198,"_49":335,"_51":26,"_80":21,"_268":336,"_81":24,"_273":-5,"_302":337,"_17":338},{"_45":325,"_13":326,"_78":327,"_55":-5,"_47":48,"_272":52,"_299":198,"_49":328,"_51":26,"_80":21,"_268":329,"_81":24,"_273":-5,"_302":330,"_17":331},{"_45":267,"_13":18,"_78":79,"_55":-5,"_47":48,"_272":180,"_299":198,"_49":322,"_51":270,"_80":21,"_268":269,"_81":24,"_273":-5,"_302":323,"_17":324},{"_45":312,"_13":313,"_78":314,"_55":-5,"_47":48,"_272":315,"_299":198,"_49":316,"_51":317,"_80":318,"_268":319,"_81":24,"_273":-5,"_302":320,"_17":321},{"_45":305,"_13":306,"_78":196,"_55":-5,"_47":48,"_272":52,"_299":198,"_49":307,"_51":26,"_80":308,"_268":309,"_81":24,"_273":-5,"_302":310,"_17":311},{"_45":296,"_13":297,"_78":298,"_55":-5,"_47":48,"_272":270,"_299":198,"_49":300,"_51":52,"_80":21,"_268":301,"_81":24,"_273":-5,"_302":303,"_17":304},"08f2d68e-ed88-11f0-bd1c-42dde27851f2","style.css","019ba3d1-3692-777d-9915-58a465a15a25","latest",["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}","children",[],[297],"2fe62522-ed81-11f0-8651-42dde27851f2","main.tsx",["D",1767979955823],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer();",[],[306],"27186ef8-efe0-11f0-8c4d-42dde27851f2","index.js","019ba3d1-3692-777d-9915-540f761b6f08",38,["D",1768240645599],5,"script","/* 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));\n\n// We can use the brexitChartData object to reconstruct the plot in the HTML pane. We use the div id 'brexit-chart' to select where to put our chart.\nPlotly.newPlot(\n \"brexit-borough-barchart\",\n brexitChartData.data,\n brexitChartData.layout,\n);",[],[313],["D",1768240705303],[],[18],"2fe614ce-ed81-11f0-8651-42dde27851f2","favicon.svg","019ba3d1-3692-777d-9915-48d11ed2e0dd",["D",1767979955823],"",[],[326],"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.",[],[333],"659e6122-ed93-11f0-8aab-42dde27851f2","brexit_map.js","723e6464-ed8d-11f0-b962-42dde27851f2","019ba3d1-3692-777d-9915-403dec48afd7",33,["D",1767987776926],7,"var brexitMapJSON = '{\"data\":[{\"customdata\":[[24.71,\"City of London\"],[62.44,\"Barking and Dagenham\"],[37.77,\"Barnet\"],[62.95,\"Bexley\"],[40.26,\"Brent\"],[49.35,\"Bromley\"],[25.06,\"Camden\"],[45.71,\"Croydon\"],[39.6,\"Ealing\"],[44.18,\"Enfield\"],[44.41,\"Greenwich\"],[21.52,\"Hackney\"],[29.98,\"Hammersmith and Fulham\"],[24.43,\"Haringey\"],[45.37,\"Harrow\"],[69.66,\"Havering\"],[56.37,\"Hillingdon\"],[48.94,\"Hounslow\"],[24.78,\"Islington\"],[31.31,\"Kensington and Chelsea\"],[38.39,\"Kingston upon Thames\"],[21.38,\"Lambeth\"],[30.14,\"Lewisham\"],[37.06,\"Merton\"],[47.16,\"Newham\"],[46.03,\"Redbridge\"],[30.71,\"Richmond upon Thames\"],[27.19,\"Southwark\"],[53.72,\"Sutton\"],[32.54,\"Tower Hamlets\"],[40.9,\"Waltham Forest\"],[24.97,\"Wandsworth\"],[31.03,\"Westminster\"]],\"hovertemplate\":\"size=%{marker.size}\\\\u003cbr\\\\u003elat=%{lat}\\\\u003cbr\\\\u003elon=%{lon}\\\\u003cbr\\\\u003ePct_Leave=%{customdata[0]}\\\\u003cbr\\\\u003eArea=%{customdata[1]}\\\\u003cextra\\\\u003e\\\\u003c\\\\u002fextra\\\\u003e\",\"lat\":{\"dtype\":\"f8\",\"bdata\":\"j17Dwv\\\\u002fBSUDCUyNP7cZJQB2s\\\\u002f3OY00lA+2iC8oi4SUB0tRX7y8ZJQNXW4xmPs0lA2VB7W3rFSUAaLEHrhq9JQH\\\\u002fPWbCewUlAvVpJhnfTSUBKtOTxtL1JQK5vFuWIxUlA8xB8wsi\\\\u002fSUBhEP1\\\\u002fQctJQLVOAdVkzElApurDH2rHSUBzeb1FccVJQKk8cIT7u0lAKN1MO+vESUAUkQZcfMBJQGgFhqxutElA347LE2O\\\\u002fSUCUW0nhMLtJQMpUHGKXtElA6+7wjdfDSUCtQhTdxMlJQDjUlAlkuElAWEgKdo27SUDHHSVlwa1JQESLbOf7wUlACJPi45PMSUBf8S\\\\u002fdf7pJQMn9s4sOwElA\"},\"legendgroup\":\"\",\"lon\":{\"dtype\":\"f8\",\"bdata\":\"8Z\\\\u002fJWTONt78ikcGIwEPDP70ep0MCocm\\\\u002fmWA41zBDwz8bnl4pyxDTvwCYIUToVo4\\\\u002fC\\\\u002fKTqCfMxL9aKJmc2hm6vwBbuXJRiNO\\\\u002fklfnGJC9tL+V7H1PUZpyvyXiUjr9Ram\\\\u002fTFYEwRwrzb8GBFmg9P26v65ixhtmltW\\\\u002fFH4nsd35zz9kI8r+hLHcv8VIQJZPINe\\\\u002fwh80cWGTub9+Lx1td7PJvyZG4FnMmdO\\\\u002f2fhdIijIvb8IJu38kdiEv5pBAb6QE8i\\\\u002fIQOw+zIDnj\\\\u002fAo9ew8D+nP7Rn+FJdsNO\\\\u002fT5tohDSrsb9Ckt31ZznGv2AHzhlR2qu\\\\u002fiJO0kR0qkr+JEA1BxLzIv4k5Usd0MsC\\\\u002f\"},\"marker\":{\"color\":\"green\",\"size\":{\"dtype\":\"f8\",\"bdata\":\"ibSh+7FvRkCBXoY1KtVRQLxzhqclvUtA7y3gTsXnUUCeM53ye6NMQNqzB5YOtU9AjkyC3TqYRkBcE2aY+INOQA+yLUckZ0xAOCbmHB4ATkDFCuM6FRROQH51TeQj8ERAcclFSpu2SEBPsBJzD09GQLlB5QTdZk5A68CkS+LVUkAG49hqmPFQQPG9krREk09AJdmvNdN3RkBEiD\\\\u002fJakFJQEhiJ2ox90tAb0pyJa3eREAHqUJid8dIQO450jgWektActi5iOj+TkBZpKKRRJ9OQMAYuxwrA0lAhwdBHwmJR0AnnKw\\\\u002faYpQQLoAXnswv0lAcKSJCofdTECkeWZ71Y1GQI6QT1FxJElA\"},\"sizemode\":\"area\",\"sizeref\":0.18835484245036166},\"mode\":\"markers\",\"name\":\"\",\"showlegend\":false,\"subplot\":\"map\",\"type\":\"scattermap\"}],\"layout\":{\"template\":{\"data\":{\"histogram2dcontour\":[{\"type\":\"histogram2dcontour\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"choropleth\":[{\"type\":\"choropleth\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}],\"histogram2d\":[{\"type\":\"histogram2d\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"heatmap\":[{\"type\":\"heatmap\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"contourcarpet\":[{\"type\":\"contourcarpet\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}],\"contour\":[{\"type\":\"contour\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"surface\":[{\"type\":\"surface\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"mesh3d\":[{\"type\":\"mesh3d\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}],\"scatter\":[{\"fillpattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2},\"type\":\"scatter\"}],\"parcoords\":[{\"type\":\"parcoords\",\"line\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scatterpolargl\":[{\"type\":\"scatterpolargl\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"bar\":[{\"error_x\":{\"color\":\"#2a3f5f\"},\"error_y\":{\"color\":\"#2a3f5f\"},\"marker\":{\"line\":{\"color\":\"#E5ECF6\",\"width\":0.5},\"pattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2}},\"type\":\"bar\"}],\"scattergeo\":[{\"type\":\"scattergeo\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scatterpolar\":[{\"type\":\"scatterpolar\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"histogram\":[{\"marker\":{\"pattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2}},\"type\":\"histogram\"}],\"scattergl\":[{\"type\":\"scattergl\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scatter3d\":[{\"type\":\"scatter3d\",\"line\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scattermap\":[{\"type\":\"scattermap\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scattermapbox\":[{\"type\":\"scattermapbox\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scatterternary\":[{\"type\":\"scatterternary\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scattercarpet\":[{\"type\":\"scattercarpet\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"carpet\":[{\"aaxis\":{\"endlinecolor\":\"#2a3f5f\",\"gridcolor\":\"white\",\"linecolor\":\"white\",\"minorgridcolor\":\"white\",\"startlinecolor\":\"#2a3f5f\"},\"baxis\":{\"endlinecolor\":\"#2a3f5f\",\"gridcolor\":\"white\",\"linecolor\":\"white\",\"minorgridcolor\":\"white\",\"startlinecolor\":\"#2a3f5f\"},\"type\":\"carpet\"}],\"table\":[{\"cells\":{\"fill\":{\"color\":\"#EBF0F8\"},\"line\":{\"color\":\"white\"}},\"header\":{\"fill\":{\"color\":\"#C8D4E3\"},\"line\":{\"color\":\"white\"}},\"type\":\"table\"}],\"barpolar\":[{\"marker\":{\"line\":{\"color\":\"#E5ECF6\",\"width\":0.5},\"pattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2}},\"type\":\"barpolar\"}],\"pie\":[{\"automargin\":true,\"type\":\"pie\"}]},\"layout\":{\"autotypenumbers\":\"strict\",\"colorway\":[\"#636efa\",\"#EF553B\",\"#00cc96\",\"#ab63fa\",\"#FFA15A\",\"#19d3f3\",\"#FF6692\",\"#B6E880\",\"#FF97FF\",\"#FECB52\"],\"font\":{\"color\":\"#2a3f5f\"},\"hovermode\":\"closest\",\"hoverlabel\":{\"align\":\"left\"},\"paper_bgcolor\":\"white\",\"plot_bgcolor\":\"#E5ECF6\",\"polar\":{\"bgcolor\":\"#E5ECF6\",\"angularaxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"},\"radialaxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"}},\"ternary\":{\"bgcolor\":\"#E5ECF6\",\"aaxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"},\"baxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"},\"caxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"}},\"coloraxis\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"colorscale\":{\"sequential\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"sequentialminus\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"diverging\":[[0,\"#8e0152\"],[0.1,\"#c51b7d\"],[0.2,\"#de77ae\"],[0.3,\"#f1b6da\"],[0.4,\"#fde0ef\"],[0.5,\"#f7f7f7\"],[0.6,\"#e6f5d0\"],[0.7,\"#b8e186\"],[0.8,\"#7fbc41\"],[0.9,\"#4d9221\"],[1,\"#276419\"]]},\"xaxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\",\"title\":{\"standoff\":15},\"zerolinecolor\":\"white\",\"automargin\":true,\"zerolinewidth\":2},\"yaxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\",\"title\":{\"standoff\":15},\"zerolinecolor\":\"white\",\"automargin\":true,\"zerolinewidth\":2},\"scene\":{\"xaxis\":{\"backgroundcolor\":\"#E5ECF6\",\"gridcolor\":\"white\",\"linecolor\":\"white\",\"showbackground\":true,\"ticks\":\"\",\"zerolinecolor\":\"white\",\"gridwidth\":2},\"yaxis\":{\"backgroundcolor\":\"#E5ECF6\",\"gridcolor\":\"white\",\"linecolor\":\"white\",\"showbackground\":true,\"ticks\":\"\",\"zerolinecolor\":\"white\",\"gridwidth\":2},\"zaxis\":{\"backgroundcolor\":\"#E5ECF6\",\"gridcolor\":\"white\",\"linecolor\":\"white\",\"showbackground\":true,\"ticks\":\"\",\"zerolinecolor\":\"white\",\"gridwidth\":2}},\"shapedefaults\":{\"line\":{\"color\":\"#2a3f5f\"}},\"annotationdefaults\":{\"arrowcolor\":\"#2a3f5f\",\"arrowhead\":0,\"arrowwidth\":1},\"geo\":{\"bgcolor\":\"white\",\"landcolor\":\"#E5ECF6\",\"subunitcolor\":\"white\",\"showland\":true,\"showlakes\":true,\"lakecolor\":\"white\"},\"title\":{\"x\":0.05},\"mapbox\":{\"style\":\"light\"}}},\"map\":{\"domain\":{\"x\":[0.0,1.0],\"y\":[0.0,1.0]},\"center\":{\"lon\":-0.12116465783030304,\"lat\":51.507209554545454},\"zoom\":9,\"style\":\"open-street-map\"},\"legend\":{\"tracegroupgap\":0,\"itemsizing\":\"constant\"},\"margin\":{\"t\":0,\"r\":0,\"l\":0,\"b\":0},\"height\":400,\"width\":800,\"mapbox\":{\"center\":{\"lon\":-0.12116465783030304,\"lat\":51.507209554545454},\"zoom\":9}}}'\nvar brexitMap = JSON.parse(brexitMapJSON)",[],[349,340],"scripts","21e702b4-efe0-11f0-b1bc-42dde27851f2","brexit_borough_barchart.js","05600394-efdf-11f0-b33d-42dde27851f2",37,["D",1768240636887],2,"// First we paste the chart data taken from our notebook using the fig.to_json() command into this pane, making sure that it is wrapped in '' quotes. So paste it into a JSON.parse('') method to convert the JSON to a JavaScript object (brexitChartData).\nvar brexitChartData = JSON.parse(\n '{\"data\":[{\"name\":\"Remain\",\"orientation\":\"h\",\"x\":{\"dtype\":\"i4\",\"bdata\":\"qNIAAL\\u002fOAQCc+gAAMx0BAKfAAABVcAEAhCYBAF0OAQAg2AAAG\\u002fYAAKtTAQDgswEANc0AAOGSAACEKgEAg+UAALjiAADZpAAAKvoAAHc4AQB82wAAxkUBAOD+AACJKgEAqF8BAPFqAQDwDAAAfxYBAO5oAQBLGwEA87kAAHKHAQBmbAAA\"},\"y\":[\"Westminster\",\"Wandsworth\",\"Waltham Forest\",\"Tower Hamlets\",\"Sutton\",\"Southwark\",\"Richmond upon Thames\",\"Redbridge\",\"Newham\",\"Merton\",\"Lewisham\",\"Lambeth\",\"Kingston upon Thames\",\"Kensington and Chelsea\",\"Islington\",\"Hounslow\",\"Hillingdon\",\"Havering\",\"Harrow\",\"Haringey\",\"Hammersmith and Fulham\",\"Hackney\",\"Greenwich\",\"Enfield\",\"Ealing\",\"Croydon\",\"City of London\",\"Camden\",\"Bromley\",\"Brent\",\"Bexley\",\"Barnet\",\"Barking and Dagenham\"],\"type\":\"bar\"},{\"name\":\"Leave\",\"orientation\":\"h\",\"x\":{\"dtype\":\"i4\",\"bdata\":\"zF4AAP2ZAABrrQAAmIkAAJnfAACJiQAAgoIAAIzmAADbwAAA6ZAAAI6SAACEdgAA4X8AAPJCAABcYgAAAdwAAOYkAQB1egEAv88AAP9kAAD2XQAAVFkAAJXLAABB7AAAieYAAI0xAQA\\u002fBAAAHl0AALJfAQDxvgAA9jsBAJftAAAytAAA\"},\"y\":[\"Westminster\",\"Wandsworth\",\"Waltham Forest\",\"Tower Hamlets\",\"Sutton\",\"Southwark\",\"Richmond upon Thames\",\"Redbridge\",\"Newham\",\"Merton\",\"Lewisham\",\"Lambeth\",\"Kingston upon Thames\",\"Kensington and Chelsea\",\"Islington\",\"Hounslow\",\"Hillingdon\",\"Havering\",\"Harrow\",\"Haringey\",\"Hammersmith and Fulham\",\"Hackney\",\"Greenwich\",\"Enfield\",\"Ealing\",\"Croydon\",\"City of London\",\"Camden\",\"Bromley\",\"Brent\",\"Bexley\",\"Barnet\",\"Barking and Dagenham\"],\"type\":\"bar\"}],\"layout\":{\"barmode\":\"group\",\"height\":800,\"margin\":{\"l\":150},\"width\":600,\"template\":{\"data\":{\"histogram2dcontour\":[{\"type\":\"histogram2dcontour\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"choropleth\":[{\"type\":\"choropleth\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}],\"histogram2d\":[{\"type\":\"histogram2d\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"heatmap\":[{\"type\":\"heatmap\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"contourcarpet\":[{\"type\":\"contourcarpet\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}],\"contour\":[{\"type\":\"contour\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"surface\":[{\"type\":\"surface\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]}],\"mesh3d\":[{\"type\":\"mesh3d\",\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}],\"scatter\":[{\"fillpattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2},\"type\":\"scatter\"}],\"parcoords\":[{\"type\":\"parcoords\",\"line\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scatterpolargl\":[{\"type\":\"scatterpolargl\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"bar\":[{\"error_x\":{\"color\":\"#2a3f5f\"},\"error_y\":{\"color\":\"#2a3f5f\"},\"marker\":{\"line\":{\"color\":\"#E5ECF6\",\"width\":0.5},\"pattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2}},\"type\":\"bar\"}],\"scattergeo\":[{\"type\":\"scattergeo\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scatterpolar\":[{\"type\":\"scatterpolar\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"histogram\":[{\"marker\":{\"pattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2}},\"type\":\"histogram\"}],\"scattergl\":[{\"type\":\"scattergl\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scatter3d\":[{\"type\":\"scatter3d\",\"line\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scattermap\":[{\"type\":\"scattermap\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scattermapbox\":[{\"type\":\"scattermapbox\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scatterternary\":[{\"type\":\"scatterternary\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"scattercarpet\":[{\"type\":\"scattercarpet\",\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}}}],\"carpet\":[{\"aaxis\":{\"endlinecolor\":\"#2a3f5f\",\"gridcolor\":\"white\",\"linecolor\":\"white\",\"minorgridcolor\":\"white\",\"startlinecolor\":\"#2a3f5f\"},\"baxis\":{\"endlinecolor\":\"#2a3f5f\",\"gridcolor\":\"white\",\"linecolor\":\"white\",\"minorgridcolor\":\"white\",\"startlinecolor\":\"#2a3f5f\"},\"type\":\"carpet\"}],\"table\":[{\"cells\":{\"fill\":{\"color\":\"#EBF0F8\"},\"line\":{\"color\":\"white\"}},\"header\":{\"fill\":{\"color\":\"#C8D4E3\"},\"line\":{\"color\":\"white\"}},\"type\":\"table\"}],\"barpolar\":[{\"marker\":{\"line\":{\"color\":\"#E5ECF6\",\"width\":0.5},\"pattern\":{\"fillmode\":\"overlay\",\"size\":10,\"solidity\":0.2}},\"type\":\"barpolar\"}],\"pie\":[{\"automargin\":true,\"type\":\"pie\"}]},\"layout\":{\"autotypenumbers\":\"strict\",\"colorway\":[\"#636efa\",\"#EF553B\",\"#00cc96\",\"#ab63fa\",\"#FFA15A\",\"#19d3f3\",\"#FF6692\",\"#B6E880\",\"#FF97FF\",\"#FECB52\"],\"font\":{\"color\":\"#2a3f5f\"},\"hovermode\":\"closest\",\"hoverlabel\":{\"align\":\"left\"},\"paper_bgcolor\":\"white\",\"plot_bgcolor\":\"#E5ECF6\",\"polar\":{\"bgcolor\":\"#E5ECF6\",\"angularaxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"},\"radialaxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"}},\"ternary\":{\"bgcolor\":\"#E5ECF6\",\"aaxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"},\"baxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"},\"caxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"}},\"coloraxis\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"colorscale\":{\"sequential\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"sequentialminus\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"diverging\":[[0,\"#8e0152\"],[0.1,\"#c51b7d\"],[0.2,\"#de77ae\"],[0.3,\"#f1b6da\"],[0.4,\"#fde0ef\"],[0.5,\"#f7f7f7\"],[0.6,\"#e6f5d0\"],[0.7,\"#b8e186\"],[0.8,\"#7fbc41\"],[0.9,\"#4d9221\"],[1,\"#276419\"]]},\"xaxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\",\"title\":{\"standoff\":15},\"zerolinecolor\":\"white\",\"automargin\":true,\"zerolinewidth\":2},\"yaxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\",\"title\":{\"standoff\":15},\"zerolinecolor\":\"white\",\"automargin\":true,\"zerolinewidth\":2},\"scene\":{\"xaxis\":{\"backgroundcolor\":\"#E5ECF6\",\"gridcolor\":\"white\",\"linecolor\":\"white\",\"showbackground\":true,\"ticks\":\"\",\"zerolinecolor\":\"white\",\"gridwidth\":2},\"yaxis\":{\"backgroundcolor\":\"#E5ECF6\",\"gridcolor\":\"white\",\"linecolor\":\"white\",\"showbackground\":true,\"ticks\":\"\",\"zerolinecolor\":\"white\",\"gridwidth\":2},\"zaxis\":{\"backgroundcolor\":\"#E5ECF6\",\"gridcolor\":\"white\",\"linecolor\":\"white\",\"showbackground\":true,\"ticks\":\"\",\"zerolinecolor\":\"white\",\"gridwidth\":2}},\"shapedefaults\":{\"line\":{\"color\":\"#2a3f5f\"}},\"annotationdefaults\":{\"arrowcolor\":\"#2a3f5f\",\"arrowhead\":0,\"arrowwidth\":1},\"geo\":{\"bgcolor\":\"white\",\"landcolor\":\"#E5ECF6\",\"subunitcolor\":\"white\",\"showland\":true,\"showlakes\":true,\"lakecolor\":\"white\"},\"title\":{\"x\":0.05},\"mapbox\":{\"style\":\"light\"}}}}}',\n);",[],[349,351],"2fe5e6ca-ed81-11f0-8651-42dde27851f2",["D",1767979955823],"directory",[288,289],[349],"b828c912-ed81-11f0-8439-42dde27851f2","images","b693b878-ed81-11f0-8276-42dde27851f2",["D",1767980184425],[],[365],"b439d846-ed81-11f0-b5c9-42dde27851f2","data","b2d5764a-ed81-11f0-a274-42dde27851f2",["D",1767980177865],[],[371],["D",1767979955823],{"_11":12,"_234":84},{"_11":12,"_230":-5,"_83":84,"_30":82,"_231":232,"_233":24},{"_51":180,"_13":16,"_45":48,"_221":187,"_222":75,"_223":76,"_224":191,"_225":226,"_227":54,"_228":14,"_229":12},"ctx",{"_64":-5,"_255":413,"_414":415,"_416":417,"_418":24,"_419":24,"_420":24,"_421":198,"_422":-5,"_423":-7,"_424":-7,"_425":26,"_426":24,"_427":24,"_428":-5,"_429":24,"_430":24,"_431":24,"_432":-5},"ENV",{"_384":385,"_386":387,"_388":16,"_389":390,"_391":392,"_393":394,"_395":396,"_397":398,"_399":400,"_401":402,"_403":404,"_405":406,"_407":408,"_409":410,"_411":412},"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

History · index.html