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

21:null 22:["$","title",null,{"children":"Bivariate Choropleth: GEOG 3540 Assignment 5-Amanda Caraballo | amanda-car | Observable"}] 27:T59b,md`## Interpretation Before interpreting the map I want to describe the variables. % Single Female HH was calculated by dividing the number of 1 person female households divided by the total number of households % Owner Occupied is the number of household units out of the total number of housing units that are owned. I chose these two variables because I was interested in seeing if there are places where there is a high chance that a single female is owning her property and not renting it. The geographic pattern of this map is a little odd to look at. Texas, California, and Arizona might have low homeownership because there are many housing units in their dense urban areas that are usually rented not owned (like apartments). States with brownish-orange colors have a higher percentage of housing units owned. States like Iowa, West Virginia, and Nebraska are much less densely populated compared to states like Texas and California. Once again, the homeownership percentage might be related to the population density because less dense areas are more likely to reflect suburban sprawls and those properties might be more typically bought. Single Female Households is an interesting census variable, but I am not sure what other aspects I can relate to it too. It is also very spread out, the North East and Dakotas have just a high percentage of single female households, but those states have low housing unit ownership. ` 28:T9e9,md `## Cheat Sheet How do you join the geometries that come with the topojson file with the attributes that come with a csv file? For a successful join, you need a matching variable on the topojson file or geojson file (the geometry) and the same variable on the CSV (which is now being represented by the data object/map). In this case, I used STATE_ABBR which is the two-letter abbreviation for the state. Matching means EXACT. If it is a string of characters on the CSV it has to be a string of characters on the topojson (it cannot be a number, that would not match a string). For example in my last assignment, my topojson feature collection has each polygon labeled with the sub-county's name (as a string, not a number). My CSV has the exact same column. This allows the program to match the columns and then join the geometries and attributes. If I needed to join my geojson file and a csv file for this assignment I would have used the wind turbine project name called p_name which is in both the geojson and the csv file as a string. The first step is to make a data object out of the csv file data. data = Object.assign(new Map(csv_data)) Where the imported csv data as an array goes in (). You have basically made a data dictionary that contains the column you will use to join the two files. In this current assignment, we learned how to import the csv and turn it into an object at the same time. data = Object.assign(new Map(d3.csvParse(await FileAttachment("states48_full.csv").text(), ({STATE_ABBR, OWNER_OCC, HSEHLD_1_F, HOUSEHOLDS, POPULATION}) => [STATE_ABBR, [100*+HSEHLD_1_F/+POPULATION, 100*+OWNER_OCC/+POPULATION]])), {title: ["% SingleFemaleHH", " % Owner Occupied"]}) Then when the actual map is being made using svg functions...you need a way to connect the geometry (geojson file) to the csv file. This will be done with the data. get function. The name comes from the geogjson file and the data.get basically asks the data dictionary (data object) what is the value that goes along with this name. For example, if I had done this, my p_name could be Diamond Spring and the data. get code would ask the data object dictionary...What is the power capacity (p_cap) of the wind turbine project called Diamond Spring?. The answer is 310 MW and that is how the code gets information from both files and combines it for the map itself. Or in this case, when you hover over a state, you see the abbreviation and the two values. It also says if that value is low or high based on the classification.` 29:T743,md`## Which colors are used for bivariate mapping on Observable? Explain how to add a new bivariate color scheme. In the lecture, we discussed that there are premade bivariate map color schemes that have been tested and confirmed to be readable and interpretable. Based on the color schemes here, it seems that it is important to choose complementary colors/shades to ensure that there are 3 distinct color patterns. For example, my map uses orange and purple. There are three shades of pure purple and three shades of pure orange. All the other colors are a combination of one of the purples and one of those oranges. They all have a grey look. I think this is what makes these schemes more readable. If you used, for example, yellow and blue, it might be harder to read because you would have three really distinct colors. Whereas in the color options presented here, the color representing a high value of % Single Female HH and % Owner Occupied is still a mixture between purple and orange, but it is not its own color (that I can name anyway). This could just be how my brain is processing the bivariate colors, but when there are just shades of grey it is easier to say which variable is high or low, than having to figure out if a shade of green is more yellow or more blue. New Color This is the basic setup for the color scheme. Basically, you are setting up an array of color scheme options that the user can pick from in the drop-down menu. You will need to give it a name followed by the colors. The whole unit should be contained in {} and different color units should be separated by commas. The colors can be added using hex codes based on the format below. They are contained within []. {name: "RdBu", colors: [ "#e8e8e8", "#e4acac", "#c85a5a", "#b0d5df", "#ad9ea5", "#985356", "#64acbe", "#627f8c", "#574249" ]}`2a:Ta93,md`## How do you create a legend? How do you position the legend so it is not hidden behind the map? For the full code, check out the legend cell, but in this question, I will try to say what most of the legend lines do. const k = 30;\\can change the size of the squares that make up the legend return SVG \\ where you can change the font and the size of the font for the legend titles. I needed to make mine smaller because my titles were pretty long. rotate(-45 \\here we rotate the bivariate legend to help users understand the order of the values. Meaning, that now the color that represents high for both values is pointing to the top and the color that represents the lows of both variables is at the bottom. fill use the fill functions to reference the color function created earlier. Making the color its own function kind of simplifies things because the color function can be related back to the classification method (which for bivariate maps should be quantile). {data.title[0]} The text lines can be used to change the font-weight (intensity) and the direction it is going (90 vs 45), and it also uses data.title to reference the title you gave the variables when you made the data object. To see the data object find the cell called data. So to position the legend you should first decide a width and height. Since I did the lower 48 states, I chose to have a smaller height than width. Since the contiguous US is longer horizontally than it is vertically. From there, you can think of the canvas you made with SVG as a grid. The upper left is 0,0. If you are ever unsure where the legend is, sometimes it is helpful to make the canvas way too big and then trim it down slowly moving the legend each time. For example, I made a 1000 X 1000 canvas using the width and height functions. Then I set it to 1000,900 which should be just above the lower right-hand corner. Then I trimmed down the height from 1000 all the way down to 400. This was because I wanted the legend to sit down near Florida and the Carolinas because I thought it looked best that way. To change the position of the legend, go to the cell where the chart is being made and use this code svg.append(legend) .attr("transform", "translate(900,400)") The translate function is what allows you to move the legend around the canvas like its in a grid. To get the image to appear in the same cell as the chart, set up the SVG like this const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append(legend) .attr("transform", "translate(900,400)");`2b:T687,md ` ## How do the values get displayed when you hover over each polygon? Some of the most important code in the map cell that creates the graduated symbol map is the code that allows the map reader to hover over a polygon(sub-county) and view how much of that polygon is covered by land. The code that allows the values to display over each polygon is under the SVG.append.text line. In that line, you are telling the map what the variable is (Percent Land) and where to get it from with the data.get command. In this case, I have it match the name of the sub-county to the Percent Land that it matches too. For my map it looks like this: .text(d => " Percent Land " + data.get(d.properties.NAME)); //returns a string with the value of the NAME that appears when it is hovered over by the user This means that it shows the Percent Land or whatever the variable of interest is. I included the other text it was with to show how to format this when making another map. svg.append("g") .selectAll("path") .data(florida_features.features) .join("path") .attr("stroke", "black")///outline of the polygons .attr("stroke-linejoin", "round") .attr("stroke-width", 1) .attr("fill", d => color2(data.get(d.properties.NAME)[0])) .attr("d", path) .append("title") .text(d => " Percent Land " + data.get(d.properties.NAME)); //return a string with the value of the NAME that appears when it is hovered over! This time, we included another term that also let us see the name of the state or in this case the abbreviation of the state name and also both values from the data.get function. .text(d => d.properties.STATE_ABBR}, $format(data.get(d.properties.STATE_ABBR))}`2c:T45c,legend = () => { const k = 30; const arrow = DOM.uid(); return svg` ${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]} `; }//make a legend2d:[{"id":"3957a9a0a727d80f901db3b5d1f21631243256312e88db228ab8720b6b436fee5c1b30af9b41991c1e4bb3b7fb161169821951106bbbff726180017160355d73","href":"https://static.observableusercontent.com/files/3957a9a0a727d80f901db3b5d1f21631243256312e88db228ab8720b6b436fee5c1b30af9b41991c1e4bb3b7fb161169821951106bbbff726180017160355d73","name":"states48_full.csv","type":"text/csv","lastModified":1648404046469.729,"size":16631},{"id":"bfe80f6908f25cf2c1c6a64a5d40506eb6f3972db1087a0608930314f515d0eec9b25e414926e69ec802580f42daa516b340d6f72880976e07cf5b971da9b830","href":"https://static.observableusercontent.com/files/bfe80f6908f25cf2c1c6a64a5d40506eb6f3972db1087a0608930314f515d0eec9b25e414926e69ec802580f42daa516b340d6f72880976e07cf5b971da9b830","name":"states48_topo.json","type":"application/json","lastModified":1648404501038.197,"size":118721}] 25:{"id":"3d63eb83528cc99d","slug":"bivariate-choropleth-geog-3540-assignment-5-amanda-caraba","title":"Bivariate Choropleth: GEOG 3540 Assignment 5-Amanda Caraballo","thumbnail":"9b7d209d21b1b052d03d883115afa2aacfd8c60f0363adbda07d94977008ab1a","access_level":"public","create_time":"$D2022-03-27T17:30:22.731Z","update_time":"$D2022-03-28T14:50:24.161Z","view_time":null,"first_public_time":"$D2022-03-27T18:26:10.239Z","has_unpublished_edits":null,"fork":{"id":"af83f2b782c64037","slug":"bivariate-choropleth-geog-3540-assignment-5","title":"Bivariate Choropleth: GEOG 3540 Assignment 5","owner":{"id":"1522f7962f5f1185","login":"caglarkoylu","name":"Caglar Koylu"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3b126ee317fadc91","login":"amanda-car","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1a364f29f2cd764c127df9b61607b5f6878105178239908b7413eae55661dfad","tier":"starter_2024","bio":""},"version":599,"publish_version":599,"role":null,"authored":false,"authors":[{"type":"individual","id":"16cf6fe388b72130","login":"amanda-car","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1a364f29f2cd764c127df9b61607b5f6878105178239908b7413eae55661dfad","tier":null,"bio":""}],"members":[{"type":"individual","id":"16cf6fe388b72130","login":"amanda-car","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1a364f29f2cd764c127df9b61607b5f6878105178239908b7413eae55661dfad","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: GEOG 3540 Assignment 5-Amanda Caraballo","cells":[{"id":0,"value":"md`# Bivariate Choropleth: GEOG 3540 Assignment 5-Amanda Caraballo\n\n% Single Female HouseHolds and % Housing Unit Ownership by State. Data: [Census 2010]`","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}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(legend)\n .attr(\"transform\", \"translate(900,400)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(tracts, tracts.objects.states48).features)\n .join(\"path\")\n .attr(\"fill\", d => color(data.get(d.properties.STATE_ABBR)))\n .attr(\"d\", path)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-width\", 1)\n .append(\"title\")\n .text(d => `${d.properties.STATE_ABBR}, ${format(data.get(d.properties.STATE_ABBR))}`);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"$27","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"$28","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"$29","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"states48_full.csv\").text(), ({STATE_ABBR, OWNER_OCC, HSEHLD_1_F, HOUSEHOLDS, HSE_UNITS}) => [STATE_ABBR, [100*+HSEHLD_1_F/+HOUSEHOLDS, 100*+OWNER_OCC/+HSE_UNITS]])), {title: [\"% SingleFemaleHH\", \" % Owner Occupied\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"// http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/\nschemes = [\n {\n name: \"RdBu\", \n colors: [\n \"#e8e8e8\", \"#e4acac\", \"#c85a5a\",\n \"#b0d5df\", \"#ad9ea5\", \"#985356\",\n \"#64acbe\", \"#627f8c\", \"#574249\"\n ]\n },\n {\n name: \"BuPu\", \n colors: [\n \"#e8e8e8\", \"#ace4e4\", \"#5ac8c8\",\n \"#dfb0d6\", \"#a5add3\", \"#5698b9\", \n \"#be64ac\", \"#8c62aa\", \"#3b4994\"\n ]\n },\n {\n name: \"GnBu\", \n colors: [\n \"#e8e8e8\", \"#b5c0da\", \"#6c83b5\",\n \"#b8d6be\", \"#90b2b3\", \"#567994\",\n \"#73ae80\", \"#5a9178\", \"#2a5a5b\"\n ]\n },\n {\n name: \"PuOr\", \n colors: [\n \"#e8e8e8\", \"#e4d9ac\", \"#c8b35a\",\n \"#cbb8d7\", \"#c8ada0\", \"#af8e53\",\n \"#9972af\", \"#976b82\", \"#804d36\"\n ]\n }\n]//color schemes?","pinned":false,"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":false,"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":false,"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))","pinned":false,"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))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"//Rotate the map sets the longitude of origin for our UTM projection.\nprojection = d3.geoAlbers()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"color = {\n return value => {\n if (!value) return \"#ccc\";\n let [a, b] = value;\n return colors[y(b) + x(a) * n];\n };\n}//color function to return function based on color scheme","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"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${b}% ${data.title[1]}${labels[y(b)] && ` (${labels[y(b)]})`}`;\n}//formats the values and labels for the legend and data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"idAttribute=\"STATE_ABBR\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"ctracts = topojson.feature(tracts, tracts.objects.states48)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"tracts= FileAttachment(\"states48_topo.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"width = 1000","pinned":false,"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":false,"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\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2d","stdlib":"1"}} 26:"$25:body"