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

29:null 2a:["$","title",null,{"children":"Bivariate Choropleth Map of Medical Providers in Iowa | Caitlyn Grubbs | Observable"}] 2f:T42a,Spatial Patterns: No obvious patterns stand out across the zip codes of Iowa, however, there are a lot of zip codes that fall into the "high" range of providers (this does not mean that a lot of providers work in this zip code, it may indicate that the population is fairly small in that region and adding one provider changes the rate dramatically). There is some clumping of high-high in the north east, around the west side of Des Moines and There are three obvious zip codes that fall into the mid-mid category. Of the zip codes that had providers, the mid-low zip codes fall around the north west part of Des Moines. And a few zip codes to the south east of Des Moines. There are no zip codes that fall into the low-low category. If a county had a very small count of providers and even one was female, it would change the percentage a lot and may place that county into a different category. Also, if a zip code had so few providers, it would count as zero and would appear on this map as black since you can't have a female percent without a provider. 30:T82f,chart = { const svg = d3.create("svg") //Creates my svg "canvas" for my page .attr("viewBox", [0, 0, width, height]); // The width and height of the page is defined below as variables. 0,0 refers to margin size, here no padded margins. Depending upon the state and if there needs to be room for the legend, the width and height can be changed below. svg.append(Legend) // Creates a legend as the specifications were made in below code called "legend". .attr("transform", "translate(85,400)"); // placement of legend on the canvas (in this case, left middle of canvas). Change the "translate (#,#)" to move it around the canvas. //NULL Value Legend svg.append("g") .attr("transform", "translate(60,490)") .append(() => legend({ color: nullcolorforlegend, title: "No Data", width: 50, tickFormat: ".1f" }) ); svg.append("g") // adds basemap of zipcodes. .selectAll("path") .data(topojson.feature(polygons, polygons.objects.count_prov_and_female).features) // This is the data for my basemap of zipcodes called polygons. The object within that is called count_prov_and_female. .join("path") .attr("stroke", "#525252") // This is the color of the outline for the zipcodes. the ".attr" allows you to manipulate a graphic's attributes .attr("stroke-width", 0.5) // This is the thickness of the polygon (zipcode) outlines. .attr("fill", d => color(data.get(d.properties[idAttribute]))) // This links the color of the polygon fill by zipcode to the values of the two attributes specified in the dictionary we created below called "data". .attr("d", path) // draws lines between polygons (zipcodes) according to projection .append("title") .text(d => `${d.properties[idAttribute]}, ${format(data.get(d.properties[idAttribute]))}`); // When the user hovers over the zipcode, the ID of the zipcode, the provider rate per 10,000 persons and the %female providers will be displayed. return svg.node(); }31:T4c1,// http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/ schemes = [ { name: "RdBu", // all nine of the colors and location within the legend that will make up the Red and Blue bivariate color scheme. colors: [ "#e8e8e8", "#e4acac", "#c85a5a", "#b0d5df", "#ad9ea5", "#985356", "#64acbe", "#627f8c", "#574249" ] }, { name: "BuPu", // all nine of the colors and location within the legend that will make up the Blue and Purple bivariate color scheme. colors: [ "#e8e8e8", "#ace4e4", "#5ac8c8", "#dfb0d6", "#a5add3", "#5698b9", "#be64ac", "#8c62aa", "#3b4994" ] }, { name: "GnBu", // all nine of the colors and location within the legend that will make up the Green and Blue bivariate color scheme. colors: [ "#e8e8e8", "#b5c0da", "#6c83b5", "#b8d6be", "#90b2b3", "#567994", "#73ae80", "#5a9178", "#2a5a5b" ] }, { name: "PuOr", // all nine of the colors and location within the legend that will make up the Purple and Orange bivariate color scheme. colors: [ "#e8e8e8", "#e4d9ac", "#c8b35a", "#cbb8d7", "#c8ada0", "#af8e53", "#9972af", "#976b82", "#804d36" ] } ]32:T534,Legend = () => { // DO NOT change if working with a new bivariate map. This creates the legend according to the values from the arrays above and displays the legend at a 45degree angle for better user understanding of high/high and low/low values. const k = 24; 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]} `; }33:[{"id":"7803d7124652e7b61e9a7f4bcfc2b8ef20de182a89d5961b623e5c503739dc5afa1cc9887de2c1ce66d9e4b56815a4a6375e353730475b1d983e3e1bcc920b28","href":"https://static.observableusercontent.com/files/7803d7124652e7b61e9a7f4bcfc2b8ef20de182a89d5961b623e5c503739dc5afa1cc9887de2c1ce66d9e4b56815a4a6375e353730475b1d983e3e1bcc920b28","name":"count_prov_and_female.csv","type":"text/csv","lastModified":1680814037866.269,"size":126685},{"id":"1d1379bc4115f22860d3366049caa977f643c1ce67b4c1d531c4c40e2928e47819e585cf8e33021b0b975ffaad533c64df9ae03b588cd95f6afbe842f74451ba","href":"https://static.observableusercontent.com/files/1d1379bc4115f22860d3366049caa977f643c1ce67b4c1d531c4c40e2928e47819e585cf8e33021b0b975ffaad533c64df9ae03b588cd95f6afbe842f74451ba","name":"count_zip_2023.csv","type":"text/csv","lastModified":1680813216146.063,"size":95788},{"id":"2974fad959de225f8bc0f280d5a15eeb6ab5ab102489720405d69928d72e468e188d6b70a582c9e4c72c15fa3b363be241f1d23ea184786ce6ac47335bd4dd37","href":"https://static.observableusercontent.com/files/2974fad959de225f8bc0f280d5a15eeb6ab5ab102489720405d69928d72e468e188d6b70a582c9e4c72c15fa3b363be241f1d23ea184786ce6ac47335bd4dd37","name":"Count_zip.json","type":"application/json","lastModified":1680813301013.937,"size":2144057},{"id":"8d5deeda59a838d453e4a1323bbe9bdeefde2ec0abf3c3bacda71611bf8219d8c50a54a026b4efa35b6f7ad6c326c9108d54c76acf345c53e96b528d31d75bef","href":"https://static.observableusercontent.com/files/8d5deeda59a838d453e4a1323bbe9bdeefde2ec0abf3c3bacda71611bf8219d8c50a54a026b4efa35b6f7ad6c326c9108d54c76acf345c53e96b528d31d75bef","name":"count_prov_and_female_zip_23.json","type":"application/json","lastModified":1680815369609.486,"size":2157798}] 2d:{"id":"6d3f17ce76f01339","slug":null,"title":"Bivariate Choropleth Map of Medical Providers in Iowa","thumbnail":"ca5b554e6d6c82e27eb1d0753c78d6582539a735c7c645efba95327d04e57579","access_level":"public","create_time":"$D2023-04-06T19:58:10.811Z","update_time":"$D2023-04-18T00:03:34.255Z","view_time":null,"first_public_time":"$D2023-04-06T19:58:10.811Z","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":"0aa3594635541487","login":"csgrubbs","name":"Caitlyn Grubbs","avatar_url":"https://avatars-next.observableusercontent.com/9e5e79ae430db86b3a0e5381e25d05ec880bd4430d3c3de1942ff8260210aea3","tier":"starter_2024"},"version":675,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"02ee44fb0826af91","login":"csgrubbs","name":"Caitlyn Grubbs","avatar_url":"https://avatars-next.observableusercontent.com/9e5e79ae430db86b3a0e5381e25d05ec880bd4430d3c3de1942ff8260210aea3","tier":null}],"members":[{"type":"individual","id":"02ee44fb0826af91","login":"csgrubbs","name":"Caitlyn Grubbs","avatar_url":"https://avatars-next.observableusercontent.com/9e5e79ae430db86b3a0e5381e25d05ec880bd4430d3c3de1942ff8260210aea3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bivariate Choropleth Map of Medical Providers in Iowa","cells":[{"id":0,"value":"md`# Bivariate Choropleth Map of Medical Providers in Iowa\n\nProportion of Medical Providers per 10,000 persons and % Female Providers. Data: [CMS Physician Compare 2023, Census 2010]`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":602,"value":"Iowa was used as a method of exploring provider counts and characteristics that exist at the zip code level. I had to create this data by geocoding data and that took many hours per file so I left it as Iowa since that is I made the data for my final project. (I am trying to create the same thing but for Wisconsin so if that gets geocoded before you grade it, I'll adjust my map to not be Iowa.)\n\nAlso, is there a way to build in the if/else statement into the legend for null values. I tried to use something similar to the method used in the choropleth maps, but it only returned everything as grey or didn't do anything. ","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":641,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":14,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":620,"value":"A new color scheme could be added to the list by using the same format as the examples above. Adding \"name:\", \"colors:\" and then listing the colors in a 3x3 matrix as specified above. It is important to pay attention to what colors are chosen, especially staying clear of complementary colors since this can create a grey color that is usually reserved for missing data. Bivariate color schemes are generally sequential/sequential color scheme that increase with darkness with higher values. They can also consist of three hues such as the purple and orange scheme above. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":216,"value":"labels = [\"low\", \"\", \"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([94,0]).fitExtent([[80, 80], [width, height]], polygon_features);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.count_prov_and_female) // get ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"count_prov_and_female.csv\").text(), ({ZIP_CODE, Count_zip, female_pro, POPULATION}) => [ZIP_CODE, [+Count_zip/POPULATION*1000, 100*+female_pro/+Count_zip]])), {title: [\"Provider/10000\", \"% Female Providers\"]}) \n//makes an object out of the values in the array [] in the csv objects(count_prov_and_female) line. Coordinates name of park to # of visitors\n//\"await\" makes loading the data in the csv asynchronous so the whole thing does not have to come at once and it all crash\n//[] are the array where values will be\n\n// Provider count was normalized using population size from the census data and then multiplied per 10,000 persons so that I got whole numbers to display. Percent Female Providers was standardized by the number of providers in each zip code.\n// A title was assigned to each new variable/ array that was created. This title will display both in the legend axes and when the user hovers over a zipcode.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":483,"value":"idAttribute = \"ZIP_CODE\" // will call ZIP_CODE as the id attribute - just to make things easier","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"count_prov_and_female_zip_23.json\").json() //import the polygon base map data of zipcodes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":427,"value":"height = 600 // height of map canvas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":424,"value":"width = 975 // width of map canvas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":477,"value":"color = { // no need to change - this displays the colors of the polygons according to the color schemes created and then chosen in the drop down menu at the top of the map. \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\") // makes number have 1 significant figure","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":474,"value":"format = (value) => { // No need to change - this formats the values of the attributes and what is displayed when the user hovers over the polygons. If I add ${formatNum(a)} before the labels for a, it will display the values as 1 significant figures. Same is true for ${formatNum(b)}. \n if (!value) return \"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}","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\") // brings in d3 package","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":646,"value":"//NULL VALUE INFORMATION\nimport {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":650,"value":"//This makes every null (N/A) value colored grey in the legend.\nnullcolorforlegend = d3.scaleOrdinal()\n .domain([\"0\"])\n .range([\"black\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":671,"value":"count_prov_and_female = await FileAttachment(\"count_prov_and_female.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"