29:null 2a:["$","title",null,{"children":"Second Exercise on Observable: Classification and Colors | Maryam Torkashvand | 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":1676997651458.336,"size":25543},{"id":"cebcca49f80541efc6820907fd1b3096d5c95574ddbbdac4d57fe6bc342d89026ccd851d16cc186eee115565d800dfe8cb3589069d3d4dd16fdcbcc75db6dd3b","href":"https://static.observableusercontent.com/files/cebcca49f80541efc6820907fd1b3096d5c95574ddbbdac4d57fe6bc342d89026ccd851d16cc186eee115565d800dfe8cb3589069d3d4dd16fdcbcc75db6dd3b","name":"Alaska@1.csv","type":"text/csv","lastModified":1676997651458.336,"size":8290},{"id":"d028b7a9efcebae68e5c26f6caf8d4da1bdbc456e4a5229e723c9ff0b3beb433c408f8cf8fa6d1c75e7fa9660df8d1b9c1dd8e8f632ac1e92d3e7ca74a23adea","href":"https://static.observableusercontent.com/files/d028b7a9efcebae68e5c26f6caf8d4da1bdbc456e4a5229e723c9ff0b3beb433c408f8cf8fa6d1c75e7fa9660df8d1b9c1dd8e8f632ac1e92d3e7ca74a23adea","name":"US_county_1920_WGS84.json","type":"application/json","lastModified":1677010272369.03,"size":47384608},{"id":"ec02936b8e547918d6ebe3749fc67b6df295ffd55db5b9fd7f73a8da40c4490197f81ca264c9d1d88277fa863c19f29c4e427744ac5f3883f78c45c9bce40390","href":"https://static.observableusercontent.com/files/ec02936b8e547918d6ebe3749fc67b6df295ffd55db5b9fd7f73a8da40c4490197f81ca264c9d1d88277fa863c19f29c4e427744ac5f3883f78c45c9bce40390","name":"Populationbyrace_1920.csv","type":"text/csv","lastModified":1677010498579.783,"size":221896}] 2d:{"id":"ce48f4bbd62d3aaa","slug":null,"title":"Second Exercise on Observable: Classification and Colors","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-02-21T16:40:51.458Z","update_time":"$D2023-02-22T15:24:04.476Z","view_time":null,"first_public_time":"$D2023-02-21T16:40:51.458Z","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":"3398a8428d5fb276","login":"maryamtd","name":"Maryam Torkashvand","avatar_url":"https://avatars-next.observableusercontent.com/05a584e3d1cc226fc7b63bc6db9ea3ec7381ff14daac543a9337b77b883a4e1a","tier":"starter_2024"},"version":615,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"94f7e9be56450899","login":"maryamtd","name":"Maryam Torkashvand","avatar_url":"https://avatars-next.observableusercontent.com/05a584e3d1cc226fc7b63bc6db9ea3ec7381ff14daac543a9337b77b883a4e1a","tier":null}],"members":[{"type":"individual","id":"94f7e9be56450899","login":"maryamtd","name":"Maryam Torkashvand","avatar_url":"https://avatars-next.observableusercontent.com/05a584e3d1cc226fc7b63bc6db9ea3ec7381ff14daac543a9337b77b883a4e1a","tier":null,"role":"editor"}],"comments":[{"id":"ea69e8d8f2691706","reply_to_id":null,"content":"Defining new attributes","create_time":"$D2023-02-21T23:39:36.238Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"94f7e9be56450899","login":"maryamtd","name":"Maryam Torkashvand","avatar_url":"https://avatars-next.observableusercontent.com/05a584e3d1cc226fc7b63bc6db9ea3ec7381ff14daac543a9337b77b883a4e1a","tier":null}},{"id":"305f0ab6436eb205","reply_to_id":null,"content":"Extracting our column which we want to use for classification.","create_time":"$D2023-02-22T02:18:39.932Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"94f7e9be56450899","login":"maryamtd","name":"Maryam Torkashvand","avatar_url":"https://avatars-next.observableusercontent.com/05a584e3d1cc226fc7b63bc6db9ea3ec7381ff14daac543a9337b77b883a4e1a","tier":null}},{"id":"eeba8d9ea212b9f6","reply_to_id":null,"content":"The histogram of the data is shows that the distribution of the data is not normal. The majority of data is cluster around the maximum value. Here shows that the rate of white population in 1920 in relate to the total population was around 1, which shows the majority of population was white people.","create_time":"$D2023-02-22T02:24:41.199Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"94f7e9be56450899","login":"maryamtd","name":"Maryam Torkashvand","avatar_url":"https://avatars-next.observableusercontent.com/05a584e3d1cc226fc7b63bc6db9ea3ec7381ff14daac543a9337b77b883a4e1a","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"97010e8400167154","slug":"geovisualization-course","title":"Geovisualization course","owner":{"id":"3398a8428d5fb276","login":"maryamtd","name":"Maryam Torkashvand"}},"type":"notebook","body":{"title":"Second Exercise on Observable: Classification and Colors","cells":[{"id":0,"value":"md`# Second Exercise on Observable: Classification and Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":421,"value":"md` ## Assignment 2\n### Maryam Torkashvand\n\nIn this assignment we exctract a variable from the data and use classsify the data based on the variable using different classification methods.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":445,"value":"md`Importing d3 (data vidualization) and topojson libraries. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":448,"value":"md`Reading the US-counties shapefile, which is in topojson format.\nNext step: use the feature function in the topojson library and define the “counties_features” variable from the objects of the data. In “counties_feature,” we can see the coordinates of each feature and check that our projection is WGS84`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":455,"value":"US_counties_1920 = FileAttachment(\"US_county_1920_WGS84.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":440,"value":"populationbyrace_1920 = await FileAttachment(\"Populationbyrace_1920.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"features = topojson.feature(US_counties_1920, US_counties_1920.objects.US_county_1920_WGS84)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"population_data = d3.csvParse(await FileAttachment(\"Populationbyrace_1920.csv\").text(),({COUNTY, TotalPop, WhitePop, NonWhitePop}) => [COUNTY, +WhitePop/+TotalPop, NonWhitePop/TotalPop])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":400,"value":"PopulationRatebyRace = Object.assign((d3.csvParse(await FileAttachment(\"Populationbyrace_1920.csv\").text(), d3.autoType)).map(({COUNTY, TotalPop, WhitePop, NonWhitePop}) => ({COUNTY: COUNTY, WhitePopRate: +WhitePop/+TotalPop, NonWhitePopRate: +NonWhitePop/+TotalPop})))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"viewof bins = Inputs.range([0, 20], {step: 1, label: \"Bins\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":394,"value":"Plot.plot({\n marks: [\n Plot.rectY(PopulationRatebyRace, Plot.binX({y: \"count\"}, {x: \"WhitePopRate\", thresholds: bins})),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":487,"value":"County_name = Array.from(population_data.values(), d => d[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"White_Rate = Array.from(population_data.values(), d => d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":491,"value":"NonWhite_Rate = Array.from(population_data.values(), d => d[2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"data = Object.assign(new Map(population_data), {title: [\"White Population Percentage in 1920\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":174,"value":"md`# Linear Scale (Unclassed)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":552,"value":"md`In linear or unclassed classification method, we need to define the minimum and maximum of our data as the domain. \"extent\" function in d3 library defines this domain based on the max and min values of the data. We need to define two colors for min value and value. Based on the value of each cell, the lightness of color will be changed. So, the lightness of the color is scaled linearly.\nOur data here gradually increase in value, and the majority of the data is near to maximum value`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"linear = d3.scaleLinear()\n .domain(d3.extent(White_Rate))\n .range([\"#fde0dd\", \"#c51b8a\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":199,"value":"chart(numericSort(White_Rate), linear)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":267,"value":"md`# Quantile Classification\nThis method is based on the order. It first orders the data and classifies the data into low, medium, and high. The number of classes is defined based on the colors we define in the .range function. We should have an equal number of cells in each color. Based on our data distribution and properties, it is not a good method of classification for our data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":272,"value":"quantile = d3.scaleQuantile()\n .domain(White_Rate)\n .range([\"#e7e1ef\", \"#c994c7\", \"#dd1c77\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"chart(numericSort(White_Rate), quantile)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":323,"value":"md`# Jenks Natural Breaks Classification\nThe natural break method is based on statistics in the data, like median and mean. Our data does not have a normal distribution, so this method is inappropriate. It is obvious that the breaks are all calculated the same which is the most data around that.\nWe can use the \"ckmeans\" function to calculate natural breaks and define the number of classes. Based on the number of classes, we need to define the colors as parameters .range function.\nWe can use the name of colors like \"green\" or the HEX code of colors to define colors for classes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":373,"value":"naturalbreaks = simple.ckmeans(White_Rate, 5).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([\"#fde0dd\", \"#fa9fb5\", \"#c51b8a\", \"#dd1c77\", \"#8856a7\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"chart(numericSort(White_Rate), jenks)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":280,"value":"md`# Equal Interval Classification (Quantize)\nThis function also gets the minimum and maximum values of our data and breaks the data into equal intervals. The number of classes can be defined by defining the colors. So, the number of classes is based on the number of classes we enter in the .range function.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":276,"value":"quantize = d3.scaleQuantize()\n .domain(d3.extent(White_Rate))\n .range([\"#edf8b1\", \"#e0f3db\",\"#a1dab4\", \"#2c7fb8\" , \"#7bccc4\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"chart(numericSort(White_Rate), quantize)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":295,"value":"md`# Threshold\nIt is similar to the manual method of classification. We define breaks manually based on the data distribution or our preference. Here we define three break points, so we need to define four colors for our four classes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":289,"value":"threshold = d3.scaleThreshold()\n .domain([0.1, 0.5, 0.64])\n .range([\"#f2f0f7\", \"#9e9ac8\", \"#756bb1\", \"#810f7c\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":297,"value":"chart(numericSort(White_Rate), threshold)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":588,"value":"md`# Summery\nHere, in the following chart, we can see the data distribution, in which the most values are around the maximum border. Also, the classification comparison shows why quantile and natural break methods didn't reveal the differences in the data. Because of fewer data distributions around the minimum values, the breakpoints are calculated in the maximum values. Quantize, however, make equal intervals regardless of values.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":355,"value":"showScaleGrouping(White_Rate, {\n scaleQuantile: quantile,\n scaleThreshold: threshold,\n scaleJenks: jenks,\n scaleQuantize: quantize,\n scaleQuantizeNice: quantize.copy().nice()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"md`# Annex`","pinned":false,"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"},{"id":613,"value":"md`The chart function changes the size of cells and other properties. W: the size of cells, cols: number of columns, lines: number of rows. To increase the number of cells, you need to change col min.\nThe number of data is on inside properties: map(1990)\n\nMinimap shows the independency between codes\n \n//: writing comments`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"