2b:null 2c:["$","title",null,{"children":"Second Exercise on Observable: Classification and Colors | lorettaNwajiaku's Workspace | Observable"}] 31:T528,The data and number of classes are passed into the function assigned to natural breaks and the natural breaks are created and stored in an array. The .domain takes in the natural breaks data as an argument because it is the data you want to classify and creates the classes and breaks unlike the manual classifiaction where we have to set the breaks manually. here you input the data, in this case (PopChn) and the number of classes. I chose 6 classes to be able to show the variabilty in population change as well as the outliers. Percentages less than or equal to -34.69387755102041 will be mapped to the color #8c510a (brown). Percentages greater than -34.69387755102041 and less than or equal to -17.44452945677123 will be mapped to the color #d8b365 (light brown). Percentages greater than -17.44452945677123 and less than or equal to -7.404007954719289 will be mapped to the color #f6e8c3 (light yellow). Percentages greater than -7.404007954719289 and less than or equal to -0.369332654100866 will be mapped to the color #c7eae5 (light cyan). Percentages greater than -0.369332654100866 and less than or equal to 8.001606345063 will be mapped to the color #5ab4ac (turquoise). Percentages greater than 8.001606345063 and less than or equal to 26.501264618235542 will be mapped to the color #01665e (dark cyan). 32:T53b,The range produces the number of classes and the domains are the break points for the classes. For the domain, i chose -30,-10, 0 and 26.5 to emphaise exteme values given 26.5 and -34 are outliers and 0 because of the frequency of the values before it. I chose -10 because values below -10, happen less frequently than any other part of the data as shown in the histogram. I also considered choosing nice numbers since the data ranges from -30 to 30 as shown in the histogram. I chose this divergent color scheme frm colorbrewer because of the nature of the data to have negative and positve values with a critical middle point and created 5 classes to show this distribution highlighting the outliers. The colors in the range represents the classes according and the figures in the domains represents the manual break points between the classes. - percentages less than or equal to -30 will be mapped to the color #a6611a (orange). - Percentages greater than -30 and less than or equal to -10 will be mapped to the color #dfc27d (light brown). - Percentages greater than -10 and less than or equal to 0 will be mapped to the color #f5f5f5 (white). - Percentages greater than 0 and less than or equal to 26.5 will be mapped to the color #80cdc1 (light blue). - Percentages greater than 26.5 will be mapped to the color #018571 (green). 33: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; }34:[{"id":"26625e0e470f05836a45d3637ced65df5b1d355fa32ac70e7105fb8609960ab6698fee7ce39a7397a826aabb5950caea81ee08840ec73e9060e0bf2e45f232a4","href":"https://static.observableusercontent.com/files/26625e0e470f05836a45d3637ced65df5b1d355fa32ac70e7105fb8609960ab6698fee7ce39a7397a826aabb5950caea81ee08840ec73e9060e0bf2e45f232a4","name":"GADM.json","type":"application/json","lastModified":1708114802115.127,"size":57498},{"id":"59a748b31f6826aba5f25ad2da5a51e81786dd3d18727464e09630eba9d6b046d9be5db5262dc5ddf719f0c5ea5395f88f503ab92a10069e29257fdb2f3e71f4","href":"https://static.observableusercontent.com/files/59a748b31f6826aba5f25ad2da5a51e81786dd3d18727464e09630eba9d6b046d9be5db5262dc5ddf719f0c5ea5395f88f503ab92a10069e29257fdb2f3e71f4","name":"NEBRASKA.csv","type":"text/csv","lastModified":1708115279825.884,"size":7187}] 2f:{"id":"471f375a4550775a","slug":null,"title":"Second Exercise on Observable: Classification and Colors","thumbnail":"a5a149344bf12793b59dc61fd5104e0fd71a4c291168629b680aa14ce157ca26","access_level":"public","create_time":"$D2024-02-16T20:17:35.384Z","update_time":"$D2024-02-21T04:52:07.182Z","view_time":null,"first_public_time":"$D2024-02-20T03:39:25.739Z","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":"dc6e87c9fcdec0aa","login":"lorettanwajiaku-ws","name":"lorettaNwajiaku's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/1df71499af57b81d9f9eb8865a3f34dfddfac96df8dc2fca596c4c7b28396700","tier":"starter_2024","bio":""},"version":695,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f4ed16e168c48303","login":"lorettanwajiaku","name":"lorettaNwajiaku","avatar_url":"https://avatars-next.observableusercontent.com/748df1c4fd3cd263261c0b371add46f6208d87746efd4ae8c04a0d9ab287ff08","tier":null,"bio":""}],"members":[{"type":"individual","id":"f4ed16e168c48303","login":"lorettanwajiaku","name":"lorettaNwajiaku","avatar_url":"https://avatars-next.observableusercontent.com/748df1c4fd3cd263261c0b371add46f6208d87746efd4ae8c04a0d9ab287ff08","tier":null,"role":"editor"},{"type":"team","id":"dc6e87c9fcdec0aa","login":"lorettanwajiaku-ws","name":"lorettaNwajiaku's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/1df71499af57b81d9f9eb8865a3f34dfddfac96df8dc2fca596c4c7b28396700","tier":"starter_2024","role":"viewer"}],"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":"states = FileAttachment(\"GADM.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.GADM)","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(\"NEBRASKA.csv\").text(),({fips, pop2010, pop2024}) => [+fips,[+pop2024 - +pop2010]/ +pop2010 * 100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"csv_data_objects = Object.assign((d3.csvParse(await FileAttachment(\"NEBRASKA.csv\").text(), d3.autoType)).map(({fips, pop2010, pop2024}) => ({FIPS: +fips, PopChn:[+pop2024 - +pop2010]/ +pop2010 * 100})))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"The histogram is a unimodal distribution with one peak at the 6th bin. The x-axis shows the values of the percentage change (PopChn) values fall between -30 to 30. Values such as -34 and 24 are outliers and also apears once. The X-axis represents the frequency i.e the number of tmes a value apears in the distribution. Most of the data fall into the 4th to 7th bin showing higher frequencies. The Plot.binX({y: \"count\"}, {x: \"PopChn\", thresholds: bins}) groups the values into bins or classes based on the normalized variable which is the \"PopChn\" field.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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","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: \"PopChn\", 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":25,"value":"//this is how to take the values of a variable (column) from all variables you created from the csv file\nPopChn = 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":"//this is how you map the id column to the values. We will use this for joining with topojson later. \ndata = Object.assign(new Map(csv_data), {title: [\"Percentage Population Change\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"d3.extent(PopChn)\n","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":451,"value":"linear = d3.scaleLinear()\n.domain(d3.extent(PopChn))\n.range([\"#ef8a62\", \"#999999\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"An unclassed map or linear scale is created using raw data. The scale linear function takes the raw data as input the colors and plot them together directly without any sort of grouping. In this case, the percentage population change data. The domain data is derived from the minimum and maximum values of the data .domain([d3.min (PopChn), d3.max(PopChn)]) which is shortened into .domain(d3.extent(PopChn)). Here, it is very difficult to differentiate all the colors. The .range function is used to assign colors to the variables based on its values, the first color represent the minimum value, while the second color represents the maximum values, the intemediate color represents the values inbetween. The colors were derived from copying the hex color codes of the sequential colors from ColorBrewers. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"chart(numericSort(PopChn), linear)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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(PopChn)\n .range([\"#d8b365\", \"#f5f5f5\", \"#5ab4ac\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"This chart shows us that 31 counties have a low population change, 31 counties have a moderate population change and 31 counties have high population. The data is divided into three equal classes with the same number of observations each. Here, the countires are distributed equally across levels of population change. in the .range, the first color, represents low population change, the median color represents moderate population change and the last color represents high population change.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":498,"value":"Each class comprise of the same number of observations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"chart(numericSort(PopChn), 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(PopChn, 6).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([\"#8c510a\", \"#d8b365\", \"#f6e8c3\", \"#c7eae5\" , \"#5ab4ac\" , \"#01665e\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":330,"value":"chart(numericSort(PopChn), 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":548,"value":"quantize = d3.scaleQuantize()\n .domain(d3.extent(PopChn)) // pass only the extreme values to a scaleQuantize’s domain\n .range([\"#d8b365\", \"#f5f5f5\", \"#5ab4ac\" ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"In the quantize classification, the data, in this case, population data is passed into the domain where it passes only the extreme values(minimum and maximum). It divides the class into three equal interval classes and assigns each interval to a color set in the .range method. The intervals are assigned automatically with the scaleQuantize() function and each valaue responding which falls within the interval is assigned a particular color. The first interval is assigned to #d8b365 lightbrown, the second, #f5f5f5 white and the third #5ab4ac tourquiose.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":552,"value":"chart(PopChn, quantize)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"md`# Threshold (Manual Classification)`","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([-30, -10, 0, 26.5])\n .range([\"#a6611a\", \"#dfc27d\", \"#f5f5f5\", \"#80cdc1\" , \"#018571\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":297,"value":"chart(numericSort(PopChn), 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(PopChn, {\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":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":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"