31:Tda3,renderedMap = { // -- create array of values to get max and min: let p50 = new Array(); let mp50 = new Map(); let mPop = new Map(); // for (let [key, value] of mapCancer) { // p50.push(+value.p50.valueOf()); // -- the + makes it numeric! // mp50.set(+value.p50.valueOf()); // -- the + makes it numeric! // } // -- With ColorBrewer : get range of values in p50: let myExtent = d3.extent(p50); // console.log("extent:", typeof myExtent, "-->", myExtent, myExtent[0]); // -- getCB is a function that returns a colour : let getCB = d3 .scaleSequential() .domain(myExtent) .interpolator(d3.interpolatePuRd); // -- function called by geoShape : const dataColour = (att) => { // data.filter(); // inefficient // let dataObject = mapCancer.get(att); // -- returns undefined if att is not a key in dataMap. // let dataObject = mp50.get(att); let dataObject = mapCensus.get(att); let theColour = `rgb(232, 232, 232)`; if (dataObject === undefined) { } else { // console.log("colour:", att, dataObject); let pop = dataObject.Tot_P_P; p50.push(pop); // console.log("colour:", dataObject, pop); // -- checking and returning a colour: // const theNumber = dataObject ? dataObject.p50 : `????`; const theNumber = dataObject ? pop : `????`; // -- not undefined : undefined // const theColour = dataObject ? getCB(dataObject.p50) : `rgb(232, 232, 232)`; // -- V1 : works! // const theColour = dataObject // ? getCBcut(dataObject.p50, dataObject.Prob) // : `rgb(232, 232, 232)`; const pop255 = mapp(pop, 0, popMax, 232, 0); theColour = `rgb(232, ${pop255}, ${pop255})`; // console.log("colour:", att, theNumber, theColour, typeof dataObject); } return theColour; }; // -- define projection : // let proj = d3proj.geoBaker().scale(150); // let proj = d3proj.geoCylindricalStereographic().scale(150); let proj = d3proj.geoBaker(); // -- create renderer : let r = new Renderer(800, 800, "canvas") .setProjection(proj) .clear(`rgb(250,250,250)`); let myScale = d3.scaleLinear().domain(d3.extent(p50)).range([0, 255]); // -- returns a d3Function that will scale something - like proc::map() // -- render the map : r.stroke("white") .strokeWidth(0.25) .geoShape(geoData, "properties.SA2_5DIG16", dataColour); // -- circles : r.fill("rgba(32,32,32,0.01)").stroke("rgba(32,32,32,0.25)"); if (showCircles) { for (const [k, v] of geoMap.entries()) { // console.log(v); if (v.cent !== undefined) { let rad = 0.5; // -- size by population? if (sizeByPop) { let datPop = mapCensus.get(k); if (datPop === undefined) { } else { // console.log("colour:", att, dataObject); let pop = datPop.Tot_P_P; rad = Math.sqrt(mapp(pop, 0, popMax, 0, popSizing)); } } // -- size by area? if (sizeByArea) { rad = 0.05 + Math.sqrt(mapp(v.area, 0, areaMax, 2 * popSizing, 0)); } let dX = g2() - 100; let dY = g2() - 100; dX = ranGen(addJitter) - addJitter / 2; dY = ranGen(addJitter) - addJitter / 2; const x = useJitter ? v.cent[0] + dX : v.cent[0]; const y = useJitter ? v.cent[1] + dY : v.cent[1]; r.ellipse(x, y, rad); } } } // -- return the rendered canvas : return r.render(); }32:[{"id":"04befca823417b7151c83360e21a8ae07cc5690c71ad162409f138827b0c268ef0103a326cf714436a1a66274ef1b83fd58f939bf1f8c47bf000ef4e2f7ea25a","href":"https://static.observableusercontent.com/files/04befca823417b7151c83360e21a8ae07cc5690c71ad162409f138827b0c268ef0103a326cf714436a1a66274ef1b83fd58f939bf1f8c47bf000ef4e2f7ea25a","name":"SA2_2016_AUST.json","type":"application/json","lastModified":1655273991532.765,"size":1167481},{"id":"8f7834b3d3c01660609766667c252e229c48246d69c2d87bb5fc9f22e9c7b031958eace3d9fa85647b586bde4fcfdba6b64fc2961eac0d2b66ea85d7e9412455","href":"https://static.observableusercontent.com/files/8f7834b3d3c01660609766667c252e229c48246d69c2d87bb5fc9f22e9c7b031958eace3d9fa85647b586bde4fcfdba6b64fc2961eac0d2b66ea85d7e9412455","name":"SIR Downloadable Data.csv","type":"text/csv","lastModified":1655273991532.765,"size":10005074},{"id":"64f314bfbf5f1f7a2721e57d3b9112670dac9c4c9b1b1f4aaae7b884ae43da85564f36d769b797f60034cdb22bf6aec4cb50fe37b2a0b4a2b53d69b850fe8a81","href":"https://static.observableusercontent.com/files/64f314bfbf5f1f7a2721e57d3b9112670dac9c4c9b1b1f4aaae7b884ae43da85564f36d769b797f60034cdb22bf6aec4cb50fe37b2a0b4a2b53d69b850fe8a81","name":"2011Census_B01_AUST_SA2_short.csv","type":"text/csv","lastModified":1655275333049.814,"size":969404},{"id":"9ce3e6521d35dba8f990d572a86a477f529c5289d36855c9ae24b5184a1d722fe6ade15b9174bf36573a7d14492bf467f57885e626f6800866d99662d3f429b6","href":"https://static.observableusercontent.com/files/9ce3e6521d35dba8f990d572a86a477f529c5289d36855c9ae24b5184a1d722fe6ade15b9174bf36573a7d14492bf467f57885e626f6800866d99662d3f429b6","name":"2016Census_G01_AUS_SA2.csv","type":"text/csv","lastModified":1655274789759.176,"size":1015056}] 2f:{"title":"Australian Cancer Map - Leiden Fork!","cells":[{"id":0,"value":"# Australian Cancer Map - Leiden Fork!\n## Playground for vis design with CK's data from the **Australian Cancer Atlas** ...","pinned":false,"hidden":false,"mode":"md"},{"id":439,"value":"---\n\n### Cancer Data per SA2 area\n\nCancer data (estimates) from https://atlas.cancer.org.au/the-data/geographical-data","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"datCancer = d3.csvParse(\n // await FileAttachment(\"ltla_2021-12-16@2.2021-12-16.csv\").text()\n // await FileAttachment(\"ltla_2021-12-20.4vars.csv\").text()\n await FileAttachment(\"SIR Downloadable Data.csv\").text()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"### Testing Data & Filters ...","pinned":false,"hidden":false,"mode":"md"},{"id":681,"value":"_Filter out one form of cancer for one sex - what do we get?_","pinned":false,"hidden":false,"mode":"md"},{"id":679,"value":"datCancerF = datCancer.filter(\n (o) => o.Cancer_name === \"Melanoma\" && o.Sex_name === \"Persons\"\n)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"Converting from an array of objects into a **Map** gives us objects containing values accessible by the geographic area key.","pinned":false,"hidden":false,"mode":"md"},{"id":677,"value":"mapCancer = {\n const m = new Map();\n // map.set(key, value) – stores the value by the key.\n\n let i = 0;\n for (const obj of datCancerF) {\n i++;\n m.set(obj.SA2_code, obj);\n // if (i < 10) console.log(i, obj, obj.SA2_code, dataMap.get(obj.SA2_code));\n }\n return m;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"E.g. SA2 area **11101** is `${mapCancer.get(\"11101\").SA2_name}`, which has a _Prob_ of `${mapCancer.get(\"11101\").Prob}`","pinned":false,"hidden":false,"mode":"md"},{"id":425,"value":"We can get an item from the dataMap() _Map_ like this ","pinned":false,"hidden":false,"mode":"md"},{"id":391,"value":"exampleDataItem = mapCancer.get(\"11001\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":419,"value":"Or we might want to get all of the data that have particular characteristics - like _oo_ in the name - with a **filter** :","pinned":false,"hidden":false,"mode":"md"},{"id":400,"value":"// -- Filter\n\n// censusFilter = datCensus.filter((o) => o.SA2_MAINCODE_2016.includes(\"11001\"))\n// censusFilter = datCensus2011.filter((o) => o.region_id.includes(\"11001\"))\n\nooSANames = {\n let i = 0;\n let ooCount = 0;\n let ooArray = new Array();\n\n for (let v of mapCancer.values()) {\n if (v.SA2_name.includes(\"oo\")) {\n ooCount++;\n ooArray.push(v);\n console.log(i, ooCount, v.SA2_code, v.SA2_name);\n }\n i++;\n }\n return ooArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"---\n### Census Data \n\nData from : https://www.abs.gov.au/census/find-census-data/datapacks?release=2016&product=GCP&geography=SA2&header=S","pinned":false,"hidden":false,"mode":"md"},{"id":708,"value":"Note that **SA2 Codes have changed** from 2011 to 2016 as [described here](https://www.abs.gov.au/statistics/standards/australian-statistical-geography-standard-asgs-edition-3/jul2021-jun2026/main-structure-and-greater-capital-city-statistical-areas/statistical-area-level-2)!","pinned":false,"hidden":false,"mode":"md"},{"id":711,"value":"#### 2016","pinned":false,"hidden":false,"mode":"md"},{"id":696,"value":"datCensus2016 = FileAttachment(\"2016Census_G01_AUS_SA2.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":713,"value":"#### 2011","pinned":false,"hidden":false,"mode":"md"},{"id":716,"value":"datCensus2011 = FileAttachment(\"2011Census_B01_AUST_SA2_short.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":851,"value":"_We need to add the old code used for the cancer data to the census data ..._","pinned":false,"hidden":false,"mode":"md"},{"id":741,"value":"_Create census map with new 5-code id:_","pinned":false,"hidden":false,"mode":"md"},{"id":739,"value":"// Create census map with new 5-code id:\nmapCensus = {\n const m = new Map(); // <-- m.set(key, value) – stores the value by the key.\n\n for (const obj of datCensus2011) {\n const id = toID(obj.region_id);\n m.set(id, obj);\n }\n return m;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":722,"value":"// -- returns 5 number census ID from 9 number: clunky & unreliable!\nfunction toID(s) {\n return s.slice(0, 1) + s.slice(5, 9);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":724,"value":"TEST = toID(\"101011001\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"---\n\n### Spatial Data for SA2 areas\n\nSpatial data from file attachment at present ...","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"geoData = await FileAttachment(\"SA2_2016_AUST.json\")\n .json()\n .then((feats) => topojson.feature(feats, feats.objects[\"SA2_2016_AUST\"]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":914,"value":"TEST_geoData = geoData.features","pinned":true,"hidden":false,"mode":"ojs"},{"id":916,"value":"TEST_geoDataP = geoData.features[0].properties","pinned":true,"hidden":false,"mode":"ojs"},{"id":799,"value":"TEST_features = geoData.features[0].properties.SA2_5DIG16","pinned":true,"hidden":false,"mode":"ojs"},{"id":786,"value":"TEST_coordinates = geoData.features[0].geometry.coordinates","pinned":true,"hidden":false,"mode":"ojs"},{"id":810,"value":"TEST_area = d3.polygonArea(...TEST_coordinates)\n// const pCent = d3.polygonCentroid(poly)\n// const pArea = d3.polygonArea(poly);","pinned":true,"hidden":false,"mode":"ojs"},{"id":911,"value":"_We need a Map of geoData:_","pinned":false,"hidden":false,"mode":"md"},{"id":909,"value":"// -- geoData Map!\n// Create geoData map with new 5-code id:\ngeoMap = {\n const m = new Map(); // m.set(key, value) – stores the value by the key.\n\n const max = 10;\n let i = 0;\n for (const obj of geoData.features) {\n // console.log(\"o:\", obj);\n // console.log(\"o.p:\", obj.properties);\n // console.log(\"o.p:\", obj);\n const id5 = obj.properties.SA2_5DIG16;\n if (obj.geometry !== null) {\n const poly = obj.geometry.coordinates[0];\n const area = d3.polygonArea(poly);\n const cent = d3.polygonCentroid(poly);\n // -- throw some output for checking -->\n if (i < 10) {\n console.log(\"o.p.id5:\", id5, area, cent); // <-- works!\n }\n obj.id5 = id5;\n obj.area = area;\n obj.cent = cent;\n }\n m.set(id5, obj);\n i++;\n // if (i > 10) return;\n }\n return m;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1080,"value":"areaMax = [...geoMap.entries()].reduce((max, e) => {\n console.log(\"e1:\", e[1], \"max:\", max);\n if (e[1] === undefined || e[1].area === undefined) {\n return max;\n } else {\n return e[1].area > max ? e[1].area : max;\n }\n}, -9999)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1084,"value":"[...geoMap.entries()]","pinned":true,"hidden":false,"mode":"ojs"},{"id":447,"value":"Map this by using geoShape in Jo's renderer.\n\nArguments to geoShape are ...\n1. **json object** containing spatial data\n2. **name of json object property** that contains unique spatial identifier\n3. **colour function** to apply to create object specific colour for each geographic unit - _importantly the attribute value of the property listed in the second argument is passed to this, which allows us to link colour generation to the attribute data_.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1021,"value":"viewof popMax = Inputs.range([1000, 250000], {\n label: \"maxPop\",\n value: 40000,\n step: 1000\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"viewof useJitter = Inputs.toggle({ label: \"jitter?\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":973,"value":"viewof addJitter = Inputs.range([0, 20], {\n label: \"how much?\",\n step: 0.1,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1040,"value":"viewof showCircles = Inputs.toggle({ label: \"circles?\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"viewof sizeByPop = Inputs.toggle({ label: \"sizeByPop?\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1076,"value":"viewof sizeByArea = Inputs.toggle({ label: \"sizeBy 1/Area?\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"viewof popSizing = Inputs.range([0, 5], {\n label: \"how much?\",\n step: 0.1,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":976,"value":"g2 = {\n useJitter;\n return gaussian(100, addJitter);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1027,"value":"ranGen = {\n return makeRandomGenerator(\"lorentz\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"---\n### Data Munge\n\n_Stuff to mix and match data ..._","pinned":false,"hidden":false,"mode":"md"},{"id":756,"value":"TEST_d3centroid = {\n const poly = [\n [148.55128637200673, -36.10400631381554],\n [148.55495737756803, -36.145674384801225],\n [148.62225914619205, -36.165440008217516],\n [148.62531831749314, -36.10293790173898],\n [148.69935026297952, -36.07676180586336],\n [148.69262008611713, -36.12270352515527],\n [148.73238931303132, -36.131785027805996],\n [148.78745439645095, -36.1974923705142],\n [148.80703309277794, -36.17719254105963]\n ];\n\n const pCentroid = d3.polygonCentroid(poly);\n return pCentroid;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":814,"value":"TEST_d3area = {\n const poly = [\n [148.55128637200673, -36.10400631381554],\n [148.55495737756803, -36.145674384801225],\n [148.62225914619205, -36.165440008217516],\n [148.62531831749314, -36.10293790173898],\n [148.69935026297952, -36.07676180586336],\n [148.69262008611713, -36.12270352515527],\n [148.73238931303132, -36.131785027805996],\n [148.78745439645095, -36.1974923705142],\n [148.80703309277794, -36.17719254105963]\n ];\n\n const pArea = d3.polygonArea(poly);\n return pArea;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":379,"value":"---\n\n## Working things out ...\n\nYou can ignore this - tests and sandbox!","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"function getCol() {\n return \"rgb(255, 128, 64)\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"getCol()","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"k = () => `rgb(255, 128, 64)`","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"z = k()","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"## d3 Tests!","pinned":false,"hidden":false,"mode":"md"},{"id":267,"value":"d3.extent() just gets us max and min of an array :","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"dE = d3.extent([0, 32, 33, 34, 56, 100])","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"d3.scaleLinear() gives us a function that takes a start and end point (array) and then will map to this - effectively lerp() in _Processing_ :","pinned":false,"hidden":false,"mode":"md"},{"id":254,"value":"dSLin = {\n // let dS = d3.scaleLinear([32, 36]);\n let dS = d3.scaleLinear(dE);\n console.log(\"dSLin:\", dS);\n return dS;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"So here we can use dSLin, which I defined above ...","pinned":false,"hidden":false,"mode":"md"},{"id":281,"value":"dSLin(0.975)","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"d3.scaleSequential() is just about the same, but it has methods that allow you to use _ColorBrewer_.","pinned":false,"hidden":false,"mode":"md"},{"id":293,"value":"dSSeq = {\n // let dS = d3.scaleLinear([32, 36]);\n let dS = d3.scaleSequential(dE);\n console.log(\"dSSeq:\", dS);\n return dS;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"dSSeq(0.975)","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"For _ColorBrewer_, do this :","pinned":false,"hidden":false,"mode":"md"},{"id":263,"value":"cB = d3.scaleSequential().domain(dE).interpolator(d3.interpolatePuRd)","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"aColour = cB(0.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":619,"value":"#### Globals","pinned":false,"hidden":false,"mode":"md"},{"id":641,"value":"probStart = 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"ys = new Array()","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"line = new Array()","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"### Functions","pinned":false,"hidden":false,"mode":"md"},{"id":537,"value":"function constrain(z, min, max) {\n return Math.min(Math.max(z, min), max);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"function round(num, dec) {\n num = Math.round(num + \"e\" + dec);\n return Number(num + \"e-\" + dec);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"// let value = arr.reduce(function(accumulator, item, index, array) {\n\nfunction getMean(arr) {\n let result =\n arr.sort().reduce((sum, val, index, array) => {\n // console.log(index, \":\", sum, \"+\", val, \"=\", sum + val);\n return sum + val;\n }, 0) / arr.length;\n // console.log(\" --> \", result);\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"getMean([12, 12, 14, 13, 11, 10])","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"// -- Processing style map function:\nfunction mapp(z, inLo, inHi, outLo, outHi) {\n var inRng = inHi - inLo;\n var outRng = outHi - outLo;\n var val = outLo + outRng * ((z - inLo) / parseFloat(inRng));\n return parseFloat(val);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"import { Renderer } from \"@jwolondon/renderer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"d3proj = require(\"d3-geo@2\", \"d3-geo-projection@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"import { gaussian } from \"@jsndyks/useful-functions-basic\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1024,"value":"import { makeRandomGenerator } from \"@forresto/random-seed\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":470,"value":"### Perlin","pinned":false,"hidden":false,"mode":"md"},{"id":474,"value":"import { octave, perlin2 } from \"@mbostock/perlin-noise\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"#### Observable Magic!","pinned":false,"hidden":false,"mode":"md"},{"id":581,"value":"// -- https://observablehq.com/@observablehq/synchronized-inputs\nfunction setSlider(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}