25:["$","title",null,{"children":"2nd Exercise on Observable: Classification and Colors | Samiul | Observable"}] 49:T69e,md`An unclassed map is a thematic map that displays data using a continuous range of colors without dividing the data into discrete classes or categories. To create an unclassed map in Observable, you can use a continuous color scale to map your data values to colors. The following function will be used for the "unclassed" classification of the "percentage of owner-occupied households." The function will create a linear scale using D3's scaleLinear() method, which maps a continuous range of input values to a continuous range of output values. In this case, the input values are the elements of an array called "ownerpec" for the "percentage of owner-occupied household" information, which is passed to the extent() method to calculate the minimum and maximum values of the array. These minimum and maximum values are then used as the input domain of the scale. The output range of the scale is defined as an array of two colors, ["red", "yellow"]. This means that the lowest value in the input domain will be mapped to the color red, and the highest value will be mapped to the color yellow. Any values between the minimum and maximum will be mapped to an intermediate color based on their position in the input domain. For example, if the minimum value of "ownerpec" is 0 and the maximum value is 100, then the input domain of the scale will be [0, 100]. Any value less than 0 will be mapped to red, greater than 100 will be mapped to yellow, and any value between 0 and 100 will be mapped to an intermediate color based on its position in that range. Once the scale is created, it can be used to map data values to colors in a visualization, such as in a choropleth map or heat map.`4a:T68d,md`Quantiles are defined, in statistics, as separating a population into intervals of similar sizes (the 10% poorest, the 50% tallest, the 1% richest…); a quantile scale is essentially defined by its domain, a fixed set of values — when applied to a new value, it will then compute its ranking with respect to the initial distribution, and map that ranking to the output range. To create a quantile classification map on Observable, you can use the d3.scaleQuantile() method to create a scale with the appropriate domain and range. In the following function, the data array represents the values we want to classify into quantiles, and the colors array represents the color scheme you want to use. In this case, we're using a "white-shade of green-dark green" color scheme from the "ColorBrewer library". The following code, d3.scaleQuantile() is used to create a new quantile scale. The domain() method is used to set the input domain of the scale to the "ownerpec" array, representing the data you want to classify. The range() method is used to set the output range of colors for the scale. In this case, the output range is set to ["white", "#99d500", "green"], which means that values within the lowest quantile will be mapped to "white", values within the second quantile will be mapped to "#99d500 (shade of green)", and values within the highest quantile will be mapped to "green". We choose the colors from colorbrewer.org, considering the color-blind issues for representation. Once you have defined your quantile scale, we can use it to map your data to colors. For example, we could use the quantile() method to map a data point to its corresponding color:`4b:T433,md `To Quantize means to group values with discrete increments — like expressing a list of floating point numbers with 1 decimal digit or rounding time to the closest minute. The output range is discretized, and such a scale allows to the transformation of an initial continuous range into a discrete set of classes. In the following code, d3.scaleQuantize() is used to create a new quantize scale. The domain() method is used to set the input domain of the scale to the extent of the "ownerpec" array. The extent() method calculates the minimum and maximum values of the "ownerpec" array and sets them as the domain of the scale. The range() method is used to set the output range of colors for the scale. In this case, the output range is set to ["white", "pink", "red"], which means that values will be mapped to one of three colors based on their position in the domain. Values below the first threshold will be mapped to "white", values between the first and second thresholds will be mapped to "pink", and values above the second threshold will be mapped to "red".`4c: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; }4d:[{"id":"7f63cd60bd780fb581d9a0869fc0fa88e96e3b42d72a56a1b4dd371f15cfb3cd74b48884b9b96cade4aec2653338f9a9a264ff95ed638e2327f10a3350c6ce82","href":"https://static.observableusercontent.com/files/7f63cd60bd780fb581d9a0869fc0fa88e96e3b42d72a56a1b4dd371f15cfb3cd74b48884b9b96cade4aec2653338f9a9a264ff95ed638e2327f10a3350c6ce82","name":"Alaska.json","type":"application/json","lastModified":1676747570933.264,"size":25543},{"id":"cebcca49f80541efc6820907fd1b3096d5c95574ddbbdac4d57fe6bc342d89026ccd851d16cc186eee115565d800dfe8cb3589069d3d4dd16fdcbcc75db6dd3b","href":"https://static.observableusercontent.com/files/cebcca49f80541efc6820907fd1b3096d5c95574ddbbdac4d57fe6bc342d89026ccd851d16cc186eee115565d800dfe8cb3589069d3d4dd16fdcbcc75db6dd3b","name":"Alaska@1.csv","type":"text/csv","lastModified":1676747570933.264,"size":8290},{"id":"ca0413c178263639a865442e865149a90cba81126477f630cc7f86acea8389261b564584af07c42c6e07da90f040137141f44d91e6da282243c011b29badc368","href":"https://static.observableusercontent.com/files/ca0413c178263639a865442e865149a90cba81126477f630cc7f86acea8389261b564584af07c42c6e07da90f040137141f44d91e6da282243c011b29badc368","name":"County_Illinois.csv","type":"text/csv","lastModified":1676748954051.693,"size":10693},{"id":"17e4499271e301544abaf9a262771064649145a5c082946411e05acee729158895d8c54417c2cdc78cb5be91230febf42bdb5339a7f614074e5193851660eb22","href":"https://static.observableusercontent.com/files/17e4499271e301544abaf9a262771064649145a5c082946411e05acee729158895d8c54417c2cdc78cb5be91230febf42bdb5339a7f614074e5193851660eb22","name":"County_IL_cp.json","type":"application/json","lastModified":1676748854453.312,"size":885163}] 29:{"id":"e48fa9bf0f53e437","slug":null,"title":"2nd Exercise on Observable: Classification and Colors","thumbnail":"bcfe23d537effcb143db0b18e3248079f9c4777e16f951d3194a7aa61fc34f42","access_level":"public","create_time":"$D2023-02-18T19:12:50.933Z","update_time":"$D2023-02-22T02:50:55.394Z","view_time":null,"first_public_time":"$D2023-02-18T19:12:50.933Z","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":"6d83b0eca0b73a3c","login":"smsamiul","name":"Samiul","avatar_url":"https://avatars-next.observableusercontent.com/e26fed994b6b825a7821a3b433855ca89215a806a3dfb138d126aa6cd838b2fd","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":620,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f85e9f01fd65c3de","login":"smsamiul","name":"Samiul","avatar_url":"https://avatars-next.observableusercontent.com/e26fed994b6b825a7821a3b433855ca89215a806a3dfb138d126aa6cd838b2fd","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f85e9f01fd65c3de","login":"smsamiul","name":"Samiul","avatar_url":"https://avatars-next.observableusercontent.com/e26fed994b6b825a7821a3b433855ca89215a806a3dfb138d126aa6cd838b2fd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"2nd Exercise on Observable: Classification and Colors","cells":[{"id":0,"value":"md`# 2nd 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":491,"value":"","pinned":false,"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":"states = FileAttachment(\"County_IL_cp.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":"states_features = topojson.feature(states, states.objects.County_IL_cp)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"md`## 1. Create a new normalized variable:\nIn statistics and data analysis, normalization is scaling a variable to a standard range to allow for a fair comparison across different scales or units. We will create a new variable using our existing variables for this assignment. We will create a \"percentage of owner-occupied households\" by diving the \"Total owners' household\" with the \"Total\" number of households in Illinois.`","pinned":false,"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(\"County_Illinois.csv\").text(),({GISJOIN, Total, Owner_occupied, Renter_occupied}) => [GISJOIN, +Owner_occupied/+Total])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"csv_data_objects = Object.assign((d3.csvParse(await FileAttachment(\"County_Illinois.csv\").text(), d3.autoType)).map(({GISJOIN, Total, Owner_occupied, Renter_occupied}) => ({GISJOIN: +GISJOIN, ownerpec: +Owner_occupied/+Total})))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"md`## 2. Histogram plot for the owners' occupied household In Illinois.`","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, 100], {step: 1, label: \"Bins\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"md`This below line of code is creating an input element that allows the user to specify the number of bins to be used in a histogram. The Inputs.range() method creates a slider input that ranges from 0 to 100, with a step of 1 and a label of \"Bins\". The viewof keyword is a special feature of Observable that allows to define an input element in one cell and access its value in another cell.\nIn other words, this line of code is creating a range input with a slider that allows the user to choose the number of bins to be used in a histogram, and the value of the input can be accessed later in the code.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"md`This following code creates a simple histogram using the Plot function from the vega-lite-api library in Observable.\n\nFirst, it creates a \"rect\" mark using the \"Plot.rectY()\"\" function to generate the rectangles for the histogram bars. The y property is set to \"count\" to represent the number of observations in each bin, and the x property is set to \"ownerpec\", the variable to be plotted. The Plot.binX() function is used to create the bins based on the specified thresholds array. The thresholds array contains the number of bins, and the range of values that should be included in each bin.\n\nNext, a rule mark is added using Plot.ruleY() to draw a horizontal line at the y=0 position to represent the x-axis.\n\nFinally, these two marks are passed to the Plot.plot() function to create the complete histogram plot.`","pinned":false,"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: \"ownerpec\", 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":602,"value":"md`### 2.1 Description of the Histogram Chart`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"md`The histogram chart to show the percentage of owner's home in counties of Illinois. I have found that the distribution appears to be normal, with a skew towards the right side. In a normal distribution, the data is symmetrical around the mean, with the majority of values clustering around the center of the distribution and relatively fewer values at the extremes. This means that there are more counties with lower percentages of owner-occupied homes and relatively fewer counties with higher percentages of owner-occupied homes. This skew could be caused by a variety of factors, such as differences in income, housing affordability, or demographics across the counties. `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"ownerpec = 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":28,"value":"data = Object.assign(new Map(csv_data), {title: [\"Percent of Owner occupied household\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"md`## 3. Map values into a linear scale (unclassed)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"$49","pinned":false,"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(ownerpec))\n .range([\"red\", \"yellow\"])","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(ownerpec), linear)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"md`In the above code, numericSort(ownerpec) sorts the ownerpec array in ascending order using a numeric comparison function. The sorted ownerpec array is then passed as the first argument to the chart function.\nThe second argument to chart is linear, which is a linear scale created using d3.scaleLinear(). This scale maps values in the ownerpec domain to colors in a continuous red to blue range. So, the chart function is being called with the sorted ownerpec array as its first argument and a linear scale linear as its second argument.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"md`## 4. Equal Interval (Quantile) Classification`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"quantile = d3.scaleQuantile() // Create a new quantile scale\n .domain(ownerpec) // Set the input domain to the ownerpec array\n .range([\"white\", \"#99d500\", \"green\"]) // Set the output range of colors for the scale","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(ownerpec), quantile)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"md`## 5. Quantize Classification`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"Quantize = d3.scaleQuantize() // Create a new quantize scale\n .domain(d3.extent(ownerpec)) // Set the input domain to the extent of the \"ownerpec\" array\n .range([\"white\", \"pink\", \"red\"]) // Set the output range of colors for the scale","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"chart(numericSort(ownerpec), Quantize)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"md`## 6. 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":547,"value":"md`Natural breaks classification is a method used to classify quantitative data into classes based on the similarity of values within each class and the dissimilarity between classes. It is a form of unsupervised machine learning used in data analysis and cartography. `","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(ownerpec, 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":549,"value":"md`The above code is using the \"simple.ckmeans\" function from the simple-statistics library to perform a Jenks natural breaks classification on the ownerpec data array. The \"simple.ckmeans\" function applies the Jenks optimization algorithm to the data array and returns an array of arrays containing the upper bounds of each class. The map method is then used to extract the upper value of each class (i.e., the maximum value in each class). The resulting array contains the upper bounds of each class, with one less value than the number of classes. This array can be used to assign colors or styles to each data value based on which class it belongs to. This method aims to create meaningful and informative class boundaries that accurately reflect the underlying structure of the data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"md`This following code is using D3's scaleThreshold() method to create a threshold scale, which is a type of discrete scale where the input domain is divided into separate bands or categories. The domain of the threshold scale is set to the naturalbreaks array, which contains the upper bounds of each class determined by the Jenks natural breaks classification. The range of the threshold scale is set to an array of color values, where each color corresponds to one of the classes. In this case, the colors are \"green\" for the first class, \"#99d500\" for the second class, and \"yellow\" for the third class. The resulting jenks scale can be used to assign colors or styles to data values based on which class they belong to, using the jenks(value) method.`","pinned":false,"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([\"green\", \"#99d500\", \"yellow\"])","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(ownerpec), jenks)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"md`## 7. Manual Classification (Threshold)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"md`The following code creates a threshold scale for manual classification. The d3.scaleThreshold() function creates a new threshold scale. The domain method specifies the domain of the input data which is a three-element array in this case, containing the three threshold values [0.6905710102489019, 0.7995997508453462, 0.8968151715833835] that divide the data into four classes. The range method specifies the color to be associated with each class in the output, which is an array with four elements, in this case [\"blue\", \"#99d594\", \"green\"].\n\nWhen the scale is called with an input value, it returns the corresponding color from the range based on which class the input value falls into. This code is useful for manually setting the thresholds for a data set to define the classes based on some criteria. In this case, the data will be divided into four classes based on the threshold values and the color scheme in the range will be applied to represent each class.`","pinned":false,"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([0.6905710102489019, 0.7995997508453462, 0.8968151715833835])\n .range([\"blue\", \"#99d594\", \"green\"])","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(ownerpec), 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(ownerpec, {\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":576,"value":"md`This above code is calling the \"showScaleGrouping()\"\" function and passing it two arguments: \"ownerpec\" and an object with several properties, each representing a different type of scale (i.e., quantile, threshold, Jenks, quantize, and quantize) along with its corresponding scale object.\n\nThe \"showScaleGrouping()\" function is likely defined somewhere else in the code and is responsible for displaying a visual representation of the data using different color scales. The function takes two arguments: data and an object containing the different scale types and their corresponding scale objects.\n\nThe purpose of this code is to show the \"ownerpec\" data using different color scales (quantile, threshold, Jenks, quantize, and quantize), and to visually compare how the data is classified and colored using each of these scales.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null