From 7b09d83742bf032bbdbafa7d90f48e13e619e8cb Mon Sep 17 00:00:00 2001
From: Tom Ridd <twridd@gmail.com>
Date: Mon, 22 Nov 2021 03:31:31 +0000
Subject: [PATCH] format

Signed-off-by: Tom Ridd <twridd@gmail.com>
---
 ARCHITECTURE.md                               |  15 +-
 src/App.svelte                                |  34 +++--
 src/MapLayer.svelte                           |   1 -
 src/MapSource.svelte                          |   2 +-
 src/config.js                                 |  13 +-
 src/data/test/mockDSData.js                   |  32 ++---
 src/dataService.js                            |  13 +-
 src/model/appstate.js                         |   8 +-
 src/model/censusdata/censusdata.js            |  34 +++--
 .../services/legacyCensusDataService.js       |  90 ++++++------
 src/model/geography/geography.js              |  45 +++---
 src/model/geography/geography.test.js         |  17 +--
 .../services/legacyGeographyService.js        |   8 +-
 src/model/utils.js                            |   4 +-
 src/routes/ByLocationAndCategory.svelte       | 128 ++++++++++--------
 src/routes/CensusAtlas.svelte                 |  32 ++---
 src/routes/DesignSystemApp.svelte             |   6 +-
 src/ui/map/BoundaryLayer.svelte               |   6 +-
 src/ui/map/DataLayer.svelte                   |  22 +--
 src/ui/map/InteractiveLayer.svelte            |  33 ++---
 src/ui/map/TileSet.svelte                     |  15 +-
 src/ui/map/map.md                             |  69 +++++-----
 src/utils.js                                  |   4 +-
 23 files changed, 310 insertions(+), 321 deletions(-)

diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
index a0bbe967..22ed8357 100644
--- a/ARCHITECTURE.md
+++ b/ARCHITECTURE.md
@@ -4,16 +4,19 @@ A prototype for exploring neighbourhood level Census data tables on a map.
 
 ## Svelte architecture
 
-### Presentation layer ________________
-Files: *.svelte
+### Presentation layer ******\_\_\_\_******
+
+Files: \*.svelte
 Responsibilities: Displaying the current state of the app according to the designs from UI/UX
 
-### Model layer ______________________
-Files: *Store.js
+### Model layer **********\_\_**********
+
+Files: \*Store.js
 Responsibilities: Storing the current state of the app. Provide action methods to update state.
 
-### Data layer ________________________
-Files: *Service.js
+### Data layer **********\_\_\_\_**********
+
+Files: \*Service.js
 Responsibilities: Fetch data to update the model
 
 `npm run storybook` – fires up [Storybook](https://storybook.js.org/docs/react/writing-stories/introduction)
diff --git a/src/App.svelte b/src/App.svelte
index ab47c263..2b798f26 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -7,33 +7,31 @@
   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 {initialiseGeography} from "./model/geography/geography";
+  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 { initialiseCensusData } from "./model/censusdata/censusdata";
   import LegacyCensusDataService from "./model/censusdata/services/legacyCensusDataService";
-  import {setInitialised} from "./model/appstate";
+  import { setInitialised } from "./model/appstate";
 
   export let url = "";
 
-  initialiseGeography(new LegacyGeographyService()).then(
-    () => {
-      initialiseCensusData(new LegacyCensusDataService())
-      setInitialised();
-    }
-  )
+  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;"
diff --git a/src/MapLayer.svelte b/src/MapLayer.svelte
index 29859e16..d0809676 100644
--- a/src/MapLayer.svelte
+++ b/src/MapLayer.svelte
@@ -72,7 +72,6 @@
   map.addLayer(options, order);
 
   function updateData() {
-
     data.lsoa.data.forEach((d) => {
       map.setFeatureState(
         {
diff --git a/src/MapSource.svelte b/src/MapSource.svelte
index 9708f38e..1ef886a76 100644
--- a/src/MapSource.svelte
+++ b/src/MapSource.svelte
@@ -21,7 +21,7 @@
     map.removeSource(id);
   }
 
-  // watches for isSourceLoaded method on map 
+  // watches for isSourceLoaded method on map
   function isSourceLoaded() {
     if (map.isSourceLoaded(id)) {
       loaded = true;
diff --git a/src/config.js b/src/config.js
index 8922fd05..d8030174 100644
--- a/src/config.js
+++ b/src/config.js
@@ -42,7 +42,7 @@ export default {
             ["!=", ["feature-state", "color"], null],
             ["feature-state", "color"],
             "rgba(255, 255, 255, 0)",
-          ]
+          ],
         },
         line: {
           "line-color": ["rgba(192, 192, 192, 1)"],
@@ -65,9 +65,8 @@ export default {
             2,
             0,
           ],
-        }
-      }
-    }
-  }
-
-}
+        },
+      },
+    },
+  },
+};
diff --git a/src/data/test/mockDSData.js b/src/data/test/mockDSData.js
index 56fef848..cfa0a421 100644
--- a/src/data/test/mockDSData.js
+++ b/src/data/test/mockDSData.js
@@ -1,22 +1,22 @@
-let ethnicity=[
-{id:"black",value:"black",label:"Black"},
-{id:"mixed",value:"mixed",label:"Mixed"},
-{id:"white",value:"white",label:"White"},
-{id:"other",value:"other",label:"Other"},
-{id:"asian",value:"asian",label:"Asian"},
-]
+let ethnicity = [
+  { id: "black", value: "black", label: "Black" },
+  { id: "mixed", value: "mixed", label: "Mixed" },
+  { id: "white", value: "white", label: "White" },
+  { id: "other", value: "other", label: "Other" },
+  { id: "asian", value: "asian", label: "Asian" },
+];
 
