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

25:["$","title",null,{"children":"Bivariate Choropleth Mapping | Lisa Nakahara | Observable"}] 49:T47a,md`The map below shows the percentage of males in their labor force age as well as that of females. In areas that were already urbanized or industrialized during this period, such as the southernmost areas that would later become New York City, the percentage of young men and women was high. In the central part of the state, where there was no significant industry, the proportion of young men and women was small. Areas with a high proportion of males and a low proportion of females (purple) and areas with a low proportion of males and a high proportion of females (green) are scattered throughout the state, sometimes next to each other, and no clear pattern can be found. It seems that the actual values show more important trends. The dark blue polygons where % males and % females are both "high", males aged 15-64 are over 90%, and women are around 20%. This extreme difference in the proportion of men and women of working age makes the reliability of the 1880 census somewhat worrisome. However, if this census reflects reality to some extent, it would seem to indicate that New York in 1880 was a predominantely young male state. `4a:T46b,//code for creating the legend. 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]} `; }4b:[{"id":"82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","href":"https://static.observableusercontent.com/files/82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","name":"chicago_tracts_2010_cleaned.csv","type":"text/csv","lastModified":1680556171553.488,"size":377202},{"id":"6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","href":"https://static.observableusercontent.com/files/6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","name":"chicago_tracts_2010_cleaned.json","type":"application/json","lastModified":1680556171553.488,"size":1725175},{"id":"6599e73544abb4726f74717c574cf8bc649ab6ed3251ddff4025600e22c8ab577e1b6956b2816685271af8860a5231fd5d7c4dc339d60464519e5f552731407f","href":"https://static.observableusercontent.com/files/6599e73544abb4726f74717c574cf8bc649ab6ed3251ddff4025600e22c8ab577e1b6956b2816685271af8860a5231fd5d7c4dc339d60464519e5f552731407f","name":"NY_1880.json","type":"application/json","lastModified":1680556536202.145,"size":959736},{"id":"3c82f88cdd9e1151881975b16e43ce47acf9f0c41067e1258bf5f099583f53204d21722a5d71b775e1c1d836605119c722fdb0106c74c6ac1bcaf0d452b5aa86","href":"https://static.observableusercontent.com/files/3c82f88cdd9e1151881975b16e43ce47acf9f0c41067e1258bf5f099583f53204d21722a5d71b775e1c1d836605119c722fdb0106c74c6ac1bcaf0d452b5aa86","name":"labor_force_age.csv","type":"text/csv","lastModified":1680558717527.532,"size":56619}] 29:{"id":"de7decb7d76ccca2","slug":null,"title":"Bivariate Choropleth Mapping","thumbnail":"61669ecc143d44d6541daf669abdc63c6e73002f3e3e9eb235e2fa4a17c6b0bd","access_level":"public","create_time":"$D2023-04-03T21:09:31.553Z","update_time":"$D2023-05-11T04:18:52.185Z","view_time":null,"first_public_time":"$D2023-04-03T21:09:31.553Z","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":"878f9db7adb1e24f","login":"lisanaka","name":"Lisa Nakahara","avatar_url":"https://avatars-next.observableusercontent.com/3408c9b81acfd238fc6aedcecefee38006e2dd1a6bd283d56353cbbddc2e2b28","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":651,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"be1ffa6c52f07f61","login":"lisanaka","name":"Lisa Nakahara","avatar_url":"https://avatars-next.observableusercontent.com/3408c9b81acfd238fc6aedcecefee38006e2dd1a6bd283d56353cbbddc2e2b28","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"be1ffa6c52f07f61","login":"lisanaka","name":"Lisa Nakahara","avatar_url":"https://avatars-next.observableusercontent.com/3408c9b81acfd238fc6aedcecefee38006e2dd1a6bd283d56353cbbddc2e2b28","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 Mapping","cells":[{"id":0,"value":"md`# Bivariate Choropleth Mapping\n\n*% Males and Females in Labor Force Age 15-64 in 1880 New York State*\n\nData: [Urban Transition Historical GIS Project](https://s4.ad.brown.edu/Projects/UTP/CountyMaps.htm)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"$49","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(150, 150)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.NY_1880).features)\n .join(\"path\")\n .attr(\"fill\", d => color(data.get(d.properties[idAttribute])))\n .attr(\"d\", path)\n .append(\"title\")\n .text(d => `${format(data.get(d.properties[idAttribute]))}`);\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":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":true,"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":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":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":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":462,"value":"//Rotate the map sets the longitude of origin for our UTM projection.\nprojection = d3.geoTransverseMercator().rotate([76 + 35 / 60, -40]).fitExtent([[80, 80], [width, height]], polygon_features);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.NY_1880)","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(\"labor_force_age.csv\").text(), ({GISID, mlf15_64Cp, flf15_64Cp}) => [+GISID, [+mlf15_64Cp, +flf15_64Cp]])), {title: [\"% Males 15-64\", \"% Females 15-64\"]})\n//GISID=State+county code\n//mlf15_64Cp=% Males in labor force age 15-64\n//flf15_64Cp=% Females in labor force age 15-64","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"idAttribute = \"GISID\"","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(\"NY_1880.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 = 610","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"width = 875","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":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":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":538,"value":"md`# Cheat Sheet`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"md`## Q1: How do you join the geometries that come with the topojson file with the attributes that come with a csv file?\n\n1. Check the polygon file's id attribute. In this case, \\`\\`GISID\\`\\`. Make sure that the same id is included in the csv file.\n2. As \\`\\`GISID\\`\\` will appear multiple times in the codes, assign \\`\\`idAttribute = \"GISID\"\\`\\` to make things smoother.\n3. Use \\`\\`.join\\`\\` and \\`\\`.attr(\"fill\", d => color(data.get(d.properties[idAttribute])))\\`\\` to join the geometrics with the attributes from the csv and color them.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"md`## Q2: Which colors are used for bivariate mappping on Observable? Explain how to add a new bivariate color scheme.\n\n1. You can use [example palettes](https://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/) that are already known to work well without having to create your own bivriate color scheme from scratch.\n\n2. Then creat an array \\`\\`schemes\\`\\` with bivariate color schemes that you want to use. In this case, there are four color schemes: \\`\\`RdBu, BuPu, GnBu, PuOr\\`\\`. You can add a new color scheme by specifying the \\`\\`name\\`\\` and \\`\\`colors\\`\\`.\n\n3. The \\`\\color\\`\\ function returns the colors given the color scheme.\n\\`\\`\\`\ncolor = {\n return value => {\n if (!value) return \"#ccc\";\n let [a, b] = value;\n return colors[y(b) + x(a) * n];\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":547,"value":"md`## Q3: How do you create a legend? How do you position the legend so it is not hidden behind the map?\n\n1. Go to the \\`\\`legend\\`\\` cell. I tried to copy & past the code here, but got an error message: \\`\\`Unexpected token\\`\\`.\n \n2. To move the position of the legend, change numbers in \\`\\`translate(150, 150)\\`\\` in the \\`\\`chart\\`\\` cell. \n\\`\\`\\`\nsvg.append(legend)\n .attr(\"transform\", \"translate(150, 150)\");\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"md`## Q4: How do the values get displayed when you hover over each polygon?\n1. The \\`\\`format\\`\\` function formats how texts get displayed.\n2. Go to \\`\\`.text\\`\\` in the \\`\\`chart\\`\\` cell. I cannot copy & paste the entire code bacause of a syntaxerror, but \\`\\`data.get(d.properties[idAttribute]\\`\\` part get the values for each \\`\\`idAttribute\\`\\`.\n3. With this line of code, the values get displayed when you hover over each polygon.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null