29:null 2a:["$","title",null,{"children":"GeoVis Assignment 2 | Adam | Observable"}] 2f: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; }30:[{"id":"7f63cd60bd780fb581d9a0869fc0fa88e96e3b42d72a56a1b4dd371f15cfb3cd74b48884b9b96cade4aec2653338f9a9a264ff95ed638e2327f10a3350c6ce82","href":"https://static.observableusercontent.com/files/7f63cd60bd780fb581d9a0869fc0fa88e96e3b42d72a56a1b4dd371f15cfb3cd74b48884b9b96cade4aec2653338f9a9a264ff95ed638e2327f10a3350c6ce82","name":"Alaska.json","type":"application/json","lastModified":1676944251361.69,"size":25543},{"id":"cebcca49f80541efc6820907fd1b3096d5c95574ddbbdac4d57fe6bc342d89026ccd851d16cc186eee115565d800dfe8cb3589069d3d4dd16fdcbcc75db6dd3b","href":"https://static.observableusercontent.com/files/cebcca49f80541efc6820907fd1b3096d5c95574ddbbdac4d57fe6bc342d89026ccd851d16cc186eee115565d800dfe8cb3589069d3d4dd16fdcbcc75db6dd3b","name":"Alaska@1.csv","type":"text/csv","lastModified":1676944251361.69,"size":8290},{"id":"6cbe08af07d489330d017adeb1248140d61a2c9d643ae210d90be6148b5cc3c65db1576e7f48e4b51b0b257fc62c7c1167f9f45325a277bf3922f1451d87556b","href":"https://static.observableusercontent.com/files/6cbe08af07d489330d017adeb1248140d61a2c9d643ae210d90be6148b5cc3c65db1576e7f48e4b51b0b257fc62c7c1167f9f45325a277bf3922f1451d87556b","name":"counties_colorado_csv.csv","type":"text/csv","lastModified":1676952448123.115,"size":46865},{"id":"b12bc3741bd5986370b242ee7196c83f4946d0140ac890414effeb20e01ae34309ca174094497bd1e5b781828265407539997453f541b3f727aa4a6964dd3fa2","href":"https://static.observableusercontent.com/files/b12bc3741bd5986370b242ee7196c83f4946d0140ac890414effeb20e01ae34309ca174094497bd1e5b781828265407539997453f541b3f727aa4a6964dd3fa2","name":"geo_export_1df364d9-8aeb-46ba-9d4d-d864fc4046a5.json","type":"application/json","lastModified":1676952456083.488,"size":249173}] 2d:{"id":"df19e0d0809adb68","slug":null,"title":"GeoVis Assignment 2","thumbnail":"3cb0159c8cfbefa5de7c962d458e9d6609208a2ca5f8e7db9fcb2f4f124a109e","access_level":"public","create_time":"$D2023-02-21T01:50:51.361Z","update_time":"$D2023-02-22T04:08:53.928Z","view_time":null,"first_public_time":"$D2023-02-21T01:50:51.361Z","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":"0c7e2569ffe4c642","login":"adamdodds3","name":"Adam","avatar_url":"https://avatars-next.observableusercontent.com/bad8c981edcea83c1862670d32628899338c2b33c3f5e91d35eac13b73ed5ed3","tier":"starter_2024"},"version":558,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d77829c4ac534e39","login":"adamdodds3","name":"Adam","avatar_url":"https://avatars-next.observableusercontent.com/bad8c981edcea83c1862670d32628899338c2b33c3f5e91d35eac13b73ed5ed3","tier":null}],"members":[{"type":"individual","id":"d77829c4ac534e39","login":"adamdodds3","name":"Adam","avatar_url":"https://avatars-next.observableusercontent.com/bad8c981edcea83c1862670d32628899338c2b33c3f5e91d35eac13b73ed5ed3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"GeoVis Assignment 2","cells":[{"id":0,"value":"md`# GeoVis Assignment 2`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"Colorado_counties = FileAttachment(\"geo_export_1df364d9-8aeb-46ba-9d4d-d864fc4046a5.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"county_features = topojson.feature(Colorado_counties, Colorado_counties.objects.counties_topojson)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"csv_data = d3.csvParse(await FileAttachment(\"counties_colorado_csv.csv\").text(),({geonum, pop, white_nh}) => [geonum, +white_nh/+pop])\n//percent of white population in Colorado counties","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":400,"value":"csv_data_objects = Object.assign((d3.csvParse(await FileAttachment(\"counties_colorado_csv.csv\").text(), d3.autoType)).map(({geonum, pop, white_nh}) => ({geonum: +geonum, whitepct: +white_nh/+pop})))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"viewof bins = Inputs.range([0, 20], {step: 1, label: \"Bins\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":394,"value":"Plot.plot({\n marks: [\n Plot.rectY(csv_data_objects, Plot.binX({y: \"count\"}, {x: \"whitepct\", thresholds: bins})),\n Plot.ruleY([0])\n ]\n})\n//Looking at the histogram of pecent of white population in Colorado counties it appears to be left skewed.\n// In this histogram the X-axis is the percent of white population starting at the lowest value on the left to the highest percent on the right, the Y-axis is the frequency, the amount of counties that fall within that range, for example we can see the highest bin shows 16, meaning 16 counties in Colorado have a white population percentage between %85 - %90. Most of the counties have a percent at %75 or above\n//Because my data is so skewed I chose to use 4 classes entering breaks at .5, .7 and .85 to try and distribute the data without having multiple classes with a high amount of data or several classes with little data. In the Natural Breaks I tried 5 classes and that seemed to be good to break up the classes with higher percentages more","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"whitepct = Array.from(csv_data.values(), d => d[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"data = Object.assign(new Map(csv_data), {title: [\"Percent of White Population In Colorado by County\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":174,"value":"md`# Linear Scale (Unclassed)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"linear = d3.scaleLinear()\n .domain(d3.extent(whitepct))\n .range([\"#efedf5\", \"#756bb1\"])\n//linear could also be labeled as 'Unclassed' \n//.domain is the min and max of your data, (d3.extent(whitepct)) will give us the min and max of our data (whitepct) then using the .range() we can assign hex codes or specify colors to display the values with ranging from minimum to maximum","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":199,"value":"chart(numericSort(whitepct), linear)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":267,"value":"md`# Quantile Classification`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":272,"value":"quantile = d3.scaleQuantile()\n .domain(whitepct)\n .range([\"#deebf7\", \"#9ecae1\", \"#3182bd\"])\n//.range() based on order, will be ordered small, medium, largest\n// number of classes is determined inside .range() using colors to specify\n//.domain(whitepct) reads all of our data and not just the minimum and maximum values ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"chart(numericSort(whitepct), quantile)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":323,"value":"md`# Jenks Natural Breaks Classification`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":373,"value":"naturalbreaks = simple.ckmeans(whitepct, 5).map(v => v.pop())\n//this is where you determine the amount of classes, here you input your data and amount of classes (whitepct, 5)\n//above it outputs our 5 natural breaks. the last class being our maximum","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"jenks = d3\n .scaleThreshold()\n .domain(naturalbreaks)\n .range([\"#edf8e9\", \"#c7e9c0\", \"#a1d99b\",\"#74c476\", \"#31a354\", '#006d2c']) //colors used, from colorbrewer\n//in the .domain we enter (naturalbreaks) to utalize the array data it created above, makes it much cleaner and simplier than manually inputing the values from the generated breaks above","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"chart(numericSort(whitepct), jenks)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":280,"value":"md`# Equal Interval Classification (Quantize)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":450,"value":"d3.extent(whitepct)\n//gives me the minimum and maximum values of the data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":276,"value":"quantize = d3.scaleQuantize()\n .domain([d3.min(whitepct),d3.max(whitepct)])\n .range([\"#feebe2\", \"#fbb4b9\", \"#f768a1\",\"#ae017e\"])\n//we use the .domain to specify the min and max values of the data (whitepct) and use the range to choose how many classes we want to split into, this will divide the classes into equal intervals \n//classes dependent upon the amount of visual varibles in .range([]) here I've used 4 classes using colors from the colorbrewer website","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"chart(numericSort(whitepct), quantize)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":295,"value":"md`# Threshold`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":461,"value":"d3.extent(whitepct)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":289,"value":"threshold = d3.scaleThreshold()\n .domain([0.5, 0.7, 0.85])\n .range([\"#fee5d9\", \"#fcae91\", \"#fb6a4a\", \"#cb181d\"])\n//Threshold is used to create a manual classifcation\n//.domain() these are the break points for classes, 2 breaks should be 3 classes (or one more class than break)\n//the visual variable is defining how many classes we want inside .range()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":297,"value":"chart(numericSort(whitepct), threshold)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":355,"value":"showScaleGrouping(whitepct, {\n scaleQuantile: quantile,\n scaleThreshold: threshold,\n scaleJenks: jenks,\n scaleQuantize: quantize,\n scaleQuantizeNice: quantize.copy().nice()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"md`# Annex`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"id":357,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"