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

25:null 26:["$","title",null,{"children":"GEOG:5540 Assignment 5: Bivariate Choropleth Mapping | Haofeng Ma | Observable"}] 2b: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]} `; }2c:[{"id":"1d0509275bf5f92da7fab753cb8fa1aa7dff1103a70476addf18ad0d888c997e2a21ca58d8084fc8445c983345f05a32c1cf42388996c182d27e31b2fdf19a7d","href":"https://static.observableusercontent.com/files/1d0509275bf5f92da7fab753cb8fa1aa7dff1103a70476addf18ad0d888c997e2a21ca58d8084fc8445c983345f05a32c1cf42388996c182d27e31b2fdf19a7d","name":"India_ADM2.json","type":"application/json","lastModified":1649022108944.932,"size":9914770},{"id":"a8246ce43e662515342fda7c404e5725534797c664ef682d473ef55660654e30b1d04b44ebfe0bb9402b43e618a86a204e35d086f893424715e8c70a6e004cf1","href":"https://static.observableusercontent.com/files/a8246ce43e662515342fda7c404e5725534797c664ef682d473ef55660654e30b1d04b44ebfe0bb9402b43e618a86a204e35d086f893424715e8c70a6e004cf1","name":"India_data.csv","type":"text/csv","lastModified":1649026993587.234,"size":292160}] 29:{"id":"ad1ed055afcfdba1","slug":"geog-5540-assignment-5-bivariate-choropleth-mapping","title":"GEOG:5540 Assignment 5: Bivariate Choropleth Mapping","thumbnail":"35e192734818fe02d4ec757d0a06785e52a181b36daca81f957630706bd609e0","access_level":"public","create_time":"$D2022-04-02T22:18:40.185Z","update_time":"$D2022-04-05T21:41:27.104Z","view_time":null,"first_public_time":"$D2022-04-02T22:19:54.650Z","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":"6513f81eaa13165f","login":"haofengma","name":"Haofeng Ma","avatar_url":"https://avatars-next.observableusercontent.com/4482b773c0bd69ab84a9f3335791e3a94f7c8a302f41ec92d541f1a4311758c9","tier":"starter_2024"},"version":634,"publish_version":634,"role":null,"authored":false,"authors":[{"type":"individual","id":"c581b6f5c7e8867b","login":"haofengma","name":"Haofeng Ma","avatar_url":"https://avatars-next.observableusercontent.com/4482b773c0bd69ab84a9f3335791e3a94f7c8a302f41ec92d541f1a4311758c9","tier":null}],"members":[{"type":"individual","id":"60e9af384dfce94c","login":"caglarkoylu","name":"Caglar Koylu","avatar_url":"https://avatars-next.observableusercontent.com/94b0c40bf8a6b04057088ea171864451b3e3b27b7346d866d2a7be21d077be76","tier":null,"role":"editor"},{"type":"individual","id":"c581b6f5c7e8867b","login":"haofengma","name":"Haofeng Ma","avatar_url":"https://avatars-next.observableusercontent.com/4482b773c0bd69ab84a9f3335791e3a94f7c8a302f41ec92d541f1a4311758c9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"cf6d6f7d16237e44","slug":"geog-5540-geographic-visualization-spring-2022","title":"GEOG:5540 Geographic Visualization Spring 2022","owner":{"id":"6513f81eaa13165f","login":"haofengma","name":"Haofeng Ma"}},"type":"notebook","body":{"title":"GEOG:5540 Assignment 5: Bivariate Choropleth Mapping","cells":[{"id":0,"value":"md`# GEOG:5540 Assignment 5: Bivariate Choropleth Mapping\n\\nGEOG:5540 Geographic Visualization\n\\nSpring 2022\n\\nThe University of Iowa`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"md`**In this assignment, I made a bivariate choropleth map exhibiting the relationship between the literacy and the share of the main language in India. The enumeration unit is the second-level administrative unit.**`","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(500, 100)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects['geoBoundaries-IND-ADM2']).features)\n .join(\"path\")\n .attr(\"fill\", d => color(data.get(d.properties[idAttribute])))\n .attr(\"d\", path)\n .append(\"title\")\n .text(d => `${d.properties[idName]}: \\n${format(data.get(d.properties[idAttribute]))}`);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"md`## Interpretation\n\\nIf the two attributes are correlated, colors along the diagonal in the legend (i.e., grey-dark blue) should appear. However, these colors are only occasionally seen in the map, most of which are in the central India. This suggests that, in general, literacy and the share of the main language are not correlated. It can be seen for most units the color varies along the saturation of the green color. In these units, the level of literacy is higher than the level of main language share. For the units where the color varies along the purple saturation, the level of main language share is higher than the level of literacy.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$2b","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"labels = [\"low\", \"\", \"high\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":486,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"projection = d3.geoMercator().fitSize([width, height], polygon_features)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"idAttribute = \"OBJECTID\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"idName = \"shapeName\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"India_data.csv\").text(), ({OBJECTID, main_language_share, literacy_all}) => [+OBJECTID, [+main_language_share, +literacy_all]])), {title: [\"Main Language %\", \"Literacy Rate\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects['geoBoundaries-IND-ADM2'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"India_ADM2.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"height = 610","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"width = 875","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"formatNum = d3.format(\".1f\")","pinned":true,"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 `${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","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2c","stdlib":"1","titling":"auto"}} 2a:"$29:body"