${data.title[0]}${labels[j] && ` (${labels[j]})`} ${data.title[1]}${labels[i] && ` (${labels[i]})`}

2b:null 2c:["$","title",null,{"children":"Bivariate Choropleth Mapping in Clinton, Iowa | Alyssa | Observable"}] 31:T449,md` Overall, Clinton has very low percentages of folks who identify as Black or African American. The values that are categorized as "high" are 0.049% to 0.254%. This means that a map viewer might perceive the values as being much higher unless they look at the data. The southeast side of Clinton has low home value to income ratios and a mid range percentage of Blacks. This area is more industrial which explains the low ratio. The area near the downtown has four block groups with high ratios and high percent Black. High home value to income ratios could lead to affordability issues in these areas. High ratios and mid-range percentage of Blacks tend to occur on the outskirts of the developed area. These parts of Clinton are often not developed residentially. Large agricultural lots could explain the high home values. There are a few block groups with high percentage of Blacks and low ratios. These areas could be prioritized for reinvestment in Clinton. Finally, it appears there are no block groups with low ratios and low percentage blacks or high ratios and low percentage Blacks. `32:T467,chart = { const svg = d3.create("svg") // create canvas .attr("viewBox", [0, 0, width, height]); svg.append(legend) // add legend .attr("transform", "translate(125,200)"); // Location of the legend. 0,0 starts in top left so the selected site is not far from the top left corner. I'm not sure how to add the null values to the legend. svg.append("g") .selectAll("path") .data(topojson.feature(polygons, polygons.objects.ClintonBlockGrps_1984).features) // read the polygons .join("path") .attr("stroke", "#5A5A5A") .attr("fill", d => color(data.get(d.properties[idAttribute]))) // adds fill based on the values of the attributes associated with GISJOIN .attr("d", path) .append("title") .text(d => `${format(data.get(d.properties[idAttribute]))}`); // Shows the selected values when cursor hovers over a block group. data.get goes through each GISJOIN value and gets the values //The GISJOIN attribute was removed because that information is not very valuable to map viewers. Data was formatted below and formatting was called in for this. return svg.node(); }33:T4cc,// http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/ schemes = [ { name: "RdBu", colors: [ "#e8e8e8", "#e4acac", "#c85a5a", "#b0d5df", "#ad9ea5", "#985356", "#64acbe", "#627f8c", "#574249" ] }, { name: "BuPu", colors: [ "#e8e8e8", "#ace4e4", "#5ac8c8", "#dfb0d6", "#a5add3", "#5698b9", "#be64ac", "#8c62aa", "#3b4994" ] }, { name: "GnBu", colors: [ "#e8e8e8", "#b5c0da", "#6c83b5", "#b8d6be", "#90b2b3", "#567994", "#73ae80", "#5a9178", "#2a5a5b" ] }, { name: "PuOr", colors: [ "#e8e8e8", "#e4d9ac", "#c8b35a", "#cbb8d7", "#c8ada0", "#af8e53", "#9972af", "#976b82", "#804d36" ] } ] //Possible color schemes to use for the map. To add a new scheme, use the same format with a name and nine color hex codes. This will cause the new scheme to show up in the dropdown. Bivariate color schemes are fairly specific. It's made up of two variables with three discrete classes. For example, the BuPu color scheme has an unipolar pink/purple color on the y-axis and a unipolar teal/blue color on the x-axis. These colors are combined to create a grey-purple at the center. 34:T4c6,legend = () => { const k = 24; const arrow = DOM.uid(); return svg` //rotating the legend 45 degrees ${d3.cross(d3.range(n), d3.range(n)).map(([i, j]) => svg` ${data.title[0]}${labels[j] && ` (${labels[j]})`} ${data.title[1]}${labels[i] && ` (${labels[i]})`} `)} ${data.title[0]} ${data.title[1]} ` ; } // customizable legend for the map. I have no idea how to add null values to this.35:[{"id":"82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","href":"https://static.observableusercontent.com/files/82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","name":"chicago_tracts_2010_cleaned.csv","type":"text/csv","lastModified":1680574293277.29,"size":377202},{"id":"6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","href":"https://static.observableusercontent.com/files/6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","name":"chicago_tracts_2010_cleaned.json","type":"application/json","lastModified":1680574293277.29,"size":1725175},{"id":"c1f6b33f6b991ef2dab0f29f643bad9bdc61de1dc999b6f7d29642d8f68eefe628fbbdeff67c7b0bf24037c8650f7dc79e87ccced1b76295fe7d03f51f077fd6","href":"https://static.observableusercontent.com/files/c1f6b33f6b991ef2dab0f29f643bad9bdc61de1dc999b6f7d29642d8f68eefe628fbbdeff67c7b0bf24037c8650f7dc79e87ccced1b76295fe7d03f51f077fd6","name":"ClintonBlockGrps@1.csv","type":"text/csv","lastModified":1680744646265.434,"size":5292},{"id":"bcc4d0f2f5c5afee6b8c692bb3f02999a029ace196359efd16a4dfb51529eb8b9e7e1551646314754a6d5646939b98f876412a79ea7238003f055ed5229e7fe8","href":"https://static.observableusercontent.com/files/bcc4d0f2f5c5afee6b8c692bb3f02999a029ace196359efd16a4dfb51529eb8b9e7e1551646314754a6d5646939b98f876412a79ea7238003f055ed5229e7fe8","name":"ClintonBlockGrps.json","type":"application/json","lastModified":1680708568359.285,"size":45316}] 2f:{"id":"eb9485c322e7197e","slug":null,"title":"Bivariate Choropleth Mapping in Clinton, Iowa","thumbnail":"6daf0c260e8254167a810179a1e72e9886c37598986f63ec2eb735b4b29f3b65","access_level":"public","create_time":"$D2023-04-04T02:11:33.277Z","update_time":"$D2023-04-23T21:48:43.785Z","view_time":null,"first_public_time":"$D2023-04-04T02:11:33.277Z","has_unpublished_edits":null,"fork":{"id":"65c7f6ce9b65d583","slug":"bivariate-choropleth-mapping","title":"Bivariate Choropleth Mapping","owner":{"id":"22130e106df70095","login":"geoviz","name":"Geographic Visualization (GEOG 3540) - University of Iowa"}},"stars":0,"starred":false,"owner":{"type":"team","id":"16a5f2e23beee6b5","login":"ascha4","name":"Alyssa","avatar_url":"https://avatars-next.observableusercontent.com/ad87f66686ca57dc71aaa3f2afce1454b8a83a15bce786d3ef24022fa78e69c3","tier":"starter_2024","bio":""},"version":615,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a7bc568563e92f0","login":"ascha4","name":"Alyssa","avatar_url":"https://avatars-next.observableusercontent.com/ad87f66686ca57dc71aaa3f2afce1454b8a83a15bce786d3ef24022fa78e69c3","tier":null,"bio":""}],"members":[{"type":"individual","id":"8a7bc568563e92f0","login":"ascha4","name":"Alyssa","avatar_url":"https://avatars-next.observableusercontent.com/ad87f66686ca57dc71aaa3f2afce1454b8a83a15bce786d3ef24022fa78e69c3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bivariate Choropleth Mapping in Clinton, Iowa","cells":[{"id":0,"value":"md`# Bivariate Choropleth Mapping in Clinton, Iowa\n\nHome Value to Income Ratio and Percentage of Population that Identifies as Black or African American by Census Block Group in Clinton, Iowa\n\nAlyssa Schaeffer, GEOG:5540, Assignment 5`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof colors = {\n const form = html`

color scheme`;\n form.i.selectedIndex = 1;\n form.oninput = () => form.value = schemes[form.i.selectedIndex].colors;\n form.oninput();\n return form;\n} // creates a dropdown to choose which color scheme from the schemes below","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"labels = [\"low\", \"\", \"high\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"n = Math.floor(Math.sqrt(colors.length))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"x = d3.scaleQuantile(Array.from(data.values(), d => d[0]), d3.range(n)) // creating quantile scale for x (Percent Black)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"y = d3.scaleQuantile(Array.from(data.values(), d => d[1]), d3.range(n)) // creating quantile scale for y (Home Value to Income Ratio)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"path = d3.geoPath().projection(projection) // assign projection to a path","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"//Rotate the map sets the longitude of origin for our UTM projection.\nprojection = d3.geoTransverseMercator().rotate([91,0]).fitExtent([[10, 10], [width, height]], polygon_features); // UTM zone works well for Clinton/Iowa","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.ClintonBlockGrps_1984) // converting topojson to feature class","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"ClintonBlockGrps@1.csv\").text(), ({GISJOIN, Income, HomeVal, TotalPop, Black}) => [GISJOIN, [+HomeVal/+Income, +Black/+TotalPop]])), {title: [\"Home Value to Income Ratio\", \"% Black\"]}) // reading in csv file and changing into data map object. Calculating Home Value to Income Ratio and Percent Black. Adds axis titles.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"idAttribute = \"GISJOIN\" //labeling GISJOIN so csv file can be joined","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"ClintonBlockGrps.json\").json() // read in polygons","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"height = 800 // canvas height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"width = 600 //canvas width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"color = {\n return value => {\n if (!value) return \"white\"; //color for null values\n let [a, b] = value;\n return colors[y(b) + x(a) * n]; //assigning colors to x and y variables\n };\n} // returns the colors given chosen color scheme","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"formatNum = d3.format(\".3f\") // Determines number of decimal places. Increased to 3 due to low % black.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"format = (value) => {\n if (!value) return \"N/A\";\n let [a, b] = value;\n return `${a} ${data.title[0]}${labels[x(a)] && ` (${labels[x(a)]})`}\n${formatNum(b)} ${data.title[1]}${labels[y(b)] && ` (${labels[y(b)]})`}`;\n} // formats values and labels in legend and in data","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\") //import topojson library","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\") //import d3 library","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 30:"$2f:body"