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

29:null 2a:["$","title",null,{"children":"Education Attainment Compared Via Bivariate Chloropleth Mapping | Ethan Traugh | Observable"}] 2f:T4df,legend = () => { const k = 24; const arrow = DOM.uid(); const xOffset = 0; // Adjust this value to move the legend farther to the right 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]} `; } 30:[{"id":"82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","href":"https://static.observableusercontent.com/files/82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","name":"chicago_tracts_2010_cleaned.csv","type":"text/csv","lastModified":1683690161554.82,"size":377202},{"id":"6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","href":"https://static.observableusercontent.com/files/6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","name":"chicago_tracts_2010_cleaned.json","type":"application/json","lastModified":1683690161554.82,"size":1725175},{"id":"543657e6b92d08bbd9151fdca3c474930e3170d2581b167a18bb00737f7638bd9670623f0430d250cdeeb1d09c010bbd987c58fbfb85417ea4774936c2501755","href":"https://static.observableusercontent.com/files/543657e6b92d08bbd9151fdca3c474930e3170d2581b167a18bb00737f7638bd9670623f0430d250cdeeb1d09c010bbd987c58fbfb85417ea4774936c2501755","name":"EdAttainment.csv","type":"text/csv","lastModified":1683690466079.408,"size":11765},{"id":"28a98f10288dd8ec8d6f01b222b6e90540c18117fae5f005fdefad5fef429eface488096b90a115ca849722775bfed2249b6914c0f390b4dc92d9f36522ed110","href":"https://static.observableusercontent.com/files/28a98f10288dd8ec8d6f01b222b6e90540c18117fae5f005fdefad5fef429eface488096b90a115ca849722775bfed2249b6914c0f390b4dc92d9f36522ed110","name":"EducationAttainment.json","type":"application/json","lastModified":1683691415579.645,"size":1082722},{"id":"0f6fceb62302de93d0170be3fed41fbde6363c76e822348eab52c26a126415995bd4ff01caa9b0b912ab11f71042833efa118727e0881d7542e1c902fdbfb910","href":"https://static.observableusercontent.com/files/0f6fceb62302de93d0170be3fed41fbde6363c76e822348eab52c26a126415995bd4ff01caa9b0b912ab11f71042833efa118727e0881d7542e1c902fdbfb910","name":"EducationAttainment.topojson","type":"application/octet-stream","lastModified":1683692400936.296,"size":1170726}] 2d:{"id":"e968af13d97ea340","slug":null,"title":"Education Attainment Compared Via Bivariate Chloropleth Mapping","thumbnail":"74ce4081d901c7893af5ff22aff503be37b7622de5cecc63826123f1163873e1","access_level":"public","create_time":"$D2023-05-10T03:42:41.554Z","update_time":"$D2023-05-10T05:24:17.873Z","view_time":null,"first_public_time":"$D2023-05-10T03:42:41.554Z","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":"0560394763f931d7","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":"starter_2024"},"version":560,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}],"members":[{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null,"role":"editor"}],"comments":[{"id":"61653c38009b3521","reply_to_id":null,"content":"The svg.append(\"g\").selectAll(\"path\") part creates a selection of elements where each represents a feature from the dataset.\n\nThe .data() method binds the data to the selection.","create_time":"$D2023-05-10T05:00:05.466Z","update_time":"$D2023-05-10T05:00:50.075Z","resolved":false,"user":{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}},{"id":"8ef50bf877099016","reply_to_id":null,"content":"Multiple high contrast diverging color schemes are used here. You can add a new color scheme by creating a new 3x3 matrix like was done with YlGn","create_time":"$D2023-05-10T05:05:48.753Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}},{"id":"66b335095508f2b5","reply_to_id":"61653c38009b3521","content":"It is rare for states to have a high percentages for both under 9th grade\nand bachelors degree or above. However, California, Chicago, and New York\nare all the dark blue (indicating that they have high values for both).\n\nThis coould indicate a disparity in wealth and education in those areas, where\naccess to education and stability is greatly divided.\n\nMany states in the North such as montana, Michigan, Wisconsin, South Dakota,\nand North Dakota all have high percentages of adults with a bachlors degree \nor higher while having low rates of under 9th grade. \n\nThe states that have the lowest percentage of adults with under a 9th grade \neducation are Indiana, Alabama, West Virginia, South Carolina, Oklahoma.","create_time":"$D2023-05-10T05:16:07.196Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}},{"id":"6e9480a1e7a0a222","reply_to_id":null,"content":"the code sets up quantile scales for the two values using the x and y functions (<9thgrade and (>=Bachelors) and defines a color function that maps each data value to a specific color based on its quantile position.","create_time":"$D2023-05-10T05:22:24.511Z","update_time":"$D2023-05-10T05:23:13.077Z","resolved":false,"user":{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}},{"id":"4395a33417f7e5a8","reply_to_id":"61653c38009b3521","content":"The .attr(\"transform\", \"translate(700,250)\"); is what allows us to move the legend out from underneath the map. I changed the X position to move it right","create_time":"$D2023-05-10T05:25:09.044Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}},{"id":"68a3fa68d4496d32","reply_to_id":"61653c38009b3521","content":"These lines:\n .append(\"title\")\n .text(d => `${d.properties[idAttribute]}, ${format(data.get(d.properties[idAttribute]))}`);\nCreate a title for every path element (the states) and then fills out the text content of each title with out attributes.","create_time":"$D2023-05-10T05:29:14.319Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}},{"id":"28ae6348bc51f6b1","reply_to_id":"8ef50bf877099016","content":"Theoretically you could combine any two color blind friendly schemes to create a bivariate color scheme, but ideally you choose two schemes that contrast each other well and pleasantly.","create_time":"$D2023-05-10T05:36:47.083Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"cfe75e47aa4babea","login":"ethantraugh18","name":"Ethan Traugh","avatar_url":"https://avatars-next.observableusercontent.com/28b589e5b5ec9f8233f6db7c039c6276977232ee253bf3adfb0ff04f05f634e2","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Education Attainment Compared Via Bivariate Chloropleth Mapping","cells":[{"id":0,"value":"md`# Education Attainment Compared Via Bivariate Chloropleth Mapping\n\nThis data is regarding the population over 25 years old. \n It compares \n 1. Percent of the 25 or older population with an education level below 9th grade \n 2. Percent of the 25 or older population with a bachelors degree or higher\n\nData: [https://hub.arcgis.com/datasets/USCensus::educational-attainment-states-2015-2019/about]`\n ","pinned":false,"hidden":false,"mode":"ojs","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":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(700,250)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.EducationAttainment).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[idAttribute]}, ${format(data.get(d.properties[idAttribute]))}`);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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 name: \"YlGn\",\n colors: [\n \"#e8f7c4\", \"#ccebc5\", \"#a8ddb5\",\n \"#7bccc4\", \"#4eb3d3\", \"#2b8cbe\",\n \"#0868ac\", \"#084081\", \"#041e42\"\n ]\n }\n]","pinned":true,"hidden":false,"mode":"ojs","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":"projection = d3.geoAlbersUsa().fitExtent([[10, 10], [width - 220, height]], polygon_features);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.EducationAttainment)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"EdAttainment.csv\").text(), ({NAME, Under9thGr, Highschool, BachelorsO}) => [NAME, [+Under9thGr, +BachelorsO]])), {title: [\"% < 9th Grade\", \"% Bachlors Degree\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":483,"value":"idAttribute = \"NAME\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"EducationAttainment.topojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":427,"value":"height = 610","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":424,"value":"width = 875","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":513,"value":"formatNum = d3.format(\".1f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"