2b:null 2c:["$","title",null,{"children":"Second Exercise on Observable: Classification and Colors | Alyssa | Observable"}] 31:T85e,Plot.plot({ marks: [ Plot.rectY(csv_data_objects, Plot.binX({y: "count"}, {x: "HomeValtoIncome", thresholds: bins})), Plot.ruleY([0]) ] }) // Nearly all of the home value to income ratios for Clinton, Iowa's block groups are below 5. There is one single ratio located in downtown Clinton that has very high home values and very low incomes because of locations like City Hall, the YWCA, and other organizations and LLCs. These were identified as residential properties when they should likely be recategorized as something else. // The unclassed map sorts the ratios and gives them a range of color from the lowest ratio to the highest ratio. In other words, the ratio in the downtown block group has the darkest blue square while ratios toward the left side of the histogram have squares with very little blue. // The quantile classification orders the ratios but places the same number of values in each class. This means that the highest value, 12.75, is placed in a class along with values from 2.22 to 4.43. This classification method fails to consider or show how data are distributed along the number line. // Natural breaks finds a logical break or clusters in the data. The natural breaks calculated for this data occur at 2.57 and 4.32. These breaks still feel rather unusual as they place 4.43 and 12.75 in their own class together. These numbers are still quite different even though natural breaks is suppose to minimize differences within classes and maximize differences between classes. // Equal interval divides the data into classes with equal ranges. This creates breaks at 5.12 and 8.93. As shown in the histogram, there are no values from 5.12 to 8.93. This means that the data is only placed in two classes. The second class remains empty because of how the data is skewed on the number line. In other words, equal interval also fails to consider distribution along the number line. // Finally, manually breaks allows us to categorize the ratios in a way that is significant for planners. All values over 3 indicate affordability issues, so 12.75 ends up with five other values for a determined reason. 32: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; }33:[{"id":"bcc4d0f2f5c5afee6b8c692bb3f02999a029ace196359efd16a4dfb51529eb8b9e7e1551646314754a6d5646939b98f876412a79ea7238003f055ed5229e7fe8","href":"https://static.observableusercontent.com/files/bcc4d0f2f5c5afee6b8c692bb3f02999a029ace196359efd16a4dfb51529eb8b9e7e1551646314754a6d5646939b98f876412a79ea7238003f055ed5229e7fe8","name":"ClintonBlockGrps_1984.json","type":"application/json","lastModified":1676922023872.293,"size":45316},{"id":"5046f73afa04f9f7adbb34499334b261d10bfd9ac2e1d46e8fb691d480daa3221fe5b725c6a4e29cc5727a65e8c1deaeb24732890c298984fbcf8c7f0e90fc3e","href":"https://static.observableusercontent.com/files/5046f73afa04f9f7adbb34499334b261d10bfd9ac2e1d46e8fb691d480daa3221fe5b725c6a4e29cc5727a65e8c1deaeb24732890c298984fbcf8c7f0e90fc3e","name":"ClintonBlockGrps_1984@4.csv","type":"text/csv","lastModified":1676925286707.143,"size":4457}] 2f:{"id":"19137cf6c2a15806","slug":null,"title":"Second Exercise on Observable: Classification and Colors","thumbnail":"41c58968780a606b5a3e7246028b520777b884f5a15cfff6382cc0f2fcaba6b7","access_level":"public","create_time":"$D2023-02-17T02:29:04.032Z","update_time":"$D2023-02-20T21:28:59.492Z","view_time":null,"first_public_time":"$D2023-02-17T02:29:04.032Z","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":"16a5f2e23beee6b5","login":"ascha4","name":"Alyssa","avatar_url":"https://avatars-next.observableusercontent.com/ad87f66686ca57dc71aaa3f2afce1454b8a83a15bce786d3ef24022fa78e69c3","tier":"starter_2024"},"version":523,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a7bc568563e92f0","login":"ascha4","name":"Alyssa","avatar_url":"https://avatars-next.observableusercontent.com/ad87f66686ca57dc71aaa3f2afce1454b8a83a15bce786d3ef24022fa78e69c3","tier":null}],"members":[{"type":"individual","id":"8a7bc568563e92f0","login":"ascha4","name":"Alyssa","avatar_url":"https://avatars-next.observableusercontent.com/ad87f66686ca57dc71aaa3f2afce1454b8a83a15bce786d3ef24022fa78e69c3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"Clinton= FileAttachment(\"ClintonBlockGrps_1984.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"county_features = topojson.feature(Clinton, Clinton.objects.ClintonBlockGrps_1984)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"csv_data = d3.csvParse(await FileAttachment(\"ClintonBlockGrps_1984@4.csv\").text(),({GISJOIN, HomeVal, Income}) => [GISJOIN, +HomeVal/+Income]) \n//extracting one column of data to use moving forward for the different classification methods","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"csv_data_objects = Object.assign((d3.csvParse(await FileAttachment(\"ClintonBlockGrps_1984@4.csv\").text(), d3.autoType)).map(({GISJOIN, HomeVal, Income}) => ({GISJOIN: +GISJOIN, HomeValtoIncome: +HomeVal/+Income})))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"viewof bins = Inputs.range([0, 20], {step: 1, label: \"Bins\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"HomeValtoIncome = Array.from(csv_data.values(), d => d[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"data = Object.assign(new Map(csv_data), {title: [\"Home Value to Income Ratio in Clinton, Iowa\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"md`# Linear Scale (Unclassed)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"unclassed = d3.scaleLinear() // ScaleLinear takes in minimum and maximum values and creates a new color for each data point (unclassed chart). In other words, the data are ordered and each increase in value gets a square that has a slightly darker blue color. \n .domain(d3.extent(HomeValtoIncome)) // Extent finds the minimum and maxiumum of the array of data for the domain.\n .range([\"white\", \"#43a2ca\"]) // Creates a range of visual variables (color) from min to max. This determines the color of each data point based on minimum and maximum data. The blue color was found from Color Brewer hex codes.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"chart(numericSort(HomeValtoIncome), unclassed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"md`# Quantile Classification`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"quantile = d3.scaleQuantile() // Quantile orders the data by value and places the same number of observations in each class\n .domain(HomeValtoIncome) // Reads in the data. Don't need to know max and min because quantile function already orders the data.\n .range([\"#e0f3db\", \"#a8ddb5\", \"#43a2ca\"]) // Utilizing hex codes from Color Brewer. Number of colors determines number of classes.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"chart(numericSort(HomeValtoIncome), quantile)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"md`# Jenks Natural Breaks Classification`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"naturalbreaks = simple.ckmeans(HomeValtoIncome, 3).map(v => v.pop()) // Input data and number of classes (3). This line of code will always be the same except for the data and the number of classes. This determines the breaks for natural breaks.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"jenks = d3.scaleThreshold() // Creates a manual classification method where you can specify the breaks\n .domain(naturalbreaks) // Adding natural breaks as the domain switches the method to natural break. This uses natural breaks from the coding above to determine the class breaks. \n .range([\"#e0ecf4\", \"#9ebcda\", \"#8856a7\"]) // Selecting the color for each class","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"chart(numericSort(HomeValtoIncome), jenks)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`# Equal Interval Classification (Quantize)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"quantize = d3.scaleQuantize() // Quantize = equal interval. Divides the data into classes with equal intervals ((max-min)/number of classes)\n .domain([d3.min(HomeValtoIncome),d3.max(HomeValtoIncome)]) // Find the minimum and maximum data values for calculating intervals.\n .range([\"#e0ecf4\", \"#9ebcda\", \"#8856a7\"]) // Number of colors determines number of classes. Colors are from Color Brewer hex codes. ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"chart(numericSort(HomeValtoIncome), quantize)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"md`# Threshold`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"threshold = d3.scaleThreshold() // Threshold can be used for manual breaks like this or for natural breaks method\n .domain([2, 2.5, 3, 12.8]) // Class breaks with 12.8 as the maximum value. In the field of planning, these breaks are significant. Median home value to median income ratios below 2 indicate undervalued properties in comparison to incomes. Values of 2.5 to 3 are self-sustaining housing markets with adequate value to support new construction. Values over 3 indicate affordability issues. \n .range([\"#f0f9e8\", \"#bae4bc\", \"#7bccc4\", \"#2b8cbe\"]) // Adds color to the breaks listed in domain.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"chart(numericSort(HomeValtoIncome), threshold)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"showScaleGrouping(HomeValtoIncome, {\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","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`# Annex`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":357,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"