29:null 2a:["$","title",null,{"children":"Second Exercise on Observable: Classification and Colors | Camille Lust | 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":1676603397548.13,"size":25543},{"id":"cebcca49f80541efc6820907fd1b3096d5c95574ddbbdac4d57fe6bc342d89026ccd851d16cc186eee115565d800dfe8cb3589069d3d4dd16fdcbcc75db6dd3b","href":"https://static.observableusercontent.com/files/cebcca49f80541efc6820907fd1b3096d5c95574ddbbdac4d57fe6bc342d89026ccd851d16cc186eee115565d800dfe8cb3589069d3d4dd16fdcbcc75db6dd3b","name":"Alaska@1.csv","type":"text/csv","lastModified":1676603397548.13,"size":8290},{"id":"39e46cd084a4cf3c449b88ebfa8b2069fbdca01d3a6c1372c642de80ef6eca2d573596b3c084d1998e5ec687614168f97e29d762eee144c70df0aa1da5267bd2","href":"https://static.observableusercontent.com/files/39e46cd084a4cf3c449b88ebfa8b2069fbdca01d3a6c1372c642de80ef6eca2d573596b3c084d1998e5ec687614168f97e29d762eee144c70df0aa1da5267bd2","name":"County2010washWGS84.dbf.csv","type":"text/csv","lastModified":1676604680087.314,"size":12097},{"id":"c4bc42bb565c67d7af9c632ebab024dc62b5a5661a5c2dd0796aa4aa7ac6ed8b04bc37050a41e19d8da14f12a1db9d61ba088842ec61650ce298bd25f8812572","href":"https://static.observableusercontent.com/files/c4bc42bb565c67d7af9c632ebab024dc62b5a5661a5c2dd0796aa4aa7ac6ed8b04bc37050a41e19d8da14f12a1db9d61ba088842ec61650ce298bd25f8812572","name":"County2010washWGS84.json","type":"application/json","lastModified":1676604680519.04,"size":517621}] 2d:{"id":"77c5cd430c7b1d33","slug":null,"title":"Second Exercise on Observable: Classification and Colors","thumbnail":"ef54fc5ca87a3cc3f6f31aa2b71a371b15f2fdfa5841152598bd3ed085dba5b4","access_level":"public","create_time":"$D2023-02-17T03:09:57.548Z","update_time":"$D2023-02-21T01:05:03.989Z","view_time":null,"first_public_time":"$D2023-02-17T03:09:57.548Z","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":"2a325a1ace3aa5d7","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":"starter_2024"},"version":508,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}],"members":[{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null,"role":"editor"}],"comments":[{"id":"dc3e6fe563db4f9f","reply_to_id":null,"content":"This is where you can change the way that you are classifying your data. For example, you could change \"linear\" to \"unclassed\" if you are wanting to look at your data in an unclassed way","create_time":"$D2023-02-17T03:17:58.636Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}},{"id":"9077b6d56b9656a4","reply_to_id":null,"content":"\"Chart\" takes the data and the classification method to then create your visualization","create_time":"$D2023-02-17T03:19:14.436Z","update_time":"$D2023-02-17T03:19:26.298Z","resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}},{"id":"782bebf8de86f091","reply_to_id":null,"content":"manually putting in values for where you want the breaks to be","create_time":"$D2023-02-17T03:49:02.315Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}},{"id":"757af049ee6409d1","reply_to_id":null,"content":"Creates the breaks for you, in the drop-down from \"array(3)\" for where the breaks are","create_time":"$D2023-02-17T03:49:41.074Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}},{"id":"7221225aafb1fcb4","reply_to_id":"757af049ee6409d1","content":"This is also where we are generating classes, different from our unclassed because we created classes now","create_time":"$D2023-02-17T03:50:44.515Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}},{"id":"58f2dc479c754045","reply_to_id":null,"content":"This is a more compact/neat way to find the min/max of your dataset","create_time":"$D2023-02-17T03:53:46.998Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}},{"id":"aa2e3e643edc7f7c","reply_to_id":null,"content":"You just enter how many visual variables you want under \"range\" instead of specifying how many intervals you want","create_time":"$D2023-02-17T15:41:46.154Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}},{"id":"6f1dae43e3d3f604","reply_to_id":null,"content":"Equal number of observations for each color","create_time":"$D2023-02-17T15:42:56.597Z","update_time":"$D2023-02-21T00:55:35.436Z","resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}},{"id":"6ac57f9ed973c06e","reply_to_id":null,"content":"Percent population white in Washington Counties","create_time":"$D2023-02-17T15:44:06.974Z","update_time":"$D2023-02-21T01:05:52.788Z","resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}},{"id":"680d2fc3d964741d","reply_to_id":"782bebf8de86f091","content":"The number of breaks that you put in the domain line is how many classes we will have","create_time":"$D2023-02-17T15:58:13.937Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}},{"id":"0a54af6471d81d8e","reply_to_id":null,"content":"I chose the breaks to be where they are because of the min and max of our dataset. Because the range is very small, the values/breaks had to be quite close to each other.","create_time":"$D2023-02-20T21:06:14.634Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}},{"id":"59e5f9fbe432ca1e","reply_to_id":null,"content":"Within this histogram we can see overall that it is skewed to the left, with there being more counties that have a higher percentage of white population. This makes sense with the rest of the classifications that we made later in this exercise because some of them are mostly the last color/ the highest value in the classifications. It also helps me to better understand why even in our unclassed set there are still multiple squares with the same value, because a lot of these counties have similar values on the right side of the histogram. Even as you increase the number of bins there are still multiple counties that share the same or very similar values.","create_time":"$D2023-02-21T00:51:03.339Z","update_time":"$D2023-02-21T00:51:43.401Z","resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}},{"id":"d03742a562b1e343","reply_to_id":"dc3e6fe563db4f9f","content":"This function takes your data and orders it from low to high, or the full extent or domain of your data, and then takes your color scheme and creates a continuous color scheme for the values. In this example we can see that some of the values/squares are the same color, which means that there are squares that have the same or very similar values.","create_time":"$D2023-02-21T00:53:30.399Z","update_time":"$D2023-02-21T00:54:03.907Z","resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}},{"id":"b3ce398a228e4c58","reply_to_id":"dc3e6fe563db4f9f","content":"The range function symbolizes that the two colors are going to make up the full range of values and that the first color is the minimum of the range and that the second one is the high end of the range and all of the colors in between represent the values in the middle of the range.","create_time":"$D2023-02-21T00:55:05.422Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}},{"id":"098f37c86eaa13ef","reply_to_id":"6f1dae43e3d3f604","content":"When using the domain function with scale quantile you can just add your full dataset.","create_time":"$D2023-02-21T00:56:43.968Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}},{"id":"88cc80521d90eccb","reply_to_id":"aa2e3e643edc7f7c","content":"This method rounds and groups the observations into classes based on the number of colors we provide. This method may lead to more observations in each class than others because it does involve using rounding.","create_time":"$D2023-02-21T00:59:24.447Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}},{"id":"566dde41c126060d","reply_to_id":"757af049ee6409d1","content":"These breaks are generated based on natural gaps, or breaks, in the data. Recognizes the little clumps of data and groups the data based on these.","create_time":"$D2023-02-21T01:00:55.849Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}},{"id":"bfff78ef021a178b","reply_to_id":"6f1dae43e3d3f604","content":"The number of classes is determined by how many colors you specify","create_time":"$D2023-02-21T01:04:42.970Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}},{"id":"8e23ecd7f9feaae2","reply_to_id":"757af049ee6409d1","content":"The number of classes is determined by the number of colors you specify","create_time":"$D2023-02-21T01:05:21.365Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}}],"custom_thumbnail":false,"trashed":false,"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"},{"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":436,"value":"counties = FileAttachment(\"County2010washWGS84.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"county_features = topojson.feature(counties, counties.objects.County2010washWGS84)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"csv_data = d3.csvParse(await FileAttachment(\"County2010washWGS84.dbf.csv\").text(),({COUNTYFP10, POPWHITE, POP10}) => [COUNTYFP10, +POPWHITE/+POP10])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":400,"value":"csv_data_objects = Object.assign((d3.csvParse(await FileAttachment(\"County2010washWGS84.dbf.csv\").text(), d3.autoType)).map(({COUNTYFP10, POPWHITE, POP10}) => ({FIPS: +COUNTYFP10, pctwhite: +POPWHITE/+POP10})))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"viewof bins = Inputs.range([0, 100], {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: \"pctwhite\", thresholds: bins})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"whitepct = Array.from(csv_data.values(), d => d[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"data = Object.assign(new Map(csv_data), {title: [\"Percent Population of Washington That is White\"]})","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":429,"value":"d3.min(whitepct)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":427,"value":"d3.max(whitepct)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"unclassed = d3.scaleLinear()\n .domain(d3.extent(whitepct))\n .range([\"#edf8b1\", \"#2c7fb8\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":199,"value":"chart(numericSort(whitepct), unclassed)","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(whitepct)\n .range([\"#fde0dd\", \"#fa9fb5\", \"#c51b8a\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"chart(numericSort(whitepct), 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(whitepct, 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([\"#e7e1ef\", \"#c994c7\", \"#dd1c77\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"chart(numericSort(whitepct), 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":487,"value":"d3.extent(whitepct)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":276,"value":"quantize = d3.scaleQuantize()\n .domain([d3.min(whitepct),d3.max(whitepct)])\n .range([\"#f6eff7\",\"#bdc9e1\",\"#67a9cf\", \"#02818a\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"chart(numericSort(whitepct), 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":502,"value":"d3.min(whitepct)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":504,"value":"d3.max(whitepct)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":289,"value":"threshold = d3.scaleThreshold()\n .domain([0.7, 0.8])\n .range([\"#fee8c8\", \"#e34a33\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":297,"value":"chart(numericSort(whitepct), threshold)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":355,"value":"showScaleGrouping(whitepct, {\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"