2b:null 2c:["$","title",null,{"children":"IV UDS :: Regional Comparison Map | ktringuyen | Observable"}] 31:T63b,viewof map = { const container = html`

`; yield container; const map = new maplibregl.Map({ container, center: startingCenter, zoom: startingZoom, style: { version: 8, glyphs: "https://cdn.protomaps.com/fonts/pbf/{fontstack}/{range}.pbf", sources: { protomaps: { type: "vector", url: "pmtiles://https://azvitmmodelsa.blob.core.windows.net/misc/australia.pmtiles?sp=r&st=2023-03-20T00:49:53Z&se=2024-09-01T09:49:53Z&spr=https&sv=2021-12-02&sr=b&sig=HdzTXKJ7gL4o2f7SfJThP69cDvKw0PjOAzAHa53sHaY%3D", attribution: 'Protomaps © OpenStreetMap' } }, layers: pmtilesLayers.default("protomaps", "black") }, scrollZoom: true, preserveDrawingBuffer: true }); map.on("load", () => { container.value = map; container.dispatchEvent(new CustomEvent("input")); }); // Update map extent controls on move. map.on("move", () => { container.dispatchEvent(new CustomEvent("extentUpdate")); }); let extentUpdate = () => { const { lng, lat } = map.getCenter(); viewof mapControls.value.extent.lat = lat; viewof mapControls.value.extent.lng = lng; viewof mapControls.value.extent.zoom = map.getZoom(); }; container.addEventListener("extentUpdate", extentUpdate); invalidation.then(() => { map.remove(); container.removeEventListener("extentUpdate", extentUpdate); }); }32:T45c,html`

${Legend(colourScale, { title: `${selectedScenarios.base.name} vs. ${ selectedScenarios.other.name }: ${selectedMetric.Group} :: ${selectedMetric.Metric} ${ selectedMetric["Time Period"] == "--" ? "" : selectedMetric["Time Period"] } ${selectedMetric.Mode == "--" ? "" : selectedMetric.Mode}` })}

${Inputs.button("Download Map", { reduce: () => { const url = map.getCanvas().toDataURL("image/png"); const fileName = `${selectedScenarios.base.code}_vs_${selectedScenarios.other.code}-${selectedMetric.Group}_${selectedMetric.Metric}_${selectedMetric.Boundaries}_${selectedMetric["Time Period"]}_${selectedMetric.Mode}}`; // Create fake link to download picture. const link = document.createElement("a"); link.download = `${fileName}.png`; link.href = url; link.click(); link.remove(); } })}

`33:T6f9,// scenarios = [ // { code: "Y2018_IV_R1_S0_02", name: "2018 SALUP" }, // { code: "Y2036_IV_R1_S0_02", name: "2036 SALUP" }, // { code: "Y2036_IV_R1_S1_02", name: "2036 Compact City" }, // { code: "Y2036_IV_R1_S2_02", name: "2036 Consolidated City" }, // { code: "Y2036_IV_R1_S3_02", name: "2036 Dispersed City" }, // { code: "Y2036_IV_R1_S4_02", name: "2036 Network of Cities" }, // { code: "Y2036_IV_R1_S5_02", name: "2036 Distributed State" }, // { code: "Y2056_IV_R1_S0_02", name: "2056 SALUP" }, // { code: "Y2056_IV_R1_S1_02", name: "2056 Compact City" }, // { code: "Y2056_IV_R1_S2_02", name: "2056 Consolidated City" }, // { code: "Y2056_IV_R1_S3_02", name: "2056 Dispersed City" }, // { code: "Y2056_IV_R1_S4_02", name: "2056 Network of Cities" }, // { code: "Y2056_IV_R1_S5_02", name: "2056 Distributed State" }, // { code: "Y2056_IV_R2_S1_02", name: "2056 Compact City (R2)" }, // { code: "Y2056_IV_R2_S2_02", name: "2056 Consolidated City (R2)" }, // { code: "Y2056_IV_R2_S3_02", name: "2056 Dispersed City (R2)" }, // { code: "Y2056_IV_R2_S4_02", name: "2056 Network of Cities (R2)" }, // { code: "Y2056_IV_R2_S5_02", name: "2056 Distributed State (R2)" }, // { code: "Y2056_IV_R2I2_S2_01", name: "2056 Consolidated City (R2I2)" }, // { code: "Y2056_IV_R2I2_S3_02", name: "2056 Dispersed City (R2I2)" }, // { code: "Y2056_IV_R2I2_S2b_01", name: "2056 Consolidated City (R2I3)" }, // { code: "Y2056_IV_R2I2_S3b_02", name: "2056 Dispersed City (R2I3)" }, // { code: "Y2056_IV_R2I2_S4_01", name: "2056 Network of Cities (R2I2)" }, // { code: "Y2056_IV_R2I2_S5_01", name: "2056 Distributed State (R2I2)" } // ] scenarios = [ { code: "base-ref", name: "Base year 2018" }, { code: "future-ref", name: "Future year 2038" }, ]34:T5e0,function createCascadingFilter(table, columns) { // Helper function to retrieve unique values of a column within a table after // being filtered. const getUniqueValues = function (table, filter, field) { let filteredData = table; for (const [key, value] of Object.entries(filter)) { filteredData = filteredData.filter( `d => op.equal(d["${key}"], "${value}")` ); } return filteredData.select(field).dedupe().array(field); }; // Helper function to create dynamic selection inputs. const createDynamicSelect = juice(Inputs.select, { options: "[0]", result: "[1].value" }); // Create all dynamic selection inputs. const selectionInputs = columns.reduce((acc, col, i) => { return { ...acc, [col]: createDynamicSelect([], { label: col }) }; }, {}); // Create the HTML component containing the selection inputs. let component = view`

Metric Selection ${["...", selectionInputs]}

`; // Create one-way bindings. for (let i = 0; i < columns.length; i++) { const column = columns[i]; const filterColumns = columns.slice(0, i); bindOneWay(selectionInputs[column].options, component, { transform: (component) => { const valueFilter = {}; filterColumns.forEach((fc) => { valueFilter[fc] = component[fc].result; }); return getUniqueValues(table, valueFilter, column); } }); } return component; }35:T589,function createScenarioSelection() { // Helper function to create dynamic selection inputs. const createDynamicSelect = juice(Inputs.select, { options: "[0]", result: "[1].value" }); const baseScenarioSelection = createDynamicSelect(scenarios, { label: "Base Scenario", format: ({ name }) => name }); const otherScenarioSelection = createDynamicSelect(scenarios, { label: "Other Scenario", format: ({ name }) => name }); let component = view`

Scenario Selection ${["base", baseScenarioSelection]} ${["other", otherScenarioSelection]}

`; bindOneWay(otherScenarioSelection.options, baseScenarioSelection, { transform: ({ result }) => { const updatedOptions = scenarios.filter( (scenario) => scenario.code !== result.code ); if (baseScenarioSelection.result === result) { baseScenarioSelection.result = updatedOptions[0]; } return updatedOptions; } }); bindOneWay(baseScenarioSelection.options, otherScenarioSelection, { transform: ({ result }) => { const updatedOptions = scenarios.filter( (scenario) => scenario.code !== result.code ); if (baseScenarioSelection.result === result) { baseScenarioSelection.result = updatedOptions[0]; } return updatedOptions; } }); return component; }36:T759,{ // Figure out what the first symbol layer is so that the data layer can be // placed before it. const layers = map.getStyle().layers; let firstSymbolId; for (const layer of layers) { if (layer.type === "symbol") { firstSymbolId = layer.id; break; } } // Add the geojson data as a map source and layer. map.addSource("data", { type: "geojson", data: mapDataSource }); map.addLayer( { id: "data-layer", type: "fill", source: "data", paint: { "fill-color": [ "interpolate", ["linear"], ["get", dataControls.options.isAbsolute ? "Absolute" : "Relative"], ...colourSpec ], "fill-opacity": 0.6 } }, firstSymbolId ); // Create the data popups. let popup = new maplibregl.Popup(); const dataLayerClickHander = (e) => { const properties = e.features[0].properties; const region = properties.Region; const baseScenario = selectedScenarios.base.name; const baseScenarioValue = d3.format(".2f")(properties.Base); const otherScenario = selectedScenarios.other.name; const otherScenarioValue = d3.format(".2f")(properties.Other); const value = dataControls.options.isAbsolute ? d3.format(".2f")(properties.Absolute) : d3.format(".1%")(properties.Relative); popup .setLngLat(e.lngLat) .setHTML( ` Region: ${region}
${baseScenario}: ${baseScenarioValue}
${otherScenario}: ${otherScenarioValue}
Difference: ${value} ` ) .addTo(map); }; map.on("click", "data-layer", dataLayerClickHander); // Clean up resources on invalidation. invalidation.then(() => { popup.remove(); map.off("click", "data-layer", dataLayerClickHander); map.removeLayer("data-layer"); map.removeSource("data"); }); }37:T12c3,stylesheet = html``38:[{"id":"fa8bc2f5b3ed4245767f076985793ca7e5e902a10e6790ac5b50c292a2e6dee98ffb9976e6172bf1c48c4419b43cf92d1235ef5db4e1132c6c850af73bdb39e7","href":"https://static.observableusercontent.com/files/fa8bc2f5b3ed4245767f076985793ca7e5e902a10e6790ac5b50c292a2e6dee98ffb9976e6172bf1c48c4419b43cf92d1235ef5db4e1132c6c850af73bdb39e7","name":"test@10.parquet","type":"application/octet-stream","lastModified":1685938932173.693,"size":3313797},{"id":"9c558665a5e1f689e3fc795e3b0ef2b6a881e5985300917935e381a3d14814ff688ed2619b4f41fdb087bf526bfe97d61aa6dfca65e625d6bddfe424fbbef09d","href":"https://static.observableusercontent.com/files/9c558665a5e1f689e3fc795e3b0ef2b6a881e5985300917935e381a3d14814ff688ed2619b4f41fdb087bf526bfe97d61aa6dfca65e625d6bddfe424fbbef09d","name":"test@11.parquet","type":"application/octet-stream","lastModified":1685940330372.189,"size":3250382},{"id":"653ee52a89980753f620ddf9b0cf31a526bdd4b3e6f8f13fd6b0107064b5ba913aaee68b7bcc141140ada65f52c8bcae6c3c6a30e75ecf62a0011a24a7e7fe08","href":"https://static.observableusercontent.com/files/653ee52a89980753f620ddf9b0cf31a526bdd4b3e6f8f13fd6b0107064b5ba913aaee68b7bcc141140ada65f52c8bcae6c3c6a30e75ecf62a0011a24a7e7fe08","name":"test.parquet","type":"application/octet-stream","lastModified":1685078594417.172,"size":5314499},{"id":"18d0844a69c344a650e6c3a7ceca40445f874bf593564e72567a9f115ec409a831601f7d11efb53aa4a3f29b9bc672098f3e97b2f616c58dbe9fe0a152d8fd92","href":"https://static.observableusercontent.com/files/18d0844a69c344a650e6c3a7ceca40445f874bf593564e72567a9f115ec409a831601f7d11efb53aa4a3f29b9bc672098f3e97b2f616c58dbe9fe0a152d8fd92","name":"test.json","type":"application/json","lastModified":1685079650758.747,"size":5925783},{"id":"c9acae6775260b39b8a067741d9880d3cc8377bafae76ff3fe4b0ed8d128daec75c2432fbca49c25709c17a3c8079c60bf24af835c0da7b2f92aafabd4fa950f","href":"https://static.observableusercontent.com/files/c9acae6775260b39b8a067741d9880d3cc8377bafae76ff3fe4b0ed8d128daec75c2432fbca49c25709c17a3c8079c60bf24af835c0da7b2f92aafabd4fa950f","name":"output.json","type":"application/json","lastModified":1685333774947.961,"size":4445929},{"id":"827bc179d2f1bd5e764e4283e8fd31d8751234c51f6c3875ba104f1178e757e648b0a33febd4f8079ba721133c331fc1dad134696f3b13e339bf39291a22f9f6","href":"https://static.observableusercontent.com/files/827bc179d2f1bd5e764e4283e8fd31d8751234c51f6c3875ba104f1178e757e648b0a33febd4f8079ba721133c331fc1dad134696f3b13e339bf39291a22f9f6","name":"test@1.parquet","type":"application/octet-stream","lastModified":1685333960451.259,"size":55383},{"id":"9f444c374206428cfdd98124db6cbe58730f6599d6b70acb59591a1a9822779c49872a46b754ca268aaabbb18fe3c9f9a16e015ae0e0b23aca4ffaf98dc6068e","href":"https://static.observableusercontent.com/files/9f444c374206428cfdd98124db6cbe58730f6599d6b70acb59591a1a9822779c49872a46b754ca268aaabbb18fe3c9f9a16e015ae0e0b23aca4ffaf98dc6068e","name":"test@2.parquet","type":"application/octet-stream","lastModified":1685334872941.574,"size":3805704},{"id":"8b229caf22931028cfab13358faa5b37ddd207e15509621f87b66a5d0050815f9db726c380397ea162c5b06344312b8bfaefd8b4fe45d5b8833e5946542bae8a","href":"https://static.observableusercontent.com/files/8b229caf22931028cfab13358faa5b37ddd207e15509621f87b66a5d0050815f9db726c380397ea162c5b06344312b8bfaefd8b4fe45d5b8833e5946542bae8a","name":"test@3.parquet","type":"application/octet-stream","lastModified":1685337469357.429,"size":3122500},{"id":"d83683382cc8fc573c8944d1339da70615bceab0f088d299875c57d9b4471d7897d0b12825c0026331db567ab1beb23859766335787c4f5b6304169f4c14d389","href":"https://static.observableusercontent.com/files/d83683382cc8fc573c8944d1339da70615bceab0f088d299875c57d9b4471d7897d0b12825c0026331db567ab1beb23859766335787c4f5b6304169f4c14d389","name":"output@1.json","type":"application/json","lastModified":1685338107475.272,"size":4449183},{"id":"7453fc9ed169529ed4dd4e80ddcd45f46e062caa20e82de1e49607e07286968e805bd8d8377d6eef5f9a8db1b479f47f3e0b15acede1f647ff6c6d7f99a81262","href":"https://static.observableusercontent.com/files/7453fc9ed169529ed4dd4e80ddcd45f46e062caa20e82de1e49607e07286968e805bd8d8377d6eef5f9a8db1b479f47f3e0b15acede1f647ff6c6d7f99a81262","name":"test@4.parquet","type":"application/octet-stream","lastModified":1685338852118.058,"size":3109624},{"id":"84f1d831ac35161f7d1063f951a53e98843f12357a004a358b71cd26895ba680d88157a20c2d920763e7e63332da5fb288e55977c301955b10ca3680e76ff481","href":"https://static.observableusercontent.com/files/84f1d831ac35161f7d1063f951a53e98843f12357a004a358b71cd26895ba680d88157a20c2d920763e7e63332da5fb288e55977c301955b10ca3680e76ff481","name":"test@12.parquet","type":"application/octet-stream","lastModified":1686106079844.37,"size":3578759},{"id":"9e776e223d89dec388218596c89e0d0b097fb1a2cce169d94abc4540cc2e0d523a47677e7505d0dc8c4164c86c42364afb1f86ea74ab0619a8064e1ff9d3d2a6","href":"https://static.observableusercontent.com/files/9e776e223d89dec388218596c89e0d0b097fb1a2cce169d94abc4540cc2e0d523a47677e7505d0dc8c4164c86c42364afb1f86ea74ab0619a8064e1ff9d3d2a6","name":"test@8.parquet","type":"application/octet-stream","lastModified":1685595916189.935,"size":3081311},{"id":"fc0c3c43f87965c6dfee39ad7805a827e844135a7552f6b69f4247103a972fa35efa35ddd027fe9bbbe4969b4d1d641278064096b07d3c99afd045bc4b696b53","href":"https://static.observableusercontent.com/files/fc0c3c43f87965c6dfee39ad7805a827e844135a7552f6b69f4247103a972fa35efa35ddd027fe9bbbe4969b4d1d641278064096b07d3c99afd045bc4b696b53","name":"test@9.parquet","type":"application/octet-stream","lastModified":1685599676918.173,"size":3176807},{"id":"65173a2ca126c8a93eb33e59c19773f20347cfc264949fa9aa7fdf6a6348c540a5f562350e46132b553b2b997190221eb2e626bdaf5b59717860a63179c1b958","href":"https://static.observableusercontent.com/files/65173a2ca126c8a93eb33e59c19773f20347cfc264949fa9aa7fdf6a6348c540a5f562350e46132b553b2b997190221eb2e626bdaf5b59717860a63179c1b958","name":"test@5.parquet","type":"application/octet-stream","lastModified":1685410517115.352,"size":5486851},{"id":"45ea64fdb4e08935c09db0d31fa7827190a40cc61ffb6d28bf899bc12f4fc9d8ba53fb298ec24e510d136baefca59e283f7105fce286a85b8c249d0cdf8ee33c","href":"https://static.observableusercontent.com/files/45ea64fdb4e08935c09db0d31fa7827190a40cc61ffb6d28bf899bc12f4fc9d8ba53fb298ec24e510d136baefca59e283f7105fce286a85b8c249d0cdf8ee33c","name":"test@6.parquet","type":"application/octet-stream","lastModified":1685411010317.252,"size":3054179},{"id":"b4fe753f1e189879570607237c3408bd4378d881029d242e225b8dd5fe679fe6ed2add25be7db03bfba7140ba1db3c081043d17baeb938c62f9cb7f9b64baeea","href":"https://static.observableusercontent.com/files/b4fe753f1e189879570607237c3408bd4378d881029d242e225b8dd5fe679fe6ed2add25be7db03bfba7140ba1db3c081043d17baeb938c62f9cb7f9b64baeea","name":"test@7.parquet","type":"application/octet-stream","lastModified":1685411909864.211,"size":3062735},{"id":"4451106a79668b3f970837abccf598a268d13302f9e9ffa45257e69f1fbe236afa7a6b5023ae2d4ce5f08fcca276b139df289ac7851b49e5f576f002e88aaf81","href":"https://static.observableusercontent.com/files/4451106a79668b3f970837abccf598a268d13302f9e9ffa45257e69f1fbe236afa7a6b5023ae2d4ce5f08fcca276b139df289ac7851b49e5f576f002e88aaf81","name":"data4.parquet","type":"application/octet-stream","lastModified":1685002178405.03,"size":43736442},{"id":"0550dca7ecd294da6b404cdad6db03a0c0d5adf67a3f411d6f52d8d2e537ddcc3ca33d6d47ccb97e6deec46a206126b7ea9c878294920d9a36a4061efe4abdcb","href":"https://static.observableusercontent.com/files/0550dca7ecd294da6b404cdad6db03a0c0d5adf67a3f411d6f52d8d2e537ddcc3ca33d6d47ccb97e6deec46a206126b7ea9c878294920d9a36a4061efe4abdcb","name":"geometries.json","type":"application/json","lastModified":1685002178405.03,"size":7798446}] 2f:{"id":"6d16ddaa409c4a09","slug":null,"title":"IV UDS :: Regional Comparison Map","thumbnail":"8dc0317b2b6f75726178dbbad7d8d1cb29a098870c9d69fe2c5656a997e42f76","access_level":"public","create_time":"$D2023-05-25T08:09:38.405Z","update_time":"$D2023-06-07T02:47:54.271Z","view_time":null,"first_public_time":"$D2023-05-25T08:09:38.405Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"b8b49653f61623f1","login":"ktringuyen","name":"ktringuyen","avatar_url":"https://avatars-next.observableusercontent.com/d4181af5d64e221c05a65bc1b61eee96abe87d64f0b0839e0757f71641ba33c7","tier":"starter_2024","bio":""},"version":1354,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"eae8b26a5e6eeaf3","login":"kytringuyen","name":"Nguyen Ky Tri","avatar_url":"https://avatars-next.observableusercontent.com/b2a48bc07bad0bedc9d706e8f81618992e650a71116025706a3f296f78c66941","tier":null,"bio":"Engineer specialised in Data Science and Data Visualisation"}],"members":[{"type":"team","id":"b8b49653f61623f1","login":"ktringuyen","name":"ktringuyen","avatar_url":"https://avatars-next.observableusercontent.com/d4181af5d64e221c05a65bc1b61eee96abe87d64f0b0839e0757f71641ba33c7","tier":"starter_2024","role":"editor"},{"type":"individual","id":"eae8b26a5e6eeaf3","login":"kytringuyen","name":"Nguyen Ky Tri","avatar_url":"https://avatars-next.observableusercontent.com/b2a48bc07bad0bedc9d706e8f81618992e650a71116025706a3f296f78c66941","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"IV UDS :: Regional Comparison Map","cells":[{"id":0,"value":"# IV UDS :: Regional Comparison Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":630,"value":"Use this dashboard to inspect the difference between metric values across two chosen scenarios spatially. Note that you have the option of choosing **absolute** or **relative** comparisons. Each of these will make more sense depending on the metric chosen. Compare percentage values using the **absolute** option.\n\n_The maximum value of the colour ramp can be chosen manually. If you would like to keep this automatic, leave the maximum value as **zero** in the 'Visualisation Options' controls. _","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":913,"value":"## Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":598,"value":"viewof dataControls = view`\n \n

\n ${[\"scenario\", createScenarioSelection()]}\n ${[\"options\", createMethodSelection()]}\n

${[\n \"metric\",\n createCascadingFilter(table, [\n \"Group\",\n \"Metric\",\n \"Boundaries\",\n \"Time Period\",\n \"Mode\"\n ])\n ]}

\n ${[\"extent\", createMapExtentControls()]}\n

\n ${[\"elemVis\", createElementVisControls()]}\n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"### Data Loading","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":424,"value":"**Metric Data**\n\nMetric data is derived from the raw metric CSVs produced by the custom VITM reporting process developed by the team. These are combined into a single table that categorises every value under a metric group, metric and boundary system. As well as time period and mode if relevant or not covered by the metric type itself.\n\nThe table itself is stored in a _[Parquet](https://parquet.apache.org/)_ file to improve query performance and reduce storage size. If stored as a CSV, the data would occupy roughly 80mb of space, exceeding Observable's attachment size limit. The equivalent Parquet file only occupies approximately 20mb. The `readParquet` function is used to read the parquet file into an _[Apache Arrow](https://arrow.apache.org/)_ representation, with the resulting object exposed as the `table`. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"readParquet = {\n const parquetWasm = await import(\n \"https://cdn.jsdelivr.net/npm/parquet-wasm@0.1.1/web.js\"\n );\n const init = parquetWasm.default;\n\n return async function getDataTable(file) {\n await init();\n const arrayBuffer = await file.arrayBuffer();\n const arr = new Uint8Array(arrayBuffer);\n const arrowIPC = parquetWasm.readParquet(arr);\n const dt = aq.fromArrow(arrowIPC);\n return dt;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"table = readParquet(FileAttachment(\"test@12.parquet\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"From this table all of the scenario codes need to be extracted. This is currently achieved by naively extracting all of the columns that start with _'Y'_. Human-friendly versions of these codes are also generated to improve visualisation legibility. The results of this are stored in the `scenarios` array. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":467,"value":"function createNiceScenarioName(scenarioName) {\n const pattern = /^Y(\\d{4}).*S(\\d+)/;\n const matches = scenarioName.match(pattern);\n\n const names = {\n \"0\": \"SALUP\",\n \"1\": \"Compact City\",\n \"2\": \"Consolidated City\",\n \"3\": \"Dispersed City\",\n \"4\": \"Network of Cities\",\n \"5\": \"Distributed State\"\n };\n\n return `${matches[1]} ${names[matches[2]]}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"// scenarios = {\n// const codes = table.columnNames().filter((col) => col.startsWith(\"Y\"));\n// return codes.map((code) => {\n// return { code: code, name: createNiceScenarioName(code) };\n// });\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1320,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"**Spatial Boundaries**\n\nThe map view requires the geometry of each region system. These are attached to the notebook as a single _TopoJSON_ file and must be mapped to the boundary system names present in the table. The `getGeometry` function will return the equivalent GeoJSON representation of a specified boundary system using this data. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":457,"value":"// topojsonData = FileAttachment(\"geometries.json\").json()\ntopojsonData = FileAttachment(\"output@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"geojsonData = topojson.feature(\n topojsonData,\n topojsonData.objects[selectedMetric.Boundaries]\n // \n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"### UI Elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":394,"value":"**Cascading Metric Selection**\n\nMetrics are chosen using a dynamic, cascading filter of selection inputs. Items at the top of the list (such as _metric group_ or _metric_) directly determine the options available to the user for items below them. For example, if the user selects the _Demographic_ metric group, we do not want to present to them the option of choosing _Vehicle Hours Travelled_ as a metric option. This requires the data table to be inspected upon every change such that the list of available options is updated dynamically. \n\nThe `createCascadingFilter` function is used to create such a component from a data `table` and an array of `columns` used to perform the filtering. `resultsFromCascadingFilter` is used to extract the actual selections directly from the resulting object. The raw cascading filter emits other information surrounding the option lists that is not relevant but necessary to support the dynamic presentation. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":302,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"function resultsFromCascadingFilter(cascadingFilter) {\n return Object.keys(cascadingFilter).reduce((results, key) => {\n results[key] = cascadingFilter[key].result;\n return results;\n }, {});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"**Scenario Selection**\n\nScenario selection is driven by two selection inputs that allow the user to choose the _base_ and _other_ scenario. Comparison values are calculated as the _other_ scenario minus the _base_ scenario. This input is dynamic in that it will not allow the user to choose the same scenario for both inputs. \n\nThe `createScenarioSelection` function is used to create such a component and the `resultsFromScenarioSelection` is used to extract the actual selections directly. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":494,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"function resultsFromScenarioSelection(scenarioSelection) {\n return Object.keys(scenarioSelection).reduce((results, key) => {\n results[key] = scenarioSelection[key].result;\n return results;\n }, {});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"**Visualisation Options**\n\nA simple comparison method component that matches the formatting of the scenario and metric selection components. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":776,"value":"function createMethodSelection() {\n return view`\n \n

\n Visualisation Options\n ${[\n \"isAbsolute\",\n Inputs.radio(\n new Map([\n [\"Absolute\", true],\n [\"Relative\", false]\n ]),\n { label: \"Comparison Method\", value: true }\n )\n ]}\n ${[\n \"max\",\n Inputs.number([0, Infinity], {\n label: \"Maximum\",\n placeholder: \"0\",\n value: 0\n })\n ]}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"**Data Control Group**\n\nThe data control group sits on top of the map and combines the metric, scenario and visualisation options components. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1107,"value":"selectedMetric = resultsFromCascadingFilter(dataControls.metric)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"selectedScenarios = resultsFromCascadingFilter(dataControls.scenario)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"selectedVisOptions = dataControls.options","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"**Map Extent Controls**\n\nWe need to be able to give the user the ability to save the current map view as an image. It is also desirable to be able to set the current centre and zoom level such that consistent map extents can be returned to. An event listener with a debounce is added to this component to create a two-way binding between the values and the map extent. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":976,"value":"function createMapExtentControls() {\n let component = view`\n \n

\n Map Extent\n ${[\n \"lng\",\n Inputs.number([-180, 180], {\n label: \"Centre Longitude\",\n value: startingCenter[0]\n })\n ]}\n ${[\n \"lat\",\n Inputs.number([-85, 85], {\n label: \"Centre Latitude\",\n value: startingCenter[1]\n })\n ]}\n ${[\n \"zoom\",\n Inputs.number([0, 22], {\n label: \"Zoom\",\n value: startingZoom\n })\n ]}\n

\n `;\n\n return component;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1071,"value":"{\n const updateMap = () => {\n let timeout;\n\n const later = () => {\n clearTimeout(timeout);\n map.jumpTo({\n center: [mapControls.extent.lng, mapControls.extent.lat],\n zoom: mapControls.extent.zoom\n });\n };\n\n clearTimeout;\n timeout = setTimeout(later, 500);\n };\n\n viewof mapControls.addEventListener(\"input\", updateMap);\n\n invalidation.then(() => {\n viewof mapControls.removeEventListener(\"input\", updateMap);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1228,"value":"**Element Visibility Controls**\n\nWe need to be able to give the user the ability to hide place labels as well as roads at their discretion. This is exposed as a set of toggles that are hooked up to layout visibility. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1234,"value":"function createElementVisControls() {\n let component = view`\n \n

\n Element Visibility\n

\n ${[\"showLabels\", Inputs.toggle({ label: \"Labels\", value: true })]}\n `;\n\n return component;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"function updateVisibility() {\n const labelFilter = [\"places_\", \"physical_\", \"roads_labels\"];\n const vis = (bool) => (bool ? \"visible\" : \"none\");\n\n const layers = map.getStyle().layers;\n console.log(layers);\n for (const layer of layers) {\n if (labelFilter.some((filter) => layer.id.includes(filter))) {\n map.setLayoutProperty(\n layer.id,\n \"visibility\",\n vis(mapControls.elemVis.showLabels)\n );\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1276,"value":"{\n viewof mapControls.addEventListener(\"input\", updateVisibility);\n invalidation.then(() =>\n viewof mapControls.removeEventListener(\"input\", updateVisibility)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"### Data Transformation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":661,"value":"Once the user has chosen two scenarios to compare with a particular metric a data table must be constructed corresponding with this selection. This is achieved using queries driven by the _[Arquero](https://uwdata.github.io/arquero/)_ library. Absolute and relative comparisons between the two chosen scenarios are created simultaneously to allow for more flexible visualisation. The resulting data table is then joined onto the corresponding boundary geometry data, acting as the data source for the MapLibre map view. This final GeoJSON representation is stored in `mapDataSource`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":825,"value":"transformedData = {\n const baseScenario = selectedScenarios.base.code;\n const otherScenario = selectedScenarios.other.code;\n const filter = selectedMetric;\n\n let selectedData = table;\n\n // Filter the table across the provided metric filter values.\n for (const [key, value] of Object.entries(filter)) {\n selectedData = selectedData.filter(\n `d => op.equal(d[\"${key}\"], \"${value}\")`\n );\n }\n\n // Keep only the region column as well each selected scenario.\n selectedData = selectedData.select({\n [baseScenario]: \"Base\",\n [otherScenario]: \"Other\",\n Region: \"Region\"\n });\n\n // Calculate the absolute and relative differences between scenarios.\n selectedData = selectedData.derive({\n Absolute: (d) => d.Other - d.Base,\n Relative: (d) => d.Other / d.Base - 1\n });\n\n return selectedData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1334,"value":"transformedData.objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"mapDataSource = {\n const filter = resultsFromCascadingFilter(dataControls.metric);\n const dataObjects = transformedData.objects();\n\n const joinedFeatures = geojsonData.features.map((feature) => {\n const matchingData = dataObjects.find(\n (row) => row.Region === feature.properties.region\n );\n return {\n ...feature,\n properties: {\n ...matchingData\n }\n };\n });\n\n return { type: \"FeatureCollection\", features: joinedFeatures };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"### Data Visualisation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1187,"value":"**Map Initialisation**\n\nThe PMTile protocol needs to be initialised so that the notebook can read them from a remote source. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1190,"value":"{\n let protocol = new pmtiles.Protocol();\n maplibregl.addProtocol(\"pmtiles\", protocol.tile);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"**Map Starting Location**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1143,"value":"startingCenter = [145.56834915074228, -36.561144224343465]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1147,"value":"startingZoom = 6.3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"**Colour Scale**\n\nThe primary means of communicating metric comparison outcomes are the colours used to drive the chloropleth map. _[D3](https://d3js.org/)'s_ _[CIELAB](https://en.wikipedia.org/wiki/CIELABcolorspace)_ color space interpolation function is used to generate this, graduating from a manually chosen orange (negative change) to blue (positive change) with a dark grey in the centre appropriate for the dark basemap styling. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":723,"value":"colourRamp = d3.piecewise(d3.interpolateLab, [\n \"#f76436\",\n \"#9e482c\",\n \"#1f1f1f\",\n \"#286b94\",\n \"#30a8f2\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"ramp(colourRamp)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"For convenience, calculate what the absolute maximum value is from either the extent of the selected data or take this from the user input. This will react to whether the user has selected to show absolute or relative comparisons. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":822,"value":"maxValue = {\n if (dataControls.options.max === 0) {\n return Math.max(\n ...d3\n .extent(transformedData, (d) =>\n dataControls.options.isAbsolute ? d.Absolute : d.Relative\n )\n .map(Math.abs)\n );\n } else {\n return dataControls.options.max;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"By default, the colour ramp will range between the negative and positive versions of the absolute maximum extent of the data being visualised. For example, if the data ranges from -20 to 10, then the colour ramp will be mapped to -20 to 20. The user has the option of overriding what this maximum threshold value depending on their requirements. The `createScale` function returns a `d3` scale function using a specified maximum value. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":740,"value":"colourScale = d3.scaleSequential([-maxValue, maxValue], colourRamp)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"MapLibre requires a pairwise list of values mapped to hex colour codes to drive colour interpolation within the map view. See the [MapLibre documentation](https://maplibre.org/maplibre-gl-js-docs/style-spec/expressions/#ramps-scales-curves) for a full explanation of this syntax. The `colourSpec` cell creates this specialised representation based on the implemented scale. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":747,"value":"colourSpec = {\n const domain = [-maxValue, maxValue];\n\n const numSteps = 10;\n const values = Array.from(\n { length: numSteps },\n (_, i) => (i * (maxValue + maxValue)) / (numSteps - 1) - maxValue\n );\n\n const hexCodes = values.map((v) => d3.color(colourScale(v)).formatHex());\n\n const combinedArray = values.reduce((acc, val, i) => {\n acc.push(val);\n acc.push(hexCodes[i]);\n return acc;\n }, []);\n\n return combinedArray;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":882,"value":"**Map Layer**\n\nRendering of the actual map layer involves several steps:\n\n1. Add the GeoJSON data source (`mapDataSource`) to the MapLibre map instance.\n2. Determine the ID of the first symbol layer such that the data layer can be slotted in before this. This enables the data layer to be placed underneath things like suburb text labels rather than obscuring them.\n3. Add the data layer itself, specifying the colour interpolation specification in order to create the chloropleth styling.\n4. Add the popup handler such that relevant data is surfaced to the user when a region is clicked.\n\nOn cell invalidation, resources are cleaned up to avoid catastrophic leaks that could crash the browser page. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":886,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"import { aq, op } from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"import { juice } from \"@tomlarkworthy/juice\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"import { view, variable, bindOneWay, cautious } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"import { ramp } from \"@mbostock/ramp\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"maplibregl = {\n const gl = await require(\"maplibre-gl@2.4.0\");\n const href = await require.resolve(\"maplibre-gl@2.4.0/dist/maplibre-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1181,"value":"pmtiles = import(\"https://unpkg.com/pmtiles@2.7.1/dist/index.mjs?module\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1184,"value":"pmtilesLayers = import(\n \"https://unpkg.com/protomaps-themes-base@1.3.0/dist/index.mjs?module\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"import { theme } from \"@ajar/css\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"### Styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":386,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"theme({\n colors: { primary: \"#333333\", secondary: \"#2c3e50\", accent: \"#ff4d00\" },\n marker: \"lower-roman\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 30:"$2f:body"