-let cities=[
-  { value: "none", label: "Please select", disabled:true},
+let cities = [
+  { value: "none", label: "Please select", disabled: true },
   { value: "london", label: "London" },
   { value: "bristol", label: "Bristol" },
   { value: "oxford", label: "Oxford" },
-]
+];
 
-let checkboxData=[
-    {id:"laptop", value:"laptop", label:"Laptop"},
-    {id:"mobile", value:"mobile", label:"Mobile"},
-    {id:"tablet", value:"tablet", label:"Tablet"},
-] 
+let checkboxData = [
+  { id: "laptop", value: "laptop", label: "Laptop" },
+  { id: "mobile", value: "mobile", label: "Mobile" },
+  { id: "tablet", value: "tablet", label: "Tablet" },
+];
 
-export {ethnicity, cities, checkboxData}
+export { ethnicity, cities, checkboxData };
diff --git a/src/dataService.js b/src/dataService.js
index 6e15708a..5a002e5d 100644
--- a/src/dataService.js
+++ b/src/dataService.js
@@ -2,7 +2,6 @@ import { csvParse } from "d3-dsv";
 import { get } from "svelte/store";
 
 export default class LocalDataService {
-  
   getGeographicCodes = async function (url) {
     let response = await fetch(url);
     let string = await response.text();
@@ -10,7 +9,7 @@ export default class LocalDataService {
       return d["GEOGRAPHY_CODE"];
     });
   };
-  
+
   getCategoryTotals = async function (url) {
     let response = await fetch(url);
     let string = await response.text();
@@ -19,13 +18,8 @@ export default class LocalDataService {
     });
     return data;
   };
-  
-  getNomisData = async function (
-    url,
-    geographicCodesStore,
-    selectedCategoryTotals,
-    indicatorCode,
-  ) {
+
+  getNomisData = async function (url, geographicCodesStore, selectedCategoryTotals, indicatorCode) {
     let response = await fetch(url);
     let string = await response.text();
     let geoCodes = get(geographicCodesStore);
@@ -39,5 +33,4 @@ export default class LocalDataService {
       };
     });
   };
-
 }
diff --git a/src/model/appstate.js b/src/model/appstate.js
index 39ec9efa..a20c3b68 100644
--- a/src/model/appstate.js
+++ b/src/model/appstate.js
@@ -1,7 +1,7 @@
-import {writable} from "svelte/store";
+import { writable } from "svelte/store";
 
-export let appIsInitialised = writable(false)
+export let appIsInitialised = writable(false);
 
 export const setInitialised = () => {
-  appIsInitialised.set(true)
-}
+  appIsInitialised.set(true);
+};
diff --git a/src/model/censusdata/censusdata.js b/src/model/censusdata/censusdata.js
index 9075333f..afbe157e 100644
--- a/src/model/censusdata/censusdata.js
+++ b/src/model/censusdata/censusdata.js
@@ -1,28 +1,26 @@
-import {writable} from "svelte/store";
+import { writable } from "svelte/store";
 
-export let categoryDataIsLoaded = writable(false)
-export let tableIsLoaded = writable(false)
+export let categoryDataIsLoaded = writable(false);
+export let tableIsLoaded = writable(false);
 
+export let categoryData = {};
+export let tableData = {};
+export let breaks = [];
 
-export let categoryData = {}
-export let tableData = {}
-export let breaks = []
-
-let dataService = null
+let dataService = null;
 
 export function initialiseCensusData(censusDataService) {
-  dataService = censusDataService
+  dataService = censusDataService;
 }
 
 export async function fetchCensusData(categoryCode, geographyCode) {
-  categoryDataIsLoaded.set(false)
-  
+  categoryDataIsLoaded.set(false);
+
   // 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)
-}
+  let lsoaData = await dataService.fetchLsoaCategoryData(categoryCode);
+  let higherData = await dataService.fetchHigherGeographyCategoryData(categoryCode);
 
+  categoryData = { ...lsoaData, ...higherData };
+  breaks = await dataService.fetchLegendBreakpoints(categoryCode);
+  categoryDataIsLoaded.set(true);
+}
diff --git a/src/model/censusdata/services/legacyCensusDataService.js b/src/model/censusdata/services/legacyCensusDataService.js
index d925c5a2..e2fbfe63 100644
--- a/src/model/censusdata/services/legacyCensusDataService.js
+++ b/src/model/censusdata/services/legacyCensusDataService.js
@@ -1,12 +1,11 @@
-import {csvParse} from "d3-dsv";
-import {ckmeans} from "simple-statistics";
-import {lsoaLookup} from '../../geography/geography'
-import config from "../../../config"
+import { csvParse } from "d3-dsv";
+import { ckmeans } from "simple-statistics";
+import { lsoaLookup } from "../../geography/geography";
+import config from "../../../config";
 
 export default class LegacyCensusDataService {
-
   constructor() {
-    this.reset()
+    this.reset();
   }
 
   reset() {
@@ -14,59 +13,58 @@ export default class LegacyCensusDataService {
       lsoa: {
         data: [],
         index: {},
-        breaks: []
+        breaks: [],
       },
       higher: {
         data: [],
-        index: {}
+        index: {},
       },
       lad: {
         data: [],
-        index: {}
+        index: {},
       },
       englandAndWales: {
         count: 0,
-        value: 0
+        value: 0,
       },
-    }
+    };
   }
 
   async fetchLsoaCategoryData(categoryId) {
-    let url = `https://bothness.github.io/census-atlas/data/lsoa/${categoryId}.csv`
+    let url = `https://bothness.github.io/census-atlas/data/lsoa/${categoryId}.csv`;
     let response = await fetch(url);
     let string = await response.text();
-    let category = this._getCategory(categoryId)
+    let category = this._getCategory(categoryId);
 
-    this.reset()
+    this.reset();
     this.dataset.lsoa.data = csvParse(string, (d, index) => {
       return {
-        code: d['GEOGRAPHY_CODE'],
+        code: d["GEOGRAPHY_CODE"],
         value: +d[category.cell],
         count: +d[0],
         perc: (+d[category.cell] / +d[0]) * 100,
       };
     });
 
-    this._processLegacyDataset()
-
-    return this.dataset.lsoa.index
-  };
+    this._processLegacyDataset();
 
