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

2b:null 2c:["$","title",null,{"children":"Bivariate Choropleth Mapping | Countryman, Eian | Observable"}] 31:T47d,The map below displays the youth dependency ratio as well as the old-age dependency ratio. The youth dependency ratio is calculated by dividing the population that is younger than 15 by the population that is 15 to 64 years of age. The 15 to 64 range represents the working population while the younger than 15 represent the population who isn't working yet and depend on the working population. The old-age dependency ratio is calculated by dividing the population over 65 years old, the retired population, by the working population. This will display the dependency of the retired population on the working population. Using the map legend you will see the following: Areas of high youth and old-age dependency, low youth and old-age dependency, high youth but low old-age dependency, and high old-age but low youth dependency. Viewing the map it is clear that the Northern Central region has a high old-age dependency ratio with a low youth dependency ratio. The Southeast region of Idaho displays a high youth dependency ratio with a low old-age dependency ratio. There are few counties with both ratios being low and even fewer with both high.32:T543,// http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/ schemes = [ { name: "PuOr", colors: [ "#e8e8e8", "#e4d9ac", "#c8b35a", "#cbb8d7", "#c8ada0", "#af8e53", "#9972af", "#976b82", "#804d36" ] }, { name: "GnBu", colors: [ "#e8e8e8", "#b5c0da", "#6c83b5", "#b8d6be", "#90b2b3", "#567994", "#73ae80", "#5a9178", "#2a5a5b" ] }, { name: "BuPu", colors: [ "#e8e8e8", "#ace4e4", "#5ac8c8", "#dfb0d6", "#a5add3", "#5698b9", "#be64ac", "#8c62aa", "#3b4994" ] }, { name: "RdBu", colors: [ "#e8e8e8", "#e4acac", "#c85a5a", "#b0d5df", "#ad9ea5", "#985356", "#64acbe", "#627f8c", "#574249" ] } ] //This function creates the color schemes used in the map above. Each object within the array contains 9 colors used for mapping. You need 9 colors for the map because we are mapping 2 variables with 3 classes each (low, medium, high) which produces 9 classes total. each class representing the relationship of the 2 variables classes'. The colors are specifically designed to be sequential bivariate schemes to represent each class effectively. You don't have a lot of options when it comes to color schemes for this type of map due to the relatedness of the data and what you are trying to display.33:T5c6,legend = () => { const k = 24; const arrow = DOM.uid(); //Creates the arrows seen above that indicate low to high 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]} `; } //This function creates the legend seen above. The function utilitzes our "colors" function containing the 4 color schemes to fill the small boxes with the proper color. The function is quite complex and specifies a variety of things such as the text style, position, and boldness as well as the arrows color and size. 34:[{"id":"0a1b1678ffcda12b492547b6152ed6a40067425b8907384e795c60e85ff697d99f5acd4cc4cfd6804bcb52796b341467c2c820c910ca9e3d413fc46a96c208e5","href":"https://static.observableusercontent.com/files/0a1b1678ffcda12b492547b6152ed6a40067425b8907384e795c60e85ff697d99f5acd4cc4cfd6804bcb52796b341467c2c820c910ca9e3d413fc46a96c208e5","name":"Idaho_Counties.json","type":"application/json","lastModified":1680805271440.994,"size":55792},{"id":"a8a374d5998a08c6922d297a7b86f75e5e749d551de9c21bf438907a505b2312dfc626048f46c5ec5dafef2251f66e4c6ccbe4e928c23d38220a2044d0942cca","href":"https://static.observableusercontent.com/files/a8a374d5998a08c6922d297a7b86f75e5e749d551de9c21bf438907a505b2312dfc626048f46c5ec5dafef2251f66e4c6ccbe4e928c23d38220a2044d0942cca","name":"IdahoCountiesUpdated.csv","type":"text/csv","lastModified":1680991393113.366,"size":13524}] 2f:{"id":"fe15dc7e0f3ad152","slug":"bivariate-choropleth-mapping","title":"Bivariate Choropleth Mapping","thumbnail":"2f9e8ccfaa2a64f599439a8e281d2855aa5fda0f1d7d38cf94fa71f25823aa0a","access_level":"public","create_time":"$D2023-04-05T15:00:39.738Z","update_time":"$D2023-04-10T14:49:00.169Z","view_time":null,"first_public_time":"$D2023-04-05T15:00:39.738Z","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":"a6450b8113fc64e9","login":"ecountryman","name":"Countryman, Eian ","avatar_url":"https://avatars-next.observableusercontent.com/71e33126deac679283b00a95302babf4acf525938d8d096599a46e0451848fbb","tier":"starter_2024"},"version":603,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"34f43699b8220c9e","login":"ecountryman","name":"Countryman, Eian ","avatar_url":"https://avatars-next.observableusercontent.com/71e33126deac679283b00a95302babf4acf525938d8d096599a46e0451848fbb","tier":null}],"members":[{"type":"individual","id":"34f43699b8220c9e","login":"ecountryman","name":"Countryman, Eian ","avatar_url":"https://avatars-next.observableusercontent.com/71e33126deac679283b00a95302babf4acf525938d8d096599a46e0451848fbb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Bivariate Choropleth Mapping","cells":[{"id":0,"value":"md`# Bivariate Choropleth Mapping \nBy Eian Countryman, University of Iowa\n\nData: US Census Bureau [2010]`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":560,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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"},{"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(670,250)\"); //This adds the legend to the map at the coordinates and ensures it's not buried underneath the map.\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.Idaho_Counties).features)\n .join(\"path\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-width\", .5)\n .attr(\"fill\", d => color(data.get(d.properties[idAttribute])))\n .attr(\"d\", path)\n .append(\"title\")\n .text(d => `${d.properties[idAttribute]}, ${format(data.get(d.properties[idAttribute]))}`);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":546,"value":"idaho_counties = FileAttachment(\"Idaho_Counties.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":216,"value":"labels = [\"low\", \"med\", \"high\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":207,"value":"n = Math.floor(Math.sqrt(colors.length))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"x = d3.scaleQuantile(Array.from(data.values(), d => d[0]), d3.range(n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":204,"value":"y = d3.scaleQuantile(Array.from(data.values(), d => d[1]), d3.range(n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":486,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":462,"value":"//Rotate the map sets the longitude of origin for our UTM projection.\nprojection = d3.geoTransverseMercator().rotate([114,0]).fitExtent([[10, 10], [width, height]], polygon_features);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.Idaho_Counties)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"IdahoCountiesUpdated.csv\").text(), ({NAME, AGE_UNDER15, AGE_15_64, AGE_OVER65}) => [NAME, [100*(+AGE_UNDER15/+AGE_15_64), 100*(+AGE_OVER65/+AGE_15_64)]])), {title: [\"Youth Ratio %\", \"Old-Age Ratio %\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":483,"value":"idAttribute = \"NAME\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"Idaho_Counties.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":427,"value":"height = 610","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":424,"value":"width = 875","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":477,"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}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":513,"value":"formatNum = d3.format(\".1f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":474,"value":"format = (value) => {\n if (!value) return \"N/A\"; //If there isn't a value it will display \"N/A\"\n let [a, b] = value;\n return `${formatNum(a)} ${data.title[0]}${labels[x(a)] && ` (${labels[x(a)]})`} \n${formatNum(b)} ${data.title[1]}${labels[y(b)] && ` (${labels[y(b)]})`}`;\n}\n//This function creates a \"hover over\" function so when you hover over a county, or polygon feature, it will display the values of each variable as well as our assigned labels of high or low. The first line in the return sets all of the display criteria for variable \"a\" such as how the number is formatted (decimal places), the text, and the label assigned to the value if applicable. The second line does the same thing but instead for variable \"b\".","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":3,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"