29:null 2a:["$","title",null,{"children":"GeoVis Exercise 2 | Lizzy Fitzsimmons | Observable"}] 2f:T427,quantile = d3.scaleQuantile() // this function will order the data and divide the number of data entries by the number of classes defined in the range, creating roughly equal numbers of datapoints in each class .domain(childpct) // for this function, the domain is simply the whole dataset, as the function only needs the number and order of entries and not the actual values .range(["#eff3ff", "#bdd7e7", "#6baed6", "#2171b5"]) // this will define both the number of classes and the colors each class will be displayed as. Adding more colors to this line will create more, smaller classes of data. There are many ways to define colors here, but we will input them as HEX by using the pound sign (#) since our color-blind safe schemes from colorbrewer give us reliable HEX values to use. All range inputs will apply in order, with the first color applying to the smallest class value and the last listed color applying to the largest class value. The colors will display in the chart below, so you can easily check that your colors turn out how you want them.30: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; }31:[{"id":"7f63cd60bd780fb581d9a0869fc0fa88e96e3b42d72a56a1b4dd371f15cfb3cd74b48884b9b96cade4aec2653338f9a9a264ff95ed638e2327f10a3350c6ce82","href":"https://static.observableusercontent.com/files/7f63cd60bd780fb581d9a0869fc0fa88e96e3b42d72a56a1b4dd371f15cfb3cd74b48884b9b96cade4aec2653338f9a9a264ff95ed638e2327f10a3350c6ce82","name":"Alaska.json","type":"application/json","lastModified":1677014040862.24,"size":25543},{"id":"cebcca49f80541efc6820907fd1b3096d5c95574ddbbdac4d57fe6bc342d89026ccd851d16cc186eee115565d800dfe8cb3589069d3d4dd16fdcbcc75db6dd3b","href":"https://static.observableusercontent.com/files/cebcca49f80541efc6820907fd1b3096d5c95574ddbbdac4d57fe6bc342d89026ccd851d16cc186eee115565d800dfe8cb3589069d3d4dd16fdcbcc75db6dd3b","name":"Alaska@1.csv","type":"text/csv","lastModified":1677014040862.24,"size":8290},{"id":"6ae2e95e94e742252d8f365406790100d75addf12ec30fbc8d243fab84e15c4e5fab35092a3579deb6f07d9742bfef84e0713debc6a364e78b2168eded21d008","href":"https://static.observableusercontent.com/files/6ae2e95e94e742252d8f365406790100d75addf12ec30fbc8d243fab84e15c4e5fab35092a3579deb6f07d9742bfef84e0713debc6a364e78b2168eded21d008","name":"il_pov_data.csv","type":"text/csv","lastModified":1677014260506.162,"size":3295},{"id":"fbcc8084a5d39638f7a34b4d1705d4dfb0ff06701d79133c57c9a2a952b810facad1591846ba321987d44bf8467e7e52d1299d7db0a237511965c66a51aff260","href":"https://static.observableusercontent.com/files/fbcc8084a5d39638f7a34b4d1705d4dfb0ff06701d79133c57c9a2a952b810facad1591846ba321987d44bf8467e7e52d1299d7db0a237511965c66a51aff260","name":"IL_BNDY_County_Py.json","type":"application/json","lastModified":1677014260614.967,"size":85058}] 2d:{"id":"5bf4cb140b0c3421","slug":null,"title":"GeoVis Exercise 2","thumbnail":"e6c6bc5a609d6a496ebd7291396968180f92b4b9ad9855a6df24f43fef71ff54","access_level":"public","create_time":"$D2023-02-21T21:14:00.862Z","update_time":"$D2023-02-21T22:41:14.599Z","view_time":null,"first_public_time":"$D2023-02-21T21:14:00.862Z","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":"3de1d35236aa03c3","login":"liz-fitz","name":"Lizzy Fitzsimmons","avatar_url":"https://avatars-next.observableusercontent.com/e084f7e151eeaa8726cf5b3406d81af2e2b0d91dafe6aad7e8774242eca5875a","tier":"starter_2024"},"version":496,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"83d91f95e6bd335a","login":"liz-fitz","name":"Lizzy Fitzsimmons","avatar_url":"https://avatars-next.observableusercontent.com/e084f7e151eeaa8726cf5b3406d81af2e2b0d91dafe6aad7e8774242eca5875a","tier":null}],"members":[{"type":"individual","id":"83d91f95e6bd335a","login":"liz-fitz","name":"Lizzy Fitzsimmons","avatar_url":"https://avatars-next.observableusercontent.com/e084f7e151eeaa8726cf5b3406d81af2e2b0d91dafe6aad7e8774242eca5875a","tier":null,"role":"editor"}],"comments":[{"id":"3eb39543cf9b9bb1","reply_to_id":null,"content":"Creating normalized variable: Pov_kids/Pov_all = number of people in poverty under the age of 18 in a county divided by the total number of people in poverty in a county","create_time":"$D2023-02-21T21:29:46.951Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"83d91f95e6bd335a","login":"liz-fitz","name":"Lizzy Fitzsimmons","avatar_url":"https://avatars-next.observableusercontent.com/e084f7e151eeaa8726cf5b3406d81af2e2b0d91dafe6aad7e8774242eca5875a","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"GeoVis Exercise 2","cells":[{"id":0,"value":"md`# GeoVis Exercise 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":422,"value":"Illinois = FileAttachment(\"IL_BNDY_County_Py.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"county_features = topojson.feature(Illinois, Illinois.objects.IL_BNDY_County_Py)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"csv_data = d3.csvParse(await FileAttachment(\"il_pov_data.csv\").text(),({Name, Pov_all, Pov_kids}) => [Name, +Pov_kids/+Pov_all])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":400,"value":"csv_data_objects = Object.assign((d3.csvParse(await FileAttachment(\"il_pov_data.csv\").text(), d3.autoType)).map(({Name, Pov_all, Pov_kids}) => ({Name: Name, pctpovunder18: +Pov_kids/+Pov_all})))","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: \"pctpovunder18\", thresholds: bins})),\n Plot.ruleY([0])\n ]\n}) // this histogram shows the distribution and general range of your data. Referring to this when deciding which classification type to use, how many classes to have, and where to place class breaks if using a manual method is important to ensure you display your data in the most effective and readable way. For my data, it is left-skewed with a unimodal distribution ranging about 0.25. Since it is skewed and has a small variation, I chose to use 4-5 classes to balance the ease of interpreting only a few classes without grouping too much of my data into one class or creating one much smaller class than the rest.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"childpct = Array.from(csv_data.values(), d => d[1]) // this line defines the name you will use for your data and which column of information you want to use. In the classifications, this will be what you input to refer to your variable of interest in your csv. Since I want to look at the percent of children in poverty, \"childpct\" makes sense.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"data = Object.assign(new Map(csv_data), {title: [\"Percent of Children in Poverty in Illinois\"]})","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() // scaleLinear creates a linear ramp of continuous color between the defined range of color below, creating an unclassed scale\n .domain(d3.extent(childpct)) // The domain line is what brings your data into the function. What kind of information about your dataset is needed in this line will vary based on what each function does. For a linear unclassed scale, the function needs the minimum and maximum, or the extent, of the data.\n .range([\"#f7fbff\", \"#08306b\"]) // this defines the color for the minimum and the color for the maximum values. The scaleLinear function creates a \"line\" between the two and displays each value as a point along that \"line\" of color.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":199,"value":"chart(numericSort(childpct), 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":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"chart(numericSort(childpct), quantile)","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() // creates a manual classification, placing the data into bins based on their values using the numbers defined in the domain and colors defined in range\n .domain([0.2, 0.25, 0.3, 0.35, 0.4]) // defines where the classfication breaks will be. This function does not need to read the dataset to create its own classes, so we only need to put our chosen values here. These should be based on the distribution and range of data, and a manual threshold classification is a good way to create \"nice numbers\" as classes\n .range([\"#ffffcc\", \"#c7e9b4\", \"#7fcdbb\", \"#41b6c4\", \"#2c7fb8\"]) // defines which colors each class will be, placed in the same order as the domain above (so #ffffcc is the first, and will be the color of the first domain class which is 0.2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":297,"value":"chart(numericSort(childpct), threshold)","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(childpct, 4).map(v => v.pop()) // this is how you apply the jenks algorithm to the data to determine what the natural breaks are. after ckmeans, the inputs will be the name of your data (childpct) and then the number of breaks you want (4). the rest of the line is the algorithm, so only those two inputs will ever need to be changed.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"jenks = d3 // we defined \"jenks\" as a function, but a natural breaks classifcation scheme is not already coded into Observable. Instead, we applied the algorithm above to find the points to divide the data and will use a threshold function to manually set the classifcation bins to those values.\n .scaleThreshold() // this is the threshold function from before\n .domain(naturalbreaks) // here the domain is the result of the function we applied before this, which is the natural breaks in the data as found through the jenks algorithm. This is the same as copying and pasting the results from the naturalbreaks function in as threshold values like the previous classification, but much cleaner.\n .range([\"#ffffcc\", \"#a1dab4\", \"#41b6c4\", \"#225ea8\"]) // this is the definition of the colors displayed for each class","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"chart(numericSort(childpct), 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() // this takes the minimum and maximum of the data and divides the values equally by the number of classes you want\n .domain([d3.min(childpct),d3.max(childpct)]) // the domain for this function will be the extent of the dataset, similar to the unclassed method. This function needs the same input, but is doing much different math to create equal classes for the data instead of putting them along a line.\n .range([\"#ffffcc\", \"#a1dab4\", \"#41b6c4\", \"#225ea8\"]) // the range for quantize, similar to quantile, will define both the number of classes there will be as well as the colors for each class.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"chart(numericSort(childpct), quantize)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":355,"value":"showScaleGrouping(childpct, {\n scaleQuantile: quantile, //quantile\n scaleThreshold: threshold, //manual classification\n scaleJenks: jenks, //natural breaks\n scaleQuantize: quantize, //equal interval\n scaleQuantizeNice: quantize.copy().nice()\n}) // this chart shows all the methods next to each other, along with showing where the actual datapoints are, to illustrate how different the classes are with these different functions","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":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"