+    return this.dataset.lsoa.index;
+  }
 
   async fetchLegendBreakpoints(categoryId) {
-    return this.dataset.lsoa.breaks
+    return this.dataset.lsoa.breaks;
   }
-  
+
   async fetchHigherGeographyCategoryData(categoryId) {
     // is derived in legacy version from
-    return this.dataset.higher.index
-  };
+    return this.dataset.higher.index;
+  }
 
   async fetchCategoryAggregateData(categoryId) {
     return {
-      breaks: this.dataset.lsoa.breaks
-    }
-  };
+      breaks: this.dataset.lsoa.breaks,
+    };
+  }
 
   async fetchTableForGeography(tableId, geographyId) {
     return {
@@ -74,9 +72,9 @@ export default class LegacyCensusDataService {
       geographyId: geographyId,
       rows: [
         // { category: 'Female', value: 4801, perc: 0.49 }
-      ]
-    }
-  };
+      ],
+    };
+  }
 
   // ---------------------------------
 
@@ -88,12 +86,12 @@ export default class LegacyCensusDataService {
     this.dataset.lsoa.breaks = this._getBreaks(chunks);
 
     for (const lsoa of this.dataset.lsoa.data) {
-      this.dataset.lsoa.index[lsoa.code] = lsoa
+      this.dataset.lsoa.index[lsoa.code] = lsoa;
     }
 
     // aggregate lad data
     for (const lsoa of this.dataset.lsoa.data) {
-      let ladCode = lsoaLookup[lsoa.code].parent
+      let ladCode = lsoaLookup[lsoa.code].parent;
       if (!this.dataset.lad.index[ladCode]) {
         this.dataset.lad.index[ladCode] = {
           code: ladCode,
@@ -101,38 +99,38 @@ export default class LegacyCensusDataService {
           count: 0,
         };
       }
-      this.dataset.lad.index[ladCode].value += lsoa.value
-      this.dataset.lad.index[ladCode].count += lsoa.count
+      this.dataset.lad.index[ladCode].value += lsoa.value;
+      this.dataset.lad.index[ladCode].count += lsoa.count;
     }
 
     for (const ladCode of Object.keys(this.dataset.lad.index)) {
-      this.dataset.lad.index[ladCode].perc = (this.dataset.lad.index[ladCode].value / this.dataset.lad.index[ladCode].count) * 100;
-      this.dataset.lad.data.push(this.dataset.lad.index[ladCode])
+      this.dataset.lad.index[ladCode].perc =
+        (this.dataset.lad.index[ladCode].value / this.dataset.lad.index[ladCode].count) * 100;
+      this.dataset.lad.data.push(this.dataset.lad.index[ladCode]);
     }
 
     this.dataset.lad.data.sort((a, b) => a.perc - b.perc);
 
-
     // aggregate national data
     for (const lsoa of this.dataset.lsoa.data) {
-      this.dataset.englandAndWales.value += lsoa.value
-      this.dataset.englandAndWales.count += lsoa.count
+      this.dataset.englandAndWales.value += lsoa.value;
+      this.dataset.englandAndWales.count += lsoa.count;
     }
     this.dataset.englandAndWales.perc = (this.dataset.englandAndWales.value / this.dataset.englandAndWales.count) * 100;
 
-    // 
-    this.dataset.higher = this.dataset.lad
-    this.dataset.higher.index['ENGLAND_AND_WALES'] = this.dataset.englandAndWales
-    this.dataset.higher.data.push(this.dataset.englandAndWales)
+    //
+    this.dataset.higher = this.dataset.lad;
+    this.dataset.higher.index["ENGLAND_AND_WALES"] = this.dataset.englandAndWales;
+    this.dataset.higher.data.push(this.dataset.englandAndWales);
 
     this.dataset.englandAndWales = {
       count: 0,
-      value: 0
-    }
+      value: 0,
+    };
     this.dataset.lad = {
       data: [],
-      index: {}
-    }
+      index: {},
+    };
   }
 
   _getBreaks(chunks) {
diff --git a/src/model/geography/geography.js b/src/model/geography/geography.js
index 5cfdec5c..3a402471 100644
--- a/src/model/geography/geography.js
+++ b/src/model/geography/geography.js
@@ -1,5 +1,5 @@
-import {writable} from "svelte/store";
-import config from '../../config'
+import { writable } from "svelte/store";
+import config from "../../config";
 
 // CONSTANTS
 // initialised below
@@ -10,29 +10,28 @@ export var lsoaLookup = {};
 
 // WRITABLES
 // reactive variables that can be subscribed to in our Svelte files
-export let loadingGeography = writable(false)
+export let loadingGeography = writable(false);
 export let selectedGeography = writable({
   lad: null,
-  lsoa: null
-})
+  lsoa: null,
+});
 export let hoveredGeography = writable({
   lad: null,
-  lsoa: null
-})
-export let zoom = writable(config.ux.default_zoom)
-
+  lsoa: null,
+});
+export let zoom = writable(config.ux.default_zoom);
 
 // ACTIONS
 export function updateSelectedGeography(geographyCode) {
-  selectedGeography.set(getLadAndLsoa(geographyCode))
+  selectedGeography.set(getLadAndLsoa(geographyCode));
 }
 
 export function updateHoveredGeography(geographyCode) {
-  hoveredGeography.set(getLadAndLsoa(geographyCode))
+  hoveredGeography.set(getLadAndLsoa(geographyCode));
 }
 
 export function updateZoom(newZoom) {
-  zoom.set(newZoom)
+  zoom.set(newZoom);
 }
 
 // ------
