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

2b:null 2c:["$","title",null,{"children":"Bivariate Choropleth Mapping | lorettaNwajiaku's Workspace | Observable"}] 31:T585,This map shows the relationship between the percentage of homes in nebraska counties being occupied by their owners and population density. Counties that have the darkest color represent areas where the population density is high and most houses are occupied by their owners. This could indicate how urban or rural an area can be. A higher ownership rate and high population density indicates an urban area such as Sarpy which is in close proximity to Douglas County. Places where a low percent of housing is not occupied by the owners and have a high population density can be seen as an urban area. For examples, counties like Douglas which is home to Omaha, Dodge, lancaster which is home to Lincoln, Wayne counties amongst others as seen in the map. These areas are mostly located in easten nebraska, probably because of its close promiximity to Iowa. Places which of low population density as well as a low ownership rates can be an indicator of a rural area such as Sioux countiy. Generally, most counties in nebraska are seen to be rural with high ownership rates. It is important to know that classifcation of these areas can also be attributed to many other factors such as economic factors. Based on the scale used, whis is county data, these are the patterns identified, a larger scale will identify a different variation. For examole, there are areas in Douglas county which will be classfied rural.32: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]} `; }33:[{"id":"26625e0e470f05836a45d3637ced65df5b1d355fa32ac70e7105fb8609960ab6698fee7ce39a7397a826aabb5950caea81ee08840ec73e9060e0bf2e45f232a4","href":"https://static.observableusercontent.com/files/26625e0e470f05836a45d3637ced65df5b1d355fa32ac70e7105fb8609960ab6698fee7ce39a7397a826aabb5950caea81ee08840ec73e9060e0bf2e45f232a4","name":"GADM.json","type":"application/json","lastModified":1711826642208.42,"size":57498},{"id":"dfb6166b780206b6489863326d980a930f5996796f9b6e1d2d5a42acca55bd9c5ff408132500033e9b0417d321c00e5f6409077e78a62b2a0256c108e6c4e4c8","href":"https://static.observableusercontent.com/files/dfb6166b780206b6489863326d980a930f5996796f9b6e1d2d5a42acca55bd9c5ff408132500033e9b0417d321c00e5f6409077e78a62b2a0256c108e6c4e4c8","name":"NebraskaCensus.csv","type":"text/csv","lastModified":1711837646769.762,"size":6597}] 2f:{"id":"1f061b7e86f05a9c","slug":null,"title":"Bivariate Choropleth Mapping","thumbnail":"5204edd6efe0dc27d277db28aaf3393bdd4143dc1e96a4bbbd25df13ccfa859f","access_level":"public","create_time":"$D2024-03-28T01:22:55.031Z","update_time":"$D2024-04-01T02:43:31.799Z","view_time":null,"first_public_time":"$D2024-03-28T01:22:55.031Z","has_unpublished_edits":null,"fork":{"id":"de68dfd4266dab75","slug":"bivariate-choropleth-mapping","title":"Bivariate Choropleth Mapping","owner":{"id":"1522f7962f5f1185","login":"caglarkoylu","name":"Caglar Koylu"}},"stars":0,"starred":false,"owner":{"type":"team","id":"dc6e87c9fcdec0aa","login":"lorettanwajiaku-ws","name":"lorettaNwajiaku's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/1df71499af57b81d9f9eb8865a3f34dfddfac96df8dc2fca596c4c7b28396700","tier":"starter_2024","bio":""},"version":710,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f4ed16e168c48303","login":"lorettanwajiaku","name":"lorettaNwajiaku","avatar_url":"https://avatars-next.observableusercontent.com/748df1c4fd3cd263261c0b371add46f6208d87746efd4ae8c04a0d9ab287ff08","tier":null,"bio":""}],"members":[{"type":"individual","id":"f4ed16e168c48303","login":"lorettanwajiaku","name":"lorettaNwajiaku","avatar_url":"https://avatars-next.observableusercontent.com/748df1c4fd3cd263261c0b371add46f6208d87746efd4ae8c04a0d9ab287ff08","tier":null,"role":"editor"},{"type":"team","id":"dc6e87c9fcdec0aa","login":"lorettanwajiaku-ws","name":"lorettaNwajiaku's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/1df71499af57b81d9f9eb8865a3f34dfddfac96df8dc2fca596c4c7b28396700","tier":"starter_2024","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","cells":[{"id":0,"value":"md`# Bivariate Choropleth Mapping\n\nPopulation Density and % Owner Occupied by County of Nebraska. Data Source: [https://nebraska.hometownlocator.com/counties/]`","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(365,90)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.GADM).features)\n .join(\"path\")\n .attr(\"fill\", d => color(data.get(d.properties.County_fip)))\n .attr(\"d\", path)\n .attr(\"stroke\", \"black\")\n .append(\"title\")\n .text(d => `${d.properties[idName]+ \" county\"}, ${format(data.get(d.properties.County_fip))}`);\n \n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":658,"value":".attr(\"transform\", \"translate(365,90)\"); is used to position the map legend on top of the map and doesnt hide behind the map.\n\nTo display values when you over on a polygon use .text(d => `{d.properties[idName]+ \" county\"}, {format(data.get(d.properties.County_fip))}`); It generates a tool tip when you hover on a polygon. It creates a text of the county name, gets the data of that polygon using the County_fip as an identifier. The data is the %Owner occupied and the population density of each county\n\nTo join the geometries that come with the topojson file with the attributes that come with a csv file, use data.get(+d.properties.County_fip) to get the county_fip code from the polygon and the data.get, gets the value from the data dictionary which matched the id to the normalized variable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"**To add a new bivariate color scheme: ** You can create a new color object using the name parameter and a color parameter which contains an array of colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":216,"value":"labels = [\"low\", \"medium\", \"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":665,"value":"Classifies the\"% Owner Occupied\" data using quantile method","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"Classifies the \"Population Density\" data using quantile method","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":486,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"This path generator is used to create county/polygon boundaries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":462,"value":"//Rotate the map sets the longitude of origin for our UTM projection.\nprojection = d3.geoAlbers().rotate([100,0]).fitExtent([[80, 80], [width , height]], counties)\n//projection = d3.geoTransverseMercator().rotate([87,0]).fitExtent([[10, 10], [width, height]], counties);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"counties = topojson.feature(polygons, polygons.objects.GADM)","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(\"NebraskaCensus.csv\").text(), ({FIPS, OccupiedByOwner, popDensity}) => [+FIPS, [ +OccupiedByOwner, +popDensity,]])), {title: [\"% Owner Occupied\", \"Pop Density\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"idName = \"NAME_2\"","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(\"GADM.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"height = 510","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"width = 675","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"This code above create the legend which includes the direction of the legend and the stroke of the arrows using the data title and labels","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"This color function returns the color given the color scheme that is chosen and the data value","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":513,"value":"formatNum = d3.format(\".1f\")","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}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"This code formats the values and the labels in the legend and reading from the data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"Imports the topojson library to be used to convert the json to topojson","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"Import the D3 ibrary for visualization\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"