2b:null 2c:["$","title",null,{"children":"Ronan's second exercise on Observable: Classification and Colors | Ronan Kleu | Observable"}] 31:T5a4,function showScaleGrouping(data, scales) { const margins = { left: 130 }; const x = d3 .scaleLinear() .domain(d3.extent(data)) .range([margins.left, width - 5]); const r = 3; const rectHeight = 10; const chart = svg` `; return chart; }32:[{"id":"7f63cd60bd780fb581d9a0869fc0fa88e96e3b42d72a56a1b4dd371f15cfb3cd74b48884b9b96cade4aec2653338f9a9a264ff95ed638e2327f10a3350c6ce82","href":"https://static.observableusercontent.com/files/7f63cd60bd780fb581d9a0869fc0fa88e96e3b42d72a56a1b4dd371f15cfb3cd74b48884b9b96cade4aec2653338f9a9a264ff95ed638e2327f10a3350c6ce82","name":"Alaska.json","type":"application/json","lastModified":1676847321499.899,"size":25543},{"id":"cebcca49f80541efc6820907fd1b3096d5c95574ddbbdac4d57fe6bc342d89026ccd851d16cc186eee115565d800dfe8cb3589069d3d4dd16fdcbcc75db6dd3b","href":"https://static.observableusercontent.com/files/cebcca49f80541efc6820907fd1b3096d5c95574ddbbdac4d57fe6bc342d89026ccd851d16cc186eee115565d800dfe8cb3589069d3d4dd16fdcbcc75db6dd3b","name":"Alaska@1.csv","type":"text/csv","lastModified":1676847321499.899,"size":8290},{"id":"65c577da5ffc06c584ca6291c8d243dfcc07ee638239ed16af93cfb3dc04446916949e3469d624474471ea3e1fa3c4e0a11033cc7be94c9688faf03c9bf2d185","href":"https://static.observableusercontent.com/files/65c577da5ffc06c584ca6291c8d243dfcc07ee638239ed16af93cfb3dc04446916949e3469d624474471ea3e1fa3c4e0a11033cc7be94c9688faf03c9bf2d185","name":"Georgia.json","type":"application/json","lastModified":1676848246316.574,"size":1278376},{"id":"6fb5373bd8de4ac215d714ba97c1f0a10a15e52d7f6883ff2c1b699c189f466ca65d09ebc909a6b1311752b12b7e29594f1f57fc1b1182d2b83489d8fc44c032","href":"https://static.observableusercontent.com/files/6fb5373bd8de4ac215d714ba97c1f0a10a15e52d7f6883ff2c1b699c189f466ca65d09ebc909a6b1311752b12b7e29594f1f57fc1b1182d2b83489d8fc44c032","name":"FoodAccessResearchAtlasData2019 (1).csv","type":"text/csv","lastModified":1676848255580.698,"size":1294369},{"id":"b3a22cc2d2c6d128133ba4775f62375e966a4b15fbb1bf5befffc108a638535299fc118279cadb04d54232a8ff27728379fcfbaf4d1fccc3572ee575ac4cfac6","href":"https://static.observableusercontent.com/files/b3a22cc2d2c6d128133ba4775f62375e966a4b15fbb1bf5befffc108a638535299fc118279cadb04d54232a8ff27728379fcfbaf4d1fccc3572ee575ac4cfac6","name":"FoodAccessResearchAtlasData2019.numbers","type":"application/zip","lastModified":1676848488620.945,"size":2948003},{"id":"6fb5373bd8de4ac215d714ba97c1f0a10a15e52d7f6883ff2c1b699c189f466ca65d09ebc909a6b1311752b12b7e29594f1f57fc1b1182d2b83489d8fc44c032","href":"https://static.observableusercontent.com/files/6fb5373bd8de4ac215d714ba97c1f0a10a15e52d7f6883ff2c1b699c189f466ca65d09ebc909a6b1311752b12b7e29594f1f57fc1b1182d2b83489d8fc44c032","name":"FoodAccessResearchAtlasData2019.csv","type":"text/csv","lastModified":1676848541632.638,"size":1294369}] 2f:{"id":"2dd5132aaca3ea53","slug":null,"title":"Ronan's second exercise on Observable: Classification and Colors","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-02-19T22:55:21.499Z","update_time":"$D2023-04-23T01:44:43.064Z","view_time":null,"first_public_time":"$D2023-02-19T22:55:21.499Z","has_unpublished_edits":null,"fork":{"id":"c68fb87dffeeb9bc","slug":"second-exercise-on-observable","title":"Second Exercise on Observable: Classification and Colors","owner":{"id":"22130e106df70095","login":"geoviz","name":"Geographic Visualization (GEOG 3540) - University of Iowa"}},"stars":0,"starred":false,"owner":{"type":"team","id":"625e764f7d641fb4","login":"ronankleu","name":"Ronan Kleu","avatar_url":"https://avatars-next.observableusercontent.com/09c829256b07cebdd295cc03703f88251cb50916211ecbf7d52da69e82bcec37","tier":"starter_2024","bio":""},"version":561,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"912fbf361e266aea","login":"ronankleu","name":"Ronan Kleu","avatar_url":"https://avatars-next.observableusercontent.com/09c829256b07cebdd295cc03703f88251cb50916211ecbf7d52da69e82bcec37","tier":null,"bio":""}],"members":[{"type":"individual","id":"912fbf361e266aea","login":"ronankleu","name":"Ronan Kleu","avatar_url":"https://avatars-next.observableusercontent.com/09c829256b07cebdd295cc03703f88251cb50916211ecbf7d52da69e82bcec37","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Ronan's second exercise on Observable: Classification and Colors","cells":[{"id":0,"value":"md`# Ronan's second exercise on Observable: Classification and Colors`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"Georgia = FileAttachment(\"Georgia.json\").json()\n//importing the correct json file. In this instance it is the same file as in assignment one and follows the same procedure for uploading.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"county_features = topojson.feature(Georgia, Georgia.objects.Georgia)\n//assigning features to the county","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"csv_data = d3.csvParse(await FileAttachment(\"FoodAccessResearchAtlasData2019.csv\").text(),({CensusTract, Pop2010, TractSeniors}) => [CensusTract, (+TractSeniors/+Pop2010)*100])\n//creating a new normalized variable while reading the csv file","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"csv_data_objects = Object.assign((d3.csvParse(await FileAttachment(\"FoodAccessResearchAtlasData2019.csv\").text(), d3.autoType)).map(({CensusTract, Pop2010, TractSeniors}) => ({CensusTract: +CensusTract, PCTSeniors:(+TractSeniors/+Pop2010)*100})))\n//assigning the arrays to the objects","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"viewof bins = Inputs.range([0, 50], {step: 1, label: \"Bins\"})\n//choosing the range of bins needed for our histogram. I chose 50 as the range since my dataset is large and this helps with visibility and analysis. We choose x amount because. This histogram shows the distribution of the percentage of senior citizens within each Census tract. It shows a relatively normal distribution peaking at approximately 12 percent which occurs in just over 300 Census tracts.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"Plot.plot({\n marks: [\n Plot.rectY(csv_data_objects, Plot.binX({y: \"count\"}, {x: \"PCTSeniors\", thresholds: bins})),\n Plot.ruleY([0])\n ]\n})\n//Code for the histogram","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"seniorpct = Array.from(csv_data.values(), d => d[1])\n//assigning the new variable \"seniorpct\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"data = Object.assign(new Map(csv_data), {title: [\"Percent Population of Georgia: Senior Citizens\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"md`# Linear Scale (Unclassed)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"linear = d3.scaleLinear()\n .domain(d3.extent(seniorpct))\n .range([\"#eff3ff\", \"#08519c\"])\n//Unclassed data follows a linear scale since it does not class data into different clusters. This means that every data point is assigned their corresponding value on a bipolar color scale. We therefore need the maximum and minimum value in our data set. I chose the sequential blues color scheme from colorbrewer.com. Below, the squares do not correctly represent the entire data set as I have far too many observations, however it would show a color development from HEX #eff3ff (nearly white) to #08519c (blue). ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"scaleLinear:\nTo use scaleLinear, you also need to provide an input domain and an output range. The domain parameter should be an array of values representing the minimum and maximum values of the input domain. The range parameter should be an array of output values, with the function mapping the input values linearly to the output range.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"chart(numericSort(seniorpct), linear)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"md`# Quantile Classification`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"quantile = d3.scaleQuantile()\n .domain(seniorpct)\n .range([\"#eff3ff\", \"#6baed6\", \"#08519c\"])\n// In quantile classification the data is divided equally so that each bin has the same amount of observations and then classed accordingly. Therefore, if I had exactly 100 observations, 25 would fall into the first class, 25 into the second etc. The color scheme is kept the same.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"scaleQuantile:\nTo use scaleQuantile, you need to provide an input domain and an output range. The domain parameter should be an array of values representing the input domain of the scale. The range parameter should be an array of output values, with the number of values in the array determining the number of quantiles used to divide the input domain. The scaleQuantile function then maps the input values to the appropriate quantile based on the specified output range.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"chart(numericSort(seniorpct), quantile)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"md`# Jenks Natural Breaks Classification`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"naturalbreaks = simple.ckmeans(seniorpct, 5).map(v => v.pop())\n//creating a natural break. I chose 5 classes based on histogram I created further above and the color scheme I had chosen. I used the 5 class colorblind safe red color scheme. As show in the array above, the natural breaks occur at 6.47, 10.74, 15.04, 22.38 and 27.65 respectively.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"jenks = d3\n .scaleThreshold()\n .domain(naturalbreaks)\n .range([\"#fee5d9\", \"#fcae91\", \"#fb6a4a\", \"#de2d26\", \"a50f15\"])\n//Natural breaks classification uses a \"nearest neaighbour\" classification system is which it groups the data points into a certain number of classes with the goal of representing each as accurately as possible, highlighting outliers. Its unique breaks makes it more dificult to compare between maps. Once again my squares are only showing values wihtin the first class.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"chart(numericSort(seniorpct), jenks)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`# Equal Interval Classification (Quantize)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"quantize = d3.scaleQuantize()\n .domain([d3.min(seniorpct),d3.max(seniorpct)])\n .range([\"#fee5d9\", \"#fcae91\", \"#fb6a4a\", \"#de2d26\", \"a50f15\"])\n//This method classes data into classes whose breaks are equidistant to each other. Once I again I chose five classes.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"chart(numericSort(seniorpct), quantize)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"md`# Threshold`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"threshold = d3.scaleThreshold()\n .domain([3, 10, 15, 20, 50])\n .range([\"#eff3ff\", \"#bdd7e7\", \"#6baed6\", \"#3182bd\", \"08519c\"])\n//The threshold model allows for custom thresholds to be set and class the data accordingly. Here I picked breaks that made sense to me based on the histogram. ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"chart(numericSort(seniorpct), threshold)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"showScaleGrouping(seniorpct, {\n scaleQuantile: quantile,\n scaleThreshold: threshold,\n scaleJenks: jenks,\n scaleQuantize: quantize,\n scaleQuantizeNice: quantize.copy().nice()\n})\n//The charts above show the distribution and color of each classification model nicely. Note how some have equally sized classes whereas others do not. Regarding the use of colors in Observable, I either input two colours in a range function and allowed Observable to create a continuous scale between the two colours or I set the discrete values for each class to a colour according to a sequential color scheme found on colorbrewer.org. If the code looks as below, the first HEX colour code from right to left refers the first class determined in the domain, the second to the second and so on.\n//.domain([3, 10, 15, 20, 50])\n//.range([\"#eff3ff\", \"#bdd7e7\", \"#6baed6\", \"#3182bd\", \"08519c\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`# Annex`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"function numericSort(x) {\n return (\n x\n // ensure the array is not changed in-place\n .slice()\n // comparator function that treats input as numeric\n .sort((a, b) => a - b)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"function chart(data, scale) {\n const w = 20,\n cols = Math.floor(Math.min(600, width) / w),\n lines = Math.ceil(200 / cols);\n const chart = d3\n .create(\"svg\")\n .attr(\"width\", cols * w)\n .attr(\"height\", lines * w);\n\n chart\n .append(\"g\")\n .attr(\"transform\", \"translate(2,2)\")\n .attr(\"style\", \"stroke:black; fill:white;\")\n .selectAll(\"rect\")\n .data(data)\n .join(\"rect\")\n .attr(\"width\", w - 3)\n .attr(\"height\", w - 3)\n .attr(\"x\", (_, i) => w * (i % cols))\n .attr(\"y\", (_, i) => w * ((i / cols) | 0))\n .style(\"fill\", d => (scale ? scale(d) : \"#ddd\"));\n return chart.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"simple = require(\"simple-statistics@7.0.7/dist/simple-statistics.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"