@@ -41,13 +40,13 @@ function getLadAndLsoa(geographyCode) {
   if (ladLookup[geographyCode] === null) {
     return {
       lad: lsoaLookup[geographyCode].parent,
-      lsoa: geographyCode
-    }
+      lsoa: geographyCode,
+    };
   } else {
     return {
       lad: geographyCode,
-      lsoa: null
-    }
+      lsoa: null,
+    };
   }
 }
 
@@ -58,15 +57,15 @@ export function reset() {
   ladList = [];
   ladLookup = {};
   lsoaLookup = {};
-  loadingGeography.set(false)
+  loadingGeography.set(false);
   selectedGeography.set({
     lad: null,
-    lsoa: null
-  })
+    lsoa: null,
+  });
   hoveredGeography.set({
     lad: null,
-    lsoa: null
-  })
+    lsoa: null,
+  });
 }
 
 // INITIALISERS
@@ -74,7 +73,7 @@ const LAD_AREA_CODE = "AREACD";
 const LAD_AREA_NAME = "AREANM";
 
 export async function initialiseGeography(geographyService) {
-  loadingGeography.set(true)
+  loadingGeography.set(true);
   ladBoundaries = await geographyService.getLadBoundaries();
   let lsoaData = await geographyService.getLsoaData();
 
@@ -82,7 +81,7 @@ export async function initialiseGeography(geographyService) {
   lsoaLookup = buildLsoaLookup(lsoaData);
   ladList = buildLadList(ladBoundaries, ladLookup);
 
-  loadingGeography.set(false)
+  loadingGeography.set(false);
 }
 
 function buildLadList(ladBounds, ladLookup) {
diff --git a/src/model/geography/geography.test.js b/src/model/geography/geography.test.js
index f8583b58..bd1349de 100644
--- a/src/model/geography/geography.test.js
+++ b/src/model/geography/geography.test.js
@@ -1,12 +1,11 @@
 import MockGeographyService from "./geography/mockGeographyService";
-import {initialiseGeography, loadingGeography, reset} from "./geography";
-
-describe('initialise geography', () => {
+import { initialiseGeography, loadingGeography, reset } from "./geography";
 
+describe("initialise geography", () => {
   it("it calls functions from the geography service", async () => {
     // given
     // a mock for the geography service
-    const mockGeographyService = new MockGeographyService({features: []}, []);
+    const mockGeographyService = new MockGeographyService({ features: [] }, []);
 
     // when
     // we call initialise geography
@@ -22,11 +21,13 @@ describe('initialise geography', () => {
     // given
     // we reset
     reset();
-    const mockGeographyService = new MockGeographyService({features: []}, []);
+    const mockGeographyService = new MockGeographyService({ features: [] }, []);
 
     // and record a change history for loadingGeography
     var changeHistory = [];
-    loadingGeography.subscribe(value => { changeHistory.push(value); })
+    loadingGeography.subscribe((value) => {
+      changeHistory.push(value);
+    });
 
     // when
     // we call initialise geography
@@ -34,6 +35,6 @@ describe('initialise geography', () => {
 
     // then
     // it will have switched loading from false to true and back again
-    expect(changeHistory).toStrictEqual([false, true, false])
+    expect(changeHistory).toStrictEqual([false, true, false]);
   });
-})
+});
diff --git a/src/model/geography/services/legacyGeographyService.js b/src/model/geography/services/legacyGeographyService.js
index 92182e3a..17a52d48 100644
--- a/src/model/geography/services/legacyGeographyService.js
+++ b/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 { autoType, csvParse } from "d3-dsv";
+import { feature } from "topojson-client";
+import config from "../../../config";
 
 export default class LegacyGeographyService {
   getLadBoundaries = async function () {
@@ -10,7 +10,7 @@ export default class LegacyGeographyService {
     let topojson = await response.json();
     return feature(topojson, layer);
   };
-  
+
   getLsoaData = async function () {
     let url = config.legacy.lsoadata;
     let response = await fetch(url);
diff --git a/src/model/utils.js b/src/model/utils.js
index f8421103..27b9e7f8 100644
--- a/src/model/utils.js
+++ b/src/model/utils.js
@@ -1,8 +1,8 @@
 export function getLegendSection(value, breakpoints) {
   for (let i = 1; i < breakpoints.length; i++) {
     if (value <= breakpoints[i]) {
-      return i
+      return i;
     }
   }
-  return breakpoints.length
+  return breakpoints.length;
 }
diff --git a/src/routes/ByLocationAndCategory.svelte b/src/routes/ByLocationAndCategory.svelte
index b4136f03..3b95300c 100644
--- a/src/routes/ByLocationAndCategory.svelte
+++ b/src/routes/ByLocationAndCategory.svelte
@@ -9,19 +9,19 @@
   import UseCensusData from "../ui/UseCensusData.svelte";
   import Feedback from "../ui/Feedback.svelte";
   import HeaderData1 from "../ui/HeaderData1.svelte";
-  import {categoryDataIsLoaded, categoryData, fetchCensusData} from "../model/censusdata/censusdata";
-  import {updateHoveredGeography, updateSelectedGeography, loadingGeography} from "../model/geography/geography";
-  import config from "../config"
+  import { categoryDataIsLoaded, categoryData, fetchCensusData } from "../model/censusdata/censusdata";
+  import { updateHoveredGeography, updateSelectedGeography, loadingGeography } from "../model/geography/geography";
+  import config from "../config";
   import TileSet from "../ui/map/TileSet.svelte";
   import InteractiveLayer from "../ui/map/InteractiveLayer.svelte";
   import DataLayer from "../ui/map/DataLayer.svelte";
-  import {appIsInitialised} from "../model/appstate";
+  import { appIsInitialised } from "../model/appstate";
 
   export let categoryId;
   export let locationId;
 
   // temporary line to load some data
-  $: appIsInitialised, $appIsInitialised && fetchCensusData("QS119EW005", null)
+  $: appIsInitialised, $appIsInitialised && fetchCensusData("QS119EW005", null);
 </script>
 
 <svelte:head>
@@ -30,78 +30,92 @@
 
 <BasePage>
   <span slot="header">
-    <HeaderData1 indicator={categoryId} region={locationId}/>
-    <CategorySelector/>
+    <HeaderData1 indicator={categoryId} region={locationId} />
+    <CategorySelector />
   </span>
 
   <span slot="map">
     <Map maxzoom={14}>
-        <TileSet id="lad"
-                 type="vector"
-                 url={config.legacy.ladvector.url}
-                 layer={config.legacy.ladvector.layer}
-                 promoteId={config.legacy.ladvector.code}
-                 maxzoom={config.ux.map.lsoa_breakpoint}>
-          {#if $categoryDataIsLoaded}
-            <DataLayer id="lad-data-zoom" data={categoryData}/>
-          {/if}
-          <InteractiveLayer id="lad-interactive-layer" maxzoom={config.ux.map.lsoa_breakpoint}
-                            onSelect={(code)=>{updateSelectedGeography(code)}}
-                            onHover={(code)=>{updateHoveredGeography(code)}}
-          />
-        </TileSet>
-      
-        <TileSet id="lsoa" type="vector"
-                 url={config.legacy.lsoabounds.url}
-                 layer={config.legacy.lsoabounds.layer}
-                 promoteId={config.legacy.lsoabounds.code}
-                 minzoom={config.ux.map.lsoa_breakpoint}
-                 maxzoom={config.ux.map.buildings_breakpoint}>
-          
-          {#if $categoryDataIsLoaded}
-            <DataLayer id="lsoa-data" data={categoryData}/>
-          {/if}
-          <InteractiveLayer id="lsoa-boundaries"
-                            onSelect={(code)=>{updateSelectedGeography(code)}}
-                            onHover={(code)=>{updateHoveredGeography(code)}}
-          />
+      <TileSet
+        id="lad"
+        type="vector"
+        url={config.legacy.ladvector.url}
+        layer={config.legacy.ladvector.layer}
+        promoteId={config.legacy.ladvector.code}
+        maxzoom={config.ux.map.lsoa_breakpoint}
+      >
+        {#if $categoryDataIsLoaded}
+          <DataLayer id="lad-data-zoom" data={categoryData} />
+        {/if}
+        <InteractiveLayer
+          id="lad-interactive-layer"
+          maxzoom={config.ux.map.lsoa_breakpoint}
+          onSelect={(code) => {
+            updateSelectedGeography(code);
+          }}
+          onHover={(code) => {
+            updateHoveredGeography(code);
+          }}
+        />
+      </TileSet>
 
-        </TileSet>
-        <TileSet id="lsoa-building"
-                 type="vector"
-                 url={config.legacy.lsoabldg.url}
-                 layer={config.legacy.lsoabldg.layer}
-                 promoteId={config.legacy.lsoabldg.code}
-                 minzoom={config.ux.map.buildings_breakpoint}>
-          {#if $categoryDataIsLoaded}
-            <DataLayer id="lsoa-data-zoom" data={categoryData}/>
-          {/if}
-        </TileSet>
-        
+      <TileSet
+        id="lsoa"
+        type="vector"
+        url={config.legacy.lsoabounds.url}
+        layer={config.legacy.lsoabounds.layer}
+        promoteId={config.legacy.lsoabounds.code}
+        minzoom={config.ux.map.lsoa_breakpoint}
+        maxzoom={config.ux.map.buildings_breakpoint}
+      >
+        {#if $categoryDataIsLoaded}
+          <DataLayer id="lsoa-data" data={categoryData} />
+        {/if}
+        <InteractiveLayer
+          id="lsoa-boundaries"
+          onSelect={(code) => {
+            updateSelectedGeography(code);
+          }}
+          onHover={(code) => {
+            updateHoveredGeography(code);
+          }}
+        />
+      </TileSet>
+      <TileSet
+        id="lsoa-building"
+        type="vector"
+        url={config.legacy.lsoabldg.url}
+        layer={config.legacy.lsoabldg.layer}
+        promoteId={config.legacy.lsoabldg.code}
+        minzoom={config.ux.map.buildings_breakpoint}
+      >
+        {#if $categoryDataIsLoaded}
+          <DataLayer id="lsoa-data-zoom" data={categoryData} />
+        {/if}
+      </TileSet>
     </Map>
   </span>
 
   <span slot="footer">
     <footer class="ons-footer">
       <div class="ons-footer__body ons-page__footer" data-analytics="footer">
-        <div class="ons-container"/>
-        <Feedback/>
+        <div class="ons-container" />
+        <Feedback />
       </div>
     </footer>
   </span>
 
-  <img src="/img/tmp-table-overview-mockup.png" class="tmp-placeholder"/>
+  <img src="/img/tmp-table-overview-mockup.png" class="tmp-placeholder" />
 
-  <CensusTableByLocation/>
+  <CensusTableByLocation />
 
   <Topic cardTitle="General health with other indicators"
-  >Explore correlations between two indicators in <a href="#">advanced mode</a>.
-  </Topic
-  >
+    >Explore correlations between two indicators in <a href="#">advanced mode</a>.
+  </Topic>
 
-  <UseCensusData location={categoryId}/>
+  <UseCensusData location={categoryId} />
 
-  <ONSShare/>
+  <ONSShare />
 </BasePage>
 
 <style lang="scss">
diff --git a/src/routes/CensusAtlas.svelte b/src/routes/CensusAtlas.svelte
index c2e8af22..56a8be6a 100644
--- a/src/routes/CensusAtlas.svelte
+++ b/src/routes/CensusAtlas.svelte
@@ -9,7 +9,7 @@
   import Loader from "../ui/Loader.svelte";
   import Select from "../ui/Select.svelte";
   import config from "../config";
-  
+
   import {
     getNomis,
     storeNewCategoryAndTotals,
@@ -18,15 +18,15 @@
     setColors,
     updateURL,
   } from "../utils.js";
-  
+
   import MapComponent from "../MapComponent.svelte";
   import { get } from "svelte/store";
   import LocalDataService from "../dataService";
   import { json } from "d3-fetch";
-  import {loadingGeography} from "../model/geography/geography";
-  
+  import { loadingGeography } from "../model/geography/geography";
+
   import { bounds, lad_dta, get_data } from "../stores.js";
-  
+
   const geography = config.legacy.geography;
   const mapstyle = config.legacy.mapstyle;
   const tabledata = config.legacy.tabledata;
@@ -35,7 +35,7 @@
   const lsoabounds = config.legacy.lsoabounds;
   const ladvector = config.legacy.ladvector;
   const lsoadata = config.legacy.lsoadata;
-  
+
   const colors = {
     base: ["#d5f690", "#5bc4b1", "#2e9daa", "#0079a2", "#005583", "#cccccc"],
     muted: ["#f5fce2", "#d7ede8", "#cbe2e5", "#c2d7e3", "#bdccd9", "#f0f0f0"],
@@ -66,7 +66,7 @@
       highlighted: null,
     },
   };
-  
+
   // STATE
   let selectCode = "QS119EW005";
   let mapLocation = null;
@@ -80,9 +80,7 @@
   let mapZoom = null;
 
   const localDataService = new LocalDataService();
-  
-  
-  
+
   function setIndicator(indicators, code) {
     indicators.forEach((indicator) => {
       if (indicator.code && indicator.code == code) {
@@ -95,7 +93,7 @@
 
   async function initialise() {
     var location = await get_data(boundurl);
-    
+
     // no need to be blocking
     json(tabledata).then((jsn) => {
       indicators = jsn;
@@ -187,9 +185,7 @@
         active.lad.selected = selectData.lad.data[index].AREACD;
       }
     } else if (type == "lsoa") {
-      let filtered = selectData.lsoa.data.filter((d) =>
-        $lad_dta.get(active.lad.selected).children.includes(d.AREACD),
-      );
+      let filtered = selectData.lsoa.data.filter((d) => $lad_dta.get(active.lad.selected).children.includes(d.AREACD));
       let index = filtered.findIndex((d) => d.code == active.lsoa.selected) + diff;
       if (index >= 0 && index < filtered.length) {
         active.lsoa.selected = filtered[index].AREACD;
@@ -229,10 +225,10 @@
       history.pushState(undefined, undefined, hash);
     }
   }
-  
+
   $: ladvector, console.warn("ladvector", ladvector);
   $: active.lad, console.warn("active.lad", active.lad);
-  
+
   $: selectItem && setSelectedDataset(); // Update meta when selection updates
   $: active.lad.highlighted = lsoalookup && active.lsoa.hovered ? lsoalookup[active.lsoa.hovered].parent : null;
   $: active.lad.selected =
@@ -266,7 +262,6 @@
 {/if}
 
 <Panel>
-  
   <h1>2011 Census Atlas Demo</h1>
   {#if indicators && selectItem}
     {#if selectData}
@@ -391,7 +386,7 @@
         {/if}
       </div>
     </div>
-    
+
     {#if $lad_dta}
       <Select
         options={[...$lad_dta.values()]}
@@ -410,7 +405,6 @@
   {/if}
 </Panel>
 
-
 {#if mapLocation}
   <MapComponent bind:map style={mapstyle} minzoom={4} maxzoom={14} bind:zoom={mapZoom} location={mapLocation}>
     {#if selectData}
diff --git a/src/routes/DesignSystemApp.svelte b/src/routes/DesignSystemApp.svelte
index 77c19b5d..4892955a 100644
--- a/src/routes/DesignSystemApp.svelte
+++ b/src/routes/DesignSystemApp.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { ethnicity, cities, checkboxData  } from "../data/test/mockDSData";
+  import { ethnicity, cities, checkboxData } from "../data/test/mockDSData";
   import ONSCensusApp from "../ui/ons/ONSCensusApp.svelte";
   import ONSAccordion from "../ui/ons/ONSAccordion.svelte";
   import ONSAccordionPanel from "../ui/ons/partials/ONSAccordionPanel.svelte";
@@ -349,9 +349,7 @@
 
   <DesignSystemPanel
     title="Radios"
-    code={`<script>
-      let radioValue = "none";
-   </script>
+    code={`<script ✂prettier:content✂="CiAgICAgIGxldCByYWRpb1ZhbHVlID0gIm5vbmUiOwogICA=">{}</script>
 
 <ONSRadios name="ethnicity">
   {#each ethnicity as option}
diff --git a/src/ui/map/BoundaryLayer.svelte b/src/ui/map/BoundaryLayer.svelte
index f7aeecff..412b18d1 100644
--- a/src/ui/map/BoundaryLayer.svelte
+++ b/src/ui/map/BoundaryLayer.svelte
@@ -1,8 +1,8 @@
 <script>
   import { getContext } from "svelte";
   import { createEventDispatcher } from "svelte";
-  import config from '../../config';
-  
+  import config from "../../config";
+
   export let id;
   export let source = getContext("source");
   export let sourceLayer = getContext("source-layer");
@@ -10,7 +10,7 @@
   export let filter = null;
   export let layout = {};
   export let paint = config.ux.map.paint.line;
-  export let order = 'tunnel_motorway_casing';
+  export let order = "tunnel_motorway_casing";
   export let maxzoom = getContext("tileset-maxzoom");
   export let minzoom = getContext("tileset-minzoom");
 
diff --git a/src/ui/map/DataLayer.svelte b/src/ui/map/DataLayer.svelte
index 6c6b5dd1..61321372 100644
--- a/src/ui/map/DataLayer.svelte
+++ b/src/ui/map/DataLayer.svelte
@@ -1,9 +1,9 @@
 <script>
-  import {getContext} from "svelte";
-  import {getLegendSection} from "../../model/utils";
-  import {breaks} from "../../model/censusdata/censusdata"
-  import config from "../../config"
-  
+  import { getContext } from "svelte";
+  import { getLegendSection } from "../../model/utils";
+  import { breaks } from "../../model/censusdata/censusdata";
+  import config from "../../config";
+
   export let id;
   export let source = getContext("source");
   export let sourceLayer = getContext("source-layer");
@@ -18,18 +18,18 @@
     ],
   };
   export let data = null;
-  export let order = 'tunnel_motorway_casing';
+  export let order = "tunnel_motorway_casing";
   export let maxzoom = getContext("tileset-maxzoom");
   export let minzoom = getContext("tileset-minzoom");
 
-  const {getMap} = getContext("map");
+  const { getMap } = getContext("map");
   const map = getMap();
 
   let selectedPrev = null;
   let highlightedPrev = null;
 
-  console.log("rendering data layer")
-  
+  console.log("rendering data layer");
+
   // remove map if present
   if (map.getLayer(id)) {
     map.removeLayer(id);
@@ -61,8 +61,8 @@
   map.addLayer(options, order);
 
   function updateData() {
-    for(const key of Object.keys(data)) {
-      let legendSection = getLegendSection(data[key].perc, breaks)
+    for (const key of Object.keys(data)) {
+      let legendSection = getLegendSection(data[key].perc, breaks);
       map.setFeatureState(
         {
           source: source,
diff --git a/src/ui/map/InteractiveLayer.svelte b/src/ui/map/InteractiveLayer.svelte
index 001009b9..073fb572 100644
--- a/src/ui/map/InteractiveLayer.svelte
+++ b/src/ui/map/InteractiveLayer.svelte
@@ -1,8 +1,8 @@
 <script>
   import { getContext } from "svelte";
   import { createEventDispatcher } from "svelte";
-  import config from '../../config';
-  
+  import config from "../../config";
+
   const dispatch = createEventDispatcher();
   export let id;
   export let source = getContext("source");
@@ -16,14 +16,13 @@
   export let click = true;
   export let clickCenter = false;
   export let hover = true;
-  export let order = 'tunnel_motorway_casing';
+  export let order = "tunnel_motorway_casing";
   export let maxzoom = getContext("tileset-maxzoom");
   export let minzoom = getContext("tileset-minzoom");
-  export let onSelect = (selectedItem) => {}
-  export let onHover = (hoveredItem) => {}
+  export let onSelect = (selectedItem) => {};
+  export let onHover = (hoveredItem) => {};
   let selectedPrev = null;
-  
-  
+
   function centroid(coords) {
     // not as accurate, but definitely faster!!
     var xSum = 0,
@@ -40,9 +39,7 @@
 
   const { getMap } = getContext("map");
   const map = getMap();
-  let boundaryLayerId = `${id}-interactive-boundaries`
-    
-
+  let boundaryLayerId = `${id}-interactive-boundaries`;
 
   if (map.getLayer(id)) {
     map.removeLayer(id);
@@ -53,15 +50,15 @@
 
   let options = {
     id: id,
-    type: 'fill',
+    type: "fill",
     source: source,
-    paint: {"fill-color": "rgba(255, 255, 255, 0)"},
+    paint: { "fill-color": "rgba(255, 255, 255, 0)" },
     layout: layout,
   };
-  
+
   let boundaryLayerOptions = {
     id: boundaryLayerId,
-    type: 'line',
+    type: "line",
     source: source,
     paint: paint,
     layout: layout,
@@ -102,8 +99,8 @@
     map.on("click", id, (e) => {
       if (e.features.length > 0) {
         selected = e.features[0].id;
-        onSelect(selected)
-        
+        onSelect(selected);
+
         if (selectedPrev) {
           map.setFeatureState(
             {
@@ -147,8 +144,8 @@
           );
         }
         hovered = e.features[0].id;
-        onHover(e.features[0].id)
-        
+        onHover(e.features[0].id);
+
         map.setFeatureState({ source: source, sourceLayer: sourceLayer, id: hovered }, { hovered: true });
 
         // Change the cursor style as a UI indicator.
diff --git a/src/ui/map/TileSet.svelte b/src/ui/map/TileSet.svelte
index 9eb52a97..975568af 100644
--- a/src/ui/map/TileSet.svelte
+++ b/src/ui/map/TileSet.svelte
@@ -12,24 +12,23 @@
   export let maxzoom = getContext("maxzoom");
 
   let loaded = false;
-  $: loaded, console.log("boundary set loaded")
-  
+  $: loaded, console.log("boundary set loaded");
+
   const { getMap } = getContext("map");
   const map = getMap();
 
-  setContext('source', id)
-  setContext('source-layer', layer)
+  setContext("source", id);
+  setContext("source-layer", layer);
 
-  setContext('tileset-minzoom', minzoom)
-  setContext('tileset-maxzoom', maxzoom)
+  setContext("tileset-minzoom", minzoom);
+  setContext("tileset-maxzoom", maxzoom);
 
-  
   // clears out self on map object
   if (map.getSource(id)) {
     map.removeSource(id);
   }
 
-  // watches for isSourceLoaded method on map 
+  // watches for isSourceLoaded method on map
   function isSourceLoaded() {
     if (map.isSourceLoaded(id)) {
       loaded = true;
diff --git a/src/ui/map/map.md b/src/ui/map/map.md
index 4bcacdc0..8870d14b 100644
--- a/src/ui/map/map.md
+++ b/src/ui/map/map.md
@@ -10,55 +10,54 @@ This makes it relatively easy to work out what is going on with the Map
 
 ## Map 1
 
-This is a map which is pulling from one tile set. 
-`<BoundaryLayer>` renders the borders of its parent TileSet. Setting `<BoundaryLayer paint={example}>` lets us customise the boundaries 
+This is a map which is pulling from one tile set.
+`<BoundaryLayer>` renders the borders of its parent TileSet. Setting `<BoundaryLayer paint={example}>` lets us customise the boundaries
 
 ```html
-<Map>
-    <TileSet id="lad" type="vector" url={exampleUrl}>
-        <BoundaryLayer id="lad-boundaries" />
-    </TileSet>
-</Map>
+<map>
+  <TileSet id="lad" type="vector" url="{exampleUrl}">
+    <BoundaryLayer id="lad-boundaries" />
+  </TileSet>
+</map>
 ```
 
 ## Map 2
-This map renders two new layers. `<DataLayer />` is what renders the data. `<InteractiveLayer />` gives two callbacks which we can use to update our datastores. 
+
+This map renders two new layers. `<DataLayer />` is what renders the data. `<InteractiveLayer />` gives two callbacks which we can use to update our datastores.
 
 ```html
-<Map>
-    <TileSet id="lad" type="vector" url={exampleUrl}>
-        <DataLayer id="lad-data" data={categoryData} />
-        <BoundaryLayer id="lad-boundaries" />
-        <InteractiveLayer id="lad-interactive-layer"
-            onSelect={(code)=>{updateSelectedGeography(code)}}
-            onHover={(code)=>{updateHoveredGeography(code)}} />
-    </TileSet>
-</Map>
+<map>
+  <TileSet id="lad" type="vector" url="{exampleUrl}">
+    <DataLayer id="lad-data" data="{categoryData}" />
+    <BoundaryLayer id="lad-boundaries" />
+    <InteractiveLayer id="lad-interactive-layer" onSelect={(code)=>{updateSelectedGeography(code)}}
+    onHover={(code)=>{updateHoveredGeography(code)}} />
+  </TileSet>
+</map>
 ```
 
 ## Map 3
+
 This is where life gets interesting. By setting `minzoom` and `maxzoom` we control when layers and tile sets are visible
 
 In this example if you are zoomed out the lad level data is rendered.
-When you zoom in above 9 the lad layers are hidden and the more detailed 
+When you zoom in above 9 the lad layers are hidden and the more detailed
 lsoa data becomes active.
 
 ```html
-<Map>
-    <TileSet id="lad" type="vector" url={ladUrl} maxzoom={9}>
-        <DataLayer id="lad-data" data={categoryData} />
-        <BoundaryLayer id="lad-boundaries" />
-        <InteractiveLayer id="lad-interactive-layer"
-            onSelect={(code)=>{updateSelectedGeography(code)}}
-            onHover={(code)=>{updateHoveredGeography(code)}} />
-    </TileSet>
-
-    <TileSet id="lsoa" type="vector" url={lsoaUrl} minzoom={9} >
-        <DataLayer id="lsoa-data" data={categoryData} />
-        <BoundaryLayer id="lsoa-boundaries" />
-        <InteractiveLayer id="lsoa-interactive-layer"
-                          onSelect={(code)=>{updateSelectedGeography(code)}}
-            onHover={(code)=>{updateHoveredGeography(code)}} />
-    </TileSet>
-</Map>
+<map>
+  <TileSet id="lad" type="vector" url="{ladUrl}" maxzoom="{9}">
+    <DataLayer id="lad-data" data="{categoryData}" />
+    <BoundaryLayer id="lad-boundaries" />
+    <InteractiveLayer id="lad-interactive-layer" onSelect={(code)=>{updateSelectedGeography(code)}}
+    onHover={(code)=>{updateHoveredGeography(code)}} />
+  </TileSet>
+
+  <TileSet id="lsoa" type="vector" url="{lsoaUrl}" minzoom="{9}">
+    <DataLayer id="lsoa-data" data="{categoryData}" />
+    <BoundaryLayer id="lsoa-boundaries" />
+    <InteractiveLayer id="lsoa-interactive-layer" onSelect={(code)=>{updateSelectedGeography(code)}}
+    onHover={(code)=>{updateHoveredGeography(code)}} />
+  </TileSet>
+</map>
 ```
diff --git a/src/utils.js b/src/utils.js
index e0526ddf..9a2ab514 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -11,7 +11,7 @@ export async function getLsoaData(url) {
 }
 
 export async function getNomis(url, dataService, geographicCodesStore, selectedCategoryTotals, indicatorCode) {
-  console.log(indicatorCode)
+  console.log(indicatorCode);
   let geoCodesStore = get(geographicCodesStore);
   if (geoCodesStore.length == 0) {
     let geoCodes = await dataService.getGeographicCodes(url);
@@ -48,7 +48,7 @@ export function processAggregateData(dataset, lookup) {
 function calculateAggregateData(lsoaData, lsoa, lookup, lad, ladTemp, englandAndWales) {
   lsoa.index[lsoaData.code] = lsoaData;
   let parent = lookup[lsoaData.code].parent;
-  
+
   if (!lad.index[parent]) {
     lad.index[parent] = {
       code: parent,