2e:null 2f:["$","title",null,{"children":"Adding a Touch of Class to our Data: Second Exercise on Observable | kschlotfelt | Observable"}] 34: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; }35:[{"id":"f67e796f545af3f90b438634479f279466d64bfe6c53d68ca5db337fcc4755ab21b2f885c20810da99bb9646045ec25b6e0d9293764ad4da493a52f4f425a95f","href":"https://static.observableusercontent.com/files/f67e796f545af3f90b438634479f279466d64bfe6c53d68ca5db337fcc4755ab21b2f885c20810da99bb9646045ec25b6e0d9293764ad4da493a52f4f425a95f","name":"Census2010_MN.csv","type":"text/csv","lastModified":1614615960023.505,"size":5844},{"id":"c01edca9163d96944de5172417eaee5c8b6f23daaa79c7a35c6ab34cc17102190eaea19938f52076d57b5c15891766000af16a1ce337a415f5a4e5ef1e0ce0e0","href":"https://static.observableusercontent.com/files/c01edca9163d96944de5172417eaee5c8b6f23daaa79c7a35c6ab34cc17102190eaea19938f52076d57b5c15891766000af16a1ce337a415f5a4e5ef1e0ce0e0","name":"mn_state_WGS84.json","type":"application/json","lastModified":1614615961438.547,"size":467637}] 32:{"id":"40067f89407d5ade","slug":"adding-a-touch-of-class-to-our-data-second-exercise-on-observ","title":"Adding a Touch of Class to our Data: Second Exercise on Observable","thumbnail":"fef0e659c71c81dcda518a5d0f8f1cb012d248e21c2a2c8c9419adfb683706fe","access_level":"public","create_time":"$D2021-02-22T15:36:23.308Z","update_time":"$D2021-03-01T21:16:57.179Z","view_time":null,"first_public_time":"$D2021-03-01T21:15:33.254Z","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":"a6b54836bf2ba944","login":"kschlotfelt","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7569a776bf0ef00222bd619b2664d9a2eb1178109711d54b5d3e77d0e44c9f3","tier":"starter_2024"},"version":616,"publish_version":616,"role":null,"authored":false,"authors":[{"type":"individual","id":"609bb7bef6c86031","login":"kschlotfelt","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7569a776bf0ef00222bd619b2664d9a2eb1178109711d54b5d3e77d0e44c9f3","tier":null}],"members":[{"type":"individual","id":"609bb7bef6c86031","login":"kschlotfelt","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7569a776bf0ef00222bd619b2664d9a2eb1178109711d54b5d3e77d0e44c9f3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Adding a Touch of Class to our Data: Second Exercise on Observable","cells":[{"id":0,"value":"md`# Adding a Touch of Class to our Data: Second Exercise on Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"md`The main purpose of the second assignment is to get familiar with classifications of our data and how to use color effectively. Here we will be using the data that we prepared in the last assingment - in my case, I will be using different classification methods to display the percent of Hispanic by county in Minnesota. So, first we want to bring in our visual libraries that we will pretty much always use: d3 and topojson.`","pinned":false,"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":"Minnesota = FileAttachment(\"mn_state_WGS84.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"county_features = topojson.feature(Minnesota, Minnesota.objects.mn_state_WGS84)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"csv_data = d3.csvParse(await FileAttachment(\"Census2010_MN.csv\").text(),({FIPS, Hispanic, TotalPop}) => [FIPS, [+Hispanic, +Hispanic/+TotalPop*100]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"md`Followed by my json file of Minnesota and my Census data (in a csv file format). Here we can find our population percentage by plugging this in: [FIPS, [+Hispanic, +Hispanic/+TotalPop]]. I wanted to see it in percent vs just decimal, so I multiplied by 100.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"HispanicPCT = Array.from(csv_data.values(), d => d[1][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: [\"Percent of Population of Hispanic Decent in Minnesota\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"md`# Some Things to Keep in Mind in Classifying`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"md`There are some key aspects you may need to think about when classifying your dataset. Such as: how many classes to use, which method would fit with your data, and what visual would make sense. In general, you want to stick to 3-7 classes, otherwise it can make it more difficult for your audience to read and understand. However, a smaller number of classes does simplify your data more. There are several different classification methods that can be used. I will be showing linear or unclassed, quantile, natural breaks, and equal interval.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"md`Note: I used colorbrew2.org for my color schemes. I chose to use a yellow/orange/red scheme because I thought it would show nicely since blues can sometimes be harder to read. You're able to easily copy + paste any of the themes from that website into Observable by using the JavaScript array. Just pick which one you like and click the export tab to get that.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"md`# Linear Scale (Unclassed)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"md`One of the easiest classifications is unclassed or linear. In a nutshell this means that every observation or value in your data has its own class or bin. These are typically best for smaller datasets - we're talking 100 or fewer values. You could argue that unclassesed data is better since it shows all the values in your data, however, it comes at a cost. It does become less legible, which is a large part of GIS and cartography.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"linear = d3.scaleLinear()\n .domain([d3.min(HispanicPCT),d3.max(HispanicPCT)])\n .range(['#ffeda0','#f03b20'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"md`To get a linear or unclassed classification you just find the min and max of your dataset. Then basically scale between those two values. This allows each data point to show and lets the reader or audience form their own interpretation of the data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"chart(numericSort(HispanicPCT), linear)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"md`# Quantile Classification`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"md`In a quantile classification you basically are splitting the dataset such as there are an equal amount of observations in each class or bin. So, this allows the audience to easily read the data and on our end we won't have any empty classes and it's simple to compute. Argueably, the biggest downside would be that some classes could have a huge range of values simply becuase it has the same quantity of observations as the other classes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"quantile = d3.scaleQuantile()\n .domain(HispanicPCT)\n .range(['#ffffb2','#fecc5c','#fd8d3c','#e31a1c'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"md`In the above code, we are using the quantile equation from the library, telling it what we want to classify (domain) and what the color range is.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"chart(numericSort(HispanicPCT), quantile)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"md`# Jenks Natural Breaks Classification`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"md`If you've ever worked with ArcMaps, you know a little about Jenks Natural Break. It tries to categorize the data by 'natural breaks.' But what exactly is a natural break? It basically attempts to create groups with the least variation within the classes and maximize the differences between classes. So, this classification can be nice to see distinct groups, but it is difficult to interpret the ranges.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"naturalbreaks = simple.ckmeans(HispanicPCT, 4).map(v => v.pop())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"jenks = d3\n .scaleThreshold()\n .domain(naturalbreaks)\n .range(['#ffffb2','#fecc5c','#fd8d3c','#e31a1c'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"md`If we want to change the number of classes then you can put that number in this code: simple.ckmeans(HispanicPCT, 4).map(v => v.pop()). Originally we had 3 classes then I put a 4 in there for 4 breaks. We had to define what the natural breaks were and where they were so that we could have that in the domain section.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"chart(numericSort(HispanicPCT), jenks)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`# Equal Interval Classification (Quantize)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"md`If we have our data in a histogram and then draw our classification barriers so that they're all equally spaced along the line, then we have used the equal interval classifcation. Basically, each classification has the same range. Of course this runs the risk of leaving us with some empty or tiny classes (see below, we have mostly yellow). That being said, this method is easy to calculate and interpret for readers.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"quantize = d3.scaleQuantize()\n .domain([d3.min(HispanicPCT),d3.max(HispanicPCT)])\n .range(['#ffffb2','#fecc5c','#fd8d3c','#e31a1c'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"chart(numericSort(HispanicPCT), quantize)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"md`# Manual Classification`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"md`Manual classification is exactly as it sounds. You, the map maker, are the one to define where the class breaks are. If you are trying to do something specific then manual can be really helpful. So, maybe you want to have the same legend between two maps to compare data distribution, then you may want to manually enter the breaks. That's what we did below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"manual = d3.scaleThreshold()\n .domain([3, 7, 15, d3.max(HispanicPCT)])\n .range(['#ffffb2','#fecc5c','#fd8d3c','#e31a1c'])\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"md`Here we were able to put in where we wanted the breaks and it would change the range of our classifications. You can put different values in the domain().`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"chart(numericSort(HispanicPCT), manual)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"md`# Visual Comparison of the Classification Methods`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"md`Below we can easily compare side-by-side all of the classifications we talked about.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"showScaleGrouping(HispanicPCT, {\n scaleQuantile: quantile,\n scaleJenks: jenks,\n scaleQuantize: quantize,\n scaleManual: manual,\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`# Annex`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"md`This is where we can check what kind of equations we used in some of the methods. Such as in jenks natural break we defined naturalbreak as simple.ckmeans which means that it uses the code below.`","pinned":false,"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 = 30,\n cols = Math.floor(Math.min(600, width) / w),\n lines = Math.ceil(100 / 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":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"