Add maps to be responsive to data

Signed-off-by: Tom Ridd <twridd@gmail.com>

src/App.svelte

@@ -7,21 +7,33 @@
   import ByLocation from "./routes/ByLocation.svelte";
   import ByCategory from "./routes/ByCategory.svelte";
   import CensusCategories from "./routes/CensusCategories.svelte";
-  import { Router, Link, Route } from "svelte-routing";
+  import {Router, Link, Route} from "svelte-routing";
+  import {initialiseGeography} from "./model/geography/geography";
+  import LegacyGeographyService from "./model/geography/services/legacyGeographyService";
+  import {initialiseCensusData} from "./model/censusdata/censusdata";
+  import LegacyCensusDataService from "./model/censusdata/services/legacyCensusDataService";
+  import {setInitialised} from "./model/appstate";
 
   export let url = "";
+
+  initialiseGeography(new LegacyGeographyService()).then(
+    () => {
+      initialiseCensusData(new LegacyCensusDataService())
+      setInitialised();
+    }
+  )
 </script>
 
 <Router {url}>
   <div>
-    <Route path="/" component={ExploreCensus} />
-    <Route path="/components" component={Components} />
-    <Route path="/design-system" component={DesignSystemApp} />
-    <Route path="/data/:categoryId/locations/:locationId" component={ByLocationAndCategory} />
-    <Route path="/data/:categoryId" component={ByCategory} />
-    <Route path="/locations/:locationId" component={ByLocation} />
-    <Route path="/categories" component={CensusCategories} />
-    <Route path="/original" component={CensusAtlas} />
+    <Route path="/" component={ExploreCensus}/>
+    <Route path="/components" component={Components}/>
+    <Route path="/design-system" component={DesignSystemApp}/>
+    <Route path="/data/:categoryId/locations/:locationId" component={ByLocationAndCategory}/>
+    <Route path="/data/:categoryId" component={ByCategory}/>
+    <Route path="/locations/:locationId" component={ByLocation}/>
+    <Route path="/categories" component={CensusCategories}/>
+    <Route path="/original" component={CensusAtlas}/>
   </div>
   <nav
     style="position: relative; z-index: 99999; background: #e2e2e3; padding: 20px;"

src/config.js

@@ -0,0 +1,73 @@
+export default {
+  legacy: {
+    geography: "TYPE298",
+    mapstyle: "https://bothness.github.io/ons-basemaps/data/style-omt.json",
+    tabledata: "https://bothness.github.io/census-atlas/data/indicators.json",
+    ladtopo: {
+      url: "https://bothness.github.io/census-atlas/data/lad_boundaries_2020.json",
+      layer: "LA2020EW",
+      code: "AREACD",
+      name: "AREANM",
+    },
+    lsoabldg: {
+      url: "https://cdn.ons.gov.uk/maptiles/buildings/v1/{z}/{x}/{y}.pbf",
+      layer: "buildings",
+      code: "lsoa11cd",
+    },
+    lsoabounds: {
+      url: "https://cdn.ons.gov.uk/maptiles/administrative/lsoa/v2/boundaries/{z}/{x}/{y}.pbf",
+      layer: "lsoa",
+      code: "areacd",
+    },
+    ladvector: {
+      url: "https://cdn.ons.gov.uk/maptiles/administrative/authorities/v1/boundaries/{z}/{x}/{y}.pbf",
+      layer: "authority",
+      code: "areacd",
+    },
+    lsoadata: "https://bothness.github.io/census-atlas/data/lsoa2011_lad2020.csv",
+  },
+  ux: {
+    legend_sections: 5,
+    legend_colours: ["#d5f690", "#5bc4b1", "#2e9daa", "#0079a2", "#005583"],
+    map: {
+      default_zoom: 14,
+      max_zoom: 14,
+      min_zoom: 9,
+      buildings_breakpoint: 12,
+      lsoa_breakpoint: 9,
+      paint: {
+        data: {
+          "fill-color": [
+            "case",
+            ["!=", ["feature-state", "color"], null],
+            ["feature-state", "color"],
+            "rgba(255, 255, 255, 0)",
+          ]
+        },
+        line: {
+          "line-color": ["rgba(192, 192, 192, 1)"],
+          "line-width": [0.75],
+        },
+        interactive: {
+          "line-color": [
+            "case",
+            ["==", ["feature-state", "selected"], true],
+            "rgba(0, 0, 0, 1)",
+            ["==", ["feature-state", "hovered"], true],
+            "rgba(50, 50, 50, 1)",
+            "rgba(0, 0, 0, 0)",
+          ],
+          "line-width": [
+            "case",
+            ["==", ["feature-state", "selected"], true],
+            2,
+            ["==", ["feature-state", "hovered"], true],
+            2,
+            0,
+          ],
+        }
+      }
+    }
+  }
+
+}

