25:["$","title",null,{"children":"Second Exercise on Observable: Classification and Colors | Gretchen Klock | Observable"}] 49: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; }4a:[{"id":"7f63cd60bd780fb581d9a0869fc0fa88e96e3b42d72a56a1b4dd371f15cfb3cd74b48884b9b96cade4aec2653338f9a9a264ff95ed638e2327f10a3350c6ce82","href":"https://static.observableusercontent.com/files/7f63cd60bd780fb581d9a0869fc0fa88e96e3b42d72a56a1b4dd371f15cfb3cd74b48884b9b96cade4aec2653338f9a9a264ff95ed638e2327f10a3350c6ce82","name":"Alaska.json","type":"application/json","lastModified":1676992946808.257,"size":25543},{"id":"cebcca49f80541efc6820907fd1b3096d5c95574ddbbdac4d57fe6bc342d89026ccd851d16cc186eee115565d800dfe8cb3589069d3d4dd16fdcbcc75db6dd3b","href":"https://static.observableusercontent.com/files/cebcca49f80541efc6820907fd1b3096d5c95574ddbbdac4d57fe6bc342d89026ccd851d16cc186eee115565d800dfe8cb3589069d3d4dd16fdcbcc75db6dd3b","name":"Alaska@1.csv","type":"text/csv","lastModified":1676992946808.257,"size":8290},{"id":"ff59b3c6cdfd6974a19a2eb9372dab53ff4acc229c1c1aa534303ad09f8a5f5f7fb38eb3f2612d1c13402033cbcedc9411afd541f67457b46e3e3c9f40f585ea","href":"https://static.observableusercontent.com/files/ff59b3c6cdfd6974a19a2eb9372dab53ff4acc229c1c1aa534303ad09f8a5f5f7fb38eb3f2612d1c13402033cbcedc9411afd541f67457b46e3e3c9f40f585ea","name":"IllinoisKaneCounty.csv","type":"text/csv","lastModified":1677016763822.481,"size":54757},{"id":"7bf9d7767a4d6664bf1ae2f0baac134a0a761183bf1af9c8d4017f7c7bcfee9933d18fcff8a861153f1944d0726330f781440dfa7efad4cdd64e712ff355f6fe","href":"https://static.observableusercontent.com/files/7bf9d7767a4d6664bf1ae2f0baac134a0a761183bf1af9c8d4017f7c7bcfee9933d18fcff8a861153f1944d0726330f781440dfa7efad4cdd64e712ff355f6fe","name":"joinedKaneCounty.json","type":"application/json","lastModified":1677016779757.017,"size":507609},{"id":"2a13add98b90c5e225ba069caeadbbc1ee98674ce9cfaa233d5004a14cbc84366e2d2b01302b930864e8e9e519d24c562ba7c30ee00f3fd37eb28f3ab91027a8","href":"https://static.observableusercontent.com/files/2a13add98b90c5e225ba069caeadbbc1ee98674ce9cfaa233d5004a14cbc84366e2d2b01302b930864e8e9e519d24c562ba7c30ee00f3fd37eb28f3ab91027a8","name":"kanecountyunjoined.json","type":"application/json","lastModified":1677017277053.581,"size":20337},{"id":"9c302a31ca8dc9899ba590067aef8c12961f1d6bb281baa3f69472505caca2849654ce502f0be1099218ac2f7ea4d2138c0897fce15edfbc50eb0cfad66578c8","href":"https://static.observableusercontent.com/files/9c302a31ca8dc9899ba590067aef8c12961f1d6bb281baa3f69472505caca2849654ce502f0be1099218ac2f7ea4d2138c0897fce15edfbc50eb0cfad66578c8","name":"kanecounty2.json","type":"application/json","lastModified":1677018016031.314,"size":35874}] 29:{"id":"4389580dc75cc7b3","slug":null,"title":"Second Exercise on Observable: Classification and Colors","thumbnail":"9b53eee10f1a54dd7fc4d24f70dbd4ebb019647a20680812528c93103325213b","access_level":"public","create_time":"$D2023-02-21T15:22:26.808Z","update_time":"$D2023-02-22T20:33:13.414Z","view_time":null,"first_public_time":"$D2023-02-21T15:22:26.808Z","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":"af08bab9a3cae15b","login":"gklock","name":"Gretchen Klock","avatar_url":"https://avatars-next.observableusercontent.com/150765f53ed113a7447da0d82dcadb10531888253edba0a32c64ea764355d013","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":625,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6167672369178b76","login":"gklock","name":"Gretchen Klock","avatar_url":"https://avatars-next.observableusercontent.com/150765f53ed113a7447da0d82dcadb10531888253edba0a32c64ea764355d013","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"6167672369178b76","login":"gklock","name":"Gretchen Klock","avatar_url":"https://avatars-next.observableusercontent.com/150765f53ed113a7447da0d82dcadb10531888253edba0a32c64ea764355d013","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Second Exercise on Observable: Classification and Colors","cells":[{"id":0,"value":"md`# 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":"KaneCounty = FileAttachment(\"kanecounty2.json\").json()","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(KaneCounty, KaneCounty.objects.kanecounty2)","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(\"IllinoisKaneCounty.csv\").text(),({CensusTract, Pop2010, TractSNAP}) => [+CensusTract, +TractSNAP/+Pop2010])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"csv_data_objects = Object.assign((d3.csvParse(await FileAttachment(\"IllinoisKaneCounty.csv\").text(), d3.autoType)).map(({CensusTract, Pop2010, TractSNAP}) => ({Tract: CensusTract, SNAPPercentage: +TractSNAP/+Pop2010})))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"SnapPercentage = Array.from(csv_data.values(), d => d [1])","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,20], {step: 1, label: \"Bins\"}) \n","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: \"SNAPPercentage\", thresholds: bins})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"Histogram Discussion: The data has a rightward skew (positive skew). This is more prominent when the bin size is larger and there are less bins. This is consistent with the classification schemes which show a rightward skew in the data as well. In the classification schemes, this is visible especially in the Quantile and Jenks methods which show the third class (rightmost) is larger as there is a wider range of data while the first class (leftmost) is smallest, indicated that data is clustered in the on the left. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"data = Object.assign(new Map(csv_data), {title: [\"Kane County by Census Tract: Percent Recieving SNAP benefits\"]})","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(SnapPercentage))\n .range([\"#fee0d2\" , \"#de2d26\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"chart(numericSort(SnapPercentage), linear)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"Cheat Sheet: Creating an unclassed map. An unclassed map follows a linear scale. Each unique value has its own unique color. No values are \"binned\" together with any other value.\n1. Copy the code to define a linear visualization.\n2. Define the extent of the domain with .domain(d3.extent(VARIABLE)) or with .domain(d3.max(VARIABLE))\n3. Define the color scheme (using ColorBrewer colors) with .range[\"color 1\" , \"color 2\"]. Since this visualization is unclassed, only 2 colors are defined and the remaining unique colors are picked from the range between them\n4. From here the data can be read into a map with code given later and visualized spatially. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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(SnapPercentage)\n .range([\"#e5f5e0\", \"#a1d99b\", \"#31a354\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"chart(numericSort(SnapPercentage), 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(SnapPercentage, 3).map(v => v.pop())","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([\"#e0ecf4\", \"#9ebcda\", \"#8856a7\"])","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(SnapPercentage), 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(SnapPercentage), d3.max(SnapPercentage)])\n .range([\"#fde0dd\", \"#fa9fb5\", \"#c51b8a\"])","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(SnapPercentage), quantize)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"Cheatsheet: Quantile, Equal Interval (quantize), Manual (threshold), and Natural Breaks classification schemes each have a defined number of classes. Each is defined by a domain (the dataset) and a range (the amount of colors used to define the classes, each class has a unique color). In general, a good number of classes is from 3-7. The ideal number of classes can be calculated through an algorithm (as discussed in the textbook) or can be picked more arbitrarily by the map maker to more clearly highlight a spatial pattern or to show a comparison. \n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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(naturalbreaks)\n .range([\"#edf8b1\", \"#7fcdbb\", \"#2c7fb8\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"chart(numericSort(SnapPercentage), 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(SnapPercentage , {\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"Cheat Sheet: Color Schemes. Colors can be picked through Observable using a variety of different color models including rgb and hcl. Additionally, colors can be read in through hexacode. Color Brewer and similar websites can be used to generate color schemes in hexacode format. In order to create a scale of colors, the interpolate commands can be used. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null