29:null 2a:["$","title",null,{"children":"Homework 2 | Ethan Traugh | 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":1676938020006.25,"size":25543},{"id":"cebcca49f80541efc6820907fd1b3096d5c95574ddbbdac4d57fe6bc342d89026ccd851d16cc186eee115565d800dfe8cb3589069d3d4dd16fdcbcc75db6dd3b","href":"https://static.observableusercontent.com/files/cebcca49f80541efc6820907fd1b3096d5c95574ddbbdac4d57fe6bc342d89026ccd851d16cc186eee115565d800dfe8cb3589069d3d4dd16fdcbcc75db6dd3b","name":"Alaska@1.csv","type":"text/csv","lastModified":1676938020006.25,"size":8290},{"id":"b88f2b652a56d10a4f8ef8362967abec7f67abcbbef6c5cd737470ae9a874f224b638ea41e424f7b92f273e530098dad94e9378e55339bc398e1c130026251df","href":"https://static.observableusercontent.com/files/b88f2b652a56d10a4f8ef8362967abec7f67abcbbef6c5cd737470ae9a874f224b638ea41e424f7b92f273e530098dad94e9378e55339bc398e1c130026251df","name":"diabetes.csv","type":"text/csv","lastModified":1676939848504.96,"size":7659},{"id":"ff733e550ab68616babcd6cf2cdd5cde8c259a2d57c563a27604de3a7678fe40f92df327f2ef4051a43043b8754cf2a1a37314b210e146ffe93a00c229ee3fd3","href":"https://static.observableusercontent.com/files/ff733e550ab68616babcd6cf2cdd5cde8c259a2d57c563a27604de3a7678fe40f92df327f2ef4051a43043b8754cf2a1a37314b210e146ffe93a00c229ee3fd3","name":"ColoradoCounties.json","type":"application/json","lastModified":1676939899148.308,"size":630325}] 2d:{"id":"909a972f3135fbca","slug":null,"title":"Homework 2","thumbnail":"2e6fcd1be63f413bdac00c7b300d36b89dbf3e8f97718540868be0cd99bc6291","access_level":"public","create_time":"$D2023-02-21T00:07:00.006Z","update_time":"$D2023-02-21T17:28:55.463Z","view_time":null,"first_public_time":"$D2023-02-21T00:07:00.006Z","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":"0560394763f931d7","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":"starter_2024"},"version":513,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}],"members":[{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null,"role":"editor"}],"comments":[{"id":"3c9d7d0c706a69a0","reply_to_id":null,"content":"I chose these values judging from the histogram with 7+ bins. I am crudely trying to group similar values while trying to create the biggest difference between groups. Like a rough jenks algorithm.","create_time":"$D2023-02-21T16:49:30.457Z","update_time":"$D2023-02-21T16:50:28.011Z","resolved":false,"user":{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}},{"id":"36c0d6699bea6290","reply_to_id":null,"content":"With 7+ bins, I can loosely make out 4 different groups. The first group is the small bar between 0-2, the next group is where the majority of the distribution is between 2-10. The next group is between 10-16, and then lastly another small group between 16 - 22.","create_time":"$D2023-02-21T16:52:31.721Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}},{"id":"419fbf2086e8235a","reply_to_id":null,"content":"scaleLinear() creates a linear mapping between input and output values. \n\n.domain() specifies the minimum and maximum values of your data. You can manually achieve this, or just use the extent function which will return an array containing the min and max of your data.\n\n.range() will specify the two colors you want to be used for the minimum and maximum values respectively. We enter the two colors as an array of strings, either containing hexcodes or built in colors like \"white\", \"grey\", etc.","create_time":"$D2023-02-21T17:00:09.135Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}},{"id":"06ca8e5e907f9a0f","reply_to_id":null,"content":"scaleQuantile creates an quantile mapping from input values (our data) to colors. \n\nunlike scaleLinear, our .domain() needs to be an array of our data, not just the minimum and maxium.\n\n.range() will specify the number of groups created via the array length, as well as the colors associated with each group.","create_time":"$D2023-02-21T17:05:01.556Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}},{"id":"e9d4544a50eb213a","reply_to_id":null,"content":"This is a sly way of using Jenks Natural breaks, where we calculate the maximums for each natural break group, and then pass the array of those maximums to .domain().","create_time":"$D2023-02-21T17:12:00.300Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}},{"id":"d982dc09f241f5d6","reply_to_id":null,"content":"The scaleQuantize() function maps input values to colors based on an equal interval grouping method. To use it, we need to specify the minimum and maximum values of the input range using .domain(), as well as the number of color groups using .range().\n\nThe function then divides the range of input values into equal intervals based on the number of color groups specified, and maps each interval to a corresponding color value.","create_time":"$D2023-02-21T17:16:44.731Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}},{"id":"e53cf9386cddaf68","reply_to_id":"3c9d7d0c706a69a0","content":"Thresholds takes an array of group maximums in .doman(), and then the desired color groups in .range(). In this case we are manually entering maximums based upon my intuition. In the previous example, we calculated maximums using a natural breaks function, and then handed that to scaleThreshold to create our mapping.","create_time":"$D2023-02-21T17:19:00.293Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}},{"id":"2d1674bf4c5a1b53","reply_to_id":null,"content":"Read in our csv data. This is where one could normalize a variable by population, but in my case percent of adult population that is obese or \"Per_Adults_Diabetes\" is already normalized. I divided the value by 1, just to demonstrate that I know how to normalize if warranted.","create_time":"$D2023-02-21T17:20:50.204Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}},{"id":"cea38cb3afcc39d8","reply_to_id":null,"content":"This is taking the data we read in and storing it as an array that can be used with d3's data mapping functions. This helps with analysis and visualization of the data.","create_time":"$D2023-02-21T17:22:23.553Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}},{"id":"a16c6365e538913d","reply_to_id":null,"content":"This creates a mapping that will be used for our histogram.","create_time":"$D2023-02-21T17:26:03.754Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Homework 2","cells":[{"id":509,"value":"# **Homework 2**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":422,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":423,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":426,"value":"csv_data = d3.csvParse(await FileAttachment(\"diabetes.csv\").text(),({COUNTY, Per_Adults_Diabetes, OBJECTID}) => [COUNTY, [+Per_Adults_Diabetes/1]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":428,"value":"diabetesPercent = Array.from(csv_data.values(), d => d[1][0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":453,"value":"csv_data_objects = Object.assign((d3.csvParse(await FileAttachment(\"diabetes.csv\").text(), d3.autoType)).map(({Per_Adults_Diabetes}) => ({adultDiabetes : Per_Adults_Diabetes})))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"viewof bins = Inputs.range([0, 10], {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: \"adultDiabetes\", thresholds: bins})),\n Plot.ruleY([0])\n ]\n})","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(diabetesPercent))\n .range([\"white\", \"#3182bd\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":199,"value":"chart(numericSort(diabetesPercent), 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(diabetesPercent)\n .range([\"#efedf5\", \"#bcbddc\", \"#756bb1\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"chart(numericSort(diabetesPercent), 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(diabetesPercent, 3).map(v => v.pop())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"jenks = d3\n .scaleThreshold()\n .domain(naturalbreaks)\n .range([\"white\", \"#99d594\", \"green\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"chart(numericSort(diabetesPercent), 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":276,"value":"quantize = d3.scaleQuantize()\n .domain([d3.min(diabetesPercent),d3.max(diabetesPercent)])\n .range([\"#fee0d2\" , \"#fc9272\", \"#de2d26\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"chart(numericSort(diabetesPercent), 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":289,"value":"threshold = d3.scaleThreshold()\n .domain([2, 10, 16, 22])\n .range([\"#fee5d9\", \"#fcae91\", \"#fb6a4a\", \"#cb181d\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":297,"value":"chart(numericSort(diabetesPercent), threshold)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":355,"value":"showScaleGrouping(diabetesPercent, {\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"