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

2b:null 2c:["$","title",null,{"children":"Bivariate Chloropleth Mapping | Geographic Visualization | Observable"}] 31:Ta57,**Spatial Pattern:** This bivariate chloropleth map explores the percentage of single-parent families in Illinois counties using two attributes: families with only a female householder present and families with only a male householder present. Befeore looking at where there are very high or low percentages of single-parent households, it is important to note that there are four large clusters of adjacent counties that are represented by the medium-medium purple hue. This may indicate social and economic integration and as a result, thriving and resilient communities. There are three counties, evenly dispersed throughout the state, that have high percentages of both male and female single householders. In these counties, we may see single-parent communities, relationship networks, and sharing of resources (e.g., neighbors helping with childcare). Single parents may be drawn to these areas characterized by a common identity and choose to relocate there, resulting in the spatial pattern seen in these counties. On the other end of the spectrum, we see quite a few areas with low percentages of single parents, both male and female. Studies have shown that areas with abundant two-parent households experience GDP growth, economic mobility, and lower poverty and criminality rates. There is only one county that has a low percentage of single female householders and a high percentage of single male householders. However, upon closer inspection, we see that the percentage of male householders in this county is 6.1% while the percentage for females is much higher at 8.9%, but is considered "low." This gives us insight into the ranges of each attribute; the male attribute range is smaller and contains lower values while the female attribute range is larger and higher. When drawing conclusions from this map, we must be aware that each attribute has different ranges even if they are both normalized. A final notable part of the map to focus on is the four counties with a high percentage of single female householders and a low percentage of single male householders. According to the 2019 US Census statistics, families headed by a single mother were five times more likely to live in poverty. These counties, therefore, may be an indicator of economic insecurity. This could take the form of poor access to the job market, low incomes, or unaffordable housing. Though we cannot conclude from this map alone the specific characteristics of each county, such as poverty levels, we can make correlations between marital status and social/economic qualities in geographical areas and create questions for further exploration. 32:Td07,**Color Scheme:** color = { return value => { if (!value) return "#ccc"; let [a, b] = value; return colors[y(b) + x(a) * n]; }; } This is the color function that returns the colors given the color scheme you have chosen. This map employs a blue-purple color scheme, which is commonly used for bivariate maps. Other appropriate color schemes, which can be explored on this notebook, include red-blue, green-blue, and purple-orange. Bivariate chloropleth maps combine two discrete, sequential color schemes to create a grid (typically 3x3). To make your legend readable and interpretable, you cannot use just any color scheme. It is reccommended to choose a scheme that employs two different hues such that when combined, unique colors are created. **Legend:** svg.append(legend).attr("transform", "translate(690,70)") The above code appends the legend. If your legend is partially or fully obstructed by the map, you can change the legend positioning. To do this, simply edit the numbers in the parantheses after "translate." The point (0,0) is located in the top left corner of the map, so adjust your X and Y coordinates accordingly. For example, a higher X value will move the legend to the right and a higher Y value will move the legend down. You may also change the canvas size (make it larger, wider, taller, etc) to accomdate both the map and the legend. You can do this by editing the "height" and "width" functions below. Ensure, also, that your axis titles are not too long by abbreviating words (e.g., change "percentage" to "%"). A separate legend function (seen in the code at the bottom of the notebook) builds the two-dimensional legend and is referred to in the code that appends the legend to the canvas. Within this function, you can define the font family and size of the legend's text. You can choose to rotate the legend grid, as is done in this notebook (here, it is rotated by -45 degrees). A custom arrowhead can be defined using the "marker" element, and the axes drawn with these arrows. The legend squares are drawn and filled with the colors defined in the "color" function, and finally, each axis is labeled with bold text (ensure to rotate the text if you rotated your legend). **Hover Over:** .append(title) .text (d => `$(d.properties.NAMELSAD), $(format(data.get(d.properties[idAttribute])))`) This code enables the hover over display on the map, allowing the map user to view the county name and both associated attribute values. The ".text" portion of the code will place the string containing the county name and attribute values onto the SVG canvas (the map) in text form. Next, "NAMELSAD" is a property of the TopoJSON that defines the name for each county. An alternative is to write {d.properties[idAttribute]}, which would display the GISJOIN code for each county (this is not preferable, as GISJOIN codes are not easily recognizable). In this notebook, "idAttribute" is defined as "GISJOIN" to make our code smoother and to avoid having to retype "GISJOIN" every time we needed to define the common ID of the TopoJSON and CSV files. formatNum = d3.format(".2f") This code allows each attribute value to be displayed with 2 decimal places when using the hover over feature. If you would like to alter the number of decimal places, simply change "2" to another number.33:T441,**Join:** To join the geometries that come with the TopoJSON file with the attributes that come with a CSV file, you must first ensure that the TopoJSON file and the CSV file have a common key (e.g., FIPS, ID, or in this case, GISJOIN). Then, using the data.get function, you are able to retrieve the value of the specified key and verify that the two files were joined based on the common key. Ensure that both of the variables have the same format (both string or both integer) by adding or removing the + sign in front of "d". A + sign indicates a numeric value. In the code above, a GISJOIN key from the TopoJSON file was inserted into the parantheses, the code was run, and the corresponding U83005 (families with a male householder) and U83006 (families with a female householder) value from the CSV table was produced. This means that the code correctly identified the GISJOIN of the occurrence point that was to be mapped (G0100010) and matched it with the percentage of male householders (5.20%) and the percentage of female householders (14.79%). Both variables are normalized.34:T44c,legend = () => { 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]} `; }35:[{"id":"79464fe676e575d9a148c2ba2da118738d12f93d809ccc465f477e7436cf60cf8b2c818acca47d287a558ecaaadfb1fea5b135a35ce82a7f229bc2a8f13e30ba","href":"https://static.observableusercontent.com/files/79464fe676e575d9a148c2ba2da118738d12f93d809ccc465f477e7436cf60cf8b2c818acca47d287a558ecaaadfb1fea5b135a35ce82a7f229bc2a8f13e30ba","name":"Household Type.csv","type":"text/csv","lastModified":1744127104863.667,"size":935598},{"id":"6bae4651a417cdb1a5d1f8b2bbe89d106136a9d9619dbe468b82c17777e6c8359880198400ea10413742614c5dde2292096a0a1a038a2b4fb5616b2a8d333517","href":"https://static.observableusercontent.com/files/6bae4651a417cdb1a5d1f8b2bbe89d106136a9d9619dbe468b82c17777e6c8359880198400ea10413742614c5dde2292096a0a1a038a2b4fb5616b2a8d333517","name":"IL_County_WGS84.json","type":"application/json","lastModified":1744128604911.521,"size":194502}] 2f:{"id":"3682532a2d742e7f","slug":null,"title":"Bivariate Chloropleth Mapping","thumbnail":"3006de1bb2d3f7daaf87a961a7dbebb8dcaf48f3088fd5e66dd7b485a9a8cf30","access_level":"public","create_time":"$D2025-04-07T21:46:04.157Z","update_time":"$D2025-05-09T20:56:14.002Z","view_time":null,"first_public_time":"$D2025-04-07T21:46:04.157Z","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":"cc18c28c373b477a","login":"geographic-visualization","name":"Geographic Visualization","avatar_url":"https://avatars-next.observableusercontent.com/88d6fdaaece483c49fd79d74cdd4e043767e9c0e6f55fbc074b8f58c49c0952a","tier":"starter_2024"},"version":769,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0be794cc8540d8f3","login":"gracekoziol","name":"GraceKoziol","avatar_url":"https://avatars-next.observableusercontent.com/f5e4ed740dd943359c574d941fc438b7b70382291c4b3258ee5f5392cb323e63","tier":null}],"members":[{"type":"team","id":"cc18c28c373b477a","login":"geographic-visualization","name":"Geographic Visualization","avatar_url":"https://avatars-next.observableusercontent.com/88d6fdaaece483c49fd79d74cdd4e043767e9c0e6f55fbc074b8f58c49c0952a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"0be794cc8540d8f3","login":"gracekoziol","name":"GraceKoziol","avatar_url":"https://avatars-next.observableusercontent.com/f5e4ed740dd943359c574d941fc438b7b70382291c4b3258ee5f5392cb323e63","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bivariate Chloropleth Mapping","cells":[{"id":0,"value":"md`# Bivariate Chloropleth Mapping\n\nFamily Households With No Spouse Present in IL Counties\n\nData: 2020 Census [NHGIS]`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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(690,70)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.IL_County_WGS84).features)\n .join(\"path\")\n .attr(\"stroke\", \"gray\")\n .attr(\"fill\", d => color(data.get(d.properties[idAttribute])))\n .attr(\"d\", path)\n .append(\"title\")\n .text(d => `${d.properties.NAMELSAD}, ${format(data.get(d.properties[idAttribute]))}`);\n svg.append(\"text\")\n .attr(\"x\", width - 10)\n .attr(\"y\", height - 10)\n .attr(\"text-anchor\", \"end\")\n .style(\"font-size\", \"12px\")\n .style(\"fill\", \"gray\")\n .text(\"Grace Koziol\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"**Metadata:**\n\nA polygon shapefile of the US counties from NHGIS was loaded into ArcGIS Pro and clipped to an Illinois boundary poylgon from the Illinois Geospatial Data Clearinghouse. It was then transformed into a TopoJSON file and loaded into the notebook. Also from NHGIS, a 2020 CSV table detailing household type at the US county level was downloaded. In this context, household type is defined by the marital status of the householder (married couple, single male householder, householder living alone, etc). The dataset was cleaned to only include US counties, then loaded into Observable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":586,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":597,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":740,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":732,"value":"data.get(\"G0100010\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"labels = [\"low\", \"\", \"high\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":486,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"//Rotate the map sets the longitude of origin for our UTM projection.\nprojection = d3.geoTransverseMercator().rotate([87,0]).fitExtent([[10, 10], [width, height]], polygon_features);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.IL_County_WGS84)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"Household Type.csv\").text(), ({GISJOIN, U83005, U83006, U83001}) => [GISJOIN, [100*U83005/U83001, 100*U83006/U83001]])), {title: [\"% Male\", \"% Female\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"idAttribute = \"GISJOIN\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"IL_County_WGS84.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"height = 610","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"width = 875","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"formatNum = d3.format(\".2f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"format = (value) => {\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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"