src/model/appstate.js

@@ -0,0 +1,7 @@
+import {writable} from "svelte/store";
+
+export let appIsInitialised = writable(false)
+
+export const setInitialised = () => {
+  appIsInitialised.set(true)
+}

src/model/censusdata/censusdata.js

@@ -6,20 +6,23 @@ export let tableIsLoaded = writable(false)
 
 export let categoryData = {}
 export let tableData = {}
+export let breaks = []
 
 let dataService = null
 
-export function initialiseCensusDataService(censusDataService) {
+export function initialiseCensusData(censusDataService) {
   dataService = censusDataService
 }
 
 export async function fetchCensusData(categoryCode, geographyCode) {
   categoryDataIsLoaded.set(false)
 
-  // at the moment
+  // Do a simple data load
   let lsoaData = await dataService.fetchLsoaCategoryData(categoryCode)
   let higherData = await dataService.fetchHigherGeographyCategoryData(categoryCode)
+
   categoryData = {...lsoaData, ...higherData}
+  breaks = await dataService.fetchLegendBreakpoints(categoryCode)
   categoryDataIsLoaded.set(true)
 }
 

src/model/censusdata/services/legacyCensusDataService.js

@@ -1,6 +1,7 @@
 import {csvParse} from "d3-dsv";
 import {ckmeans} from "simple-statistics";
 import {lsoaLookup} from '../../geography/geography'
+import config from "../../../config"
 
 export default class LegacyCensusDataService {
 
@@ -12,7 +13,8 @@ export default class LegacyCensusDataService {
     this.dataset = {
       lsoa: {
         data: [],
-        index: {}
+        index: {},
+        breaks: []
       },
       higher: {
         data: [],
@@ -50,6 +52,11 @@ export default class LegacyCensusDataService {
     return this.dataset.lsoa.index
   };
 
+
+  async fetchLegendBreakpoints(categoryId) {
+    return this.dataset.lsoa.breaks
+  }
+
   async fetchHigherGeographyCategoryData(categoryId) {
     // is derived in legacy version from
     return this.dataset.higher.index
@@ -77,7 +84,7 @@ export default class LegacyCensusDataService {
     this.dataset.lsoa.data.sort((a, b) => a.perc - b.perc);
 
     let vals = this.dataset.lsoa.data.map((d) => d.perc);
-    let chunks = ckmeans(vals, 5);
+    let chunks = ckmeans(vals, config.ux.legend_sections);
     this.dataset.lsoa.breaks = this._getBreaks(chunks);
 
     for (const lsoa of this.dataset.lsoa.data) {

src/model/geography/geography.js

@@ -1,5 +1,5 @@
 import {writable} from "svelte/store";
-import config from '../config'
+import config from '../../config'
 
 // CONSTANTS
 // initialised below
@@ -24,11 +24,11 @@ export let zoom = writable(config.ux.default_zoom)
 
 // ACTIONS
 export function updateSelectedGeography(geographyCode) {
-  selectedGeography.set(getLadAndLsoa(geography))
+  selectedGeography.set(getLadAndLsoa(geographyCode))
 }
 
 export function updateHoveredGeography(geographyCode) {
-  hoveredGeography.set(getLadAndLsoa(geography))
+  hoveredGeography.set(getLadAndLsoa(geographyCode))
 }
 
 export function updateZoom(newZoom) {
@@ -39,7 +39,15 @@ export function updateZoom(newZoom) {
 
 function getLadAndLsoa(geographyCode) {
   if (ladLookup[geographyCode] === null) {
-    const lad = d
+    return {
+      lad: lsoaLookup[geographyCode].parent,
+      lsoa: geographyCode
+    }
+  } else {
+    return {
+      lad: geographyCode,
+      lsoa: null
+    }
   }
 }
 
@@ -103,7 +111,7 @@ function buildLadLookup(ladBounds, lsoaData) {
       lookup[d.parent].children.push(d.code);
     }
   });
-  
+
   return lookup;
 }
 

src/model/geography/services/legacyGeographyService.js

@@ -1,6 +1,6 @@
 import {autoType, csvParse} from "d3-dsv";
 import {feature} from "topojson-client";
-import config from '../../config';
+import config from '../../../config';
 
 export default class LegacyGeographyService {
   getLadBoundaries = async function () {

src/model/utils.js

@@ -0,0 +1,8 @@
+export function getLegendSection(value, breakpoints) {
+  for (let i = 1; i < breakpoints.length; i++) {
+    if (value <= breakpoints[i]) {
+      return i
+    }
+  }
+  return breakpoints.length
+}