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

2d:null 2e:["$","title",null,{"children":"Bivariate Choropleth Mapping | awsherman | Observable"}] 33: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]} `; }34:[{"id":"0abb411c0532f4ea0a073d407ba8eb9bd506f6ae233d5dd5e4ca99dd2b19c9b48d07bc5287059c95bfd1b988195a597a9fd8d562986e72fffcde5233bd66fab5","href":"https://static.observableusercontent.com/files/0abb411c0532f4ea0a073d407ba8eb9bd506f6ae233d5dd5e4ca99dd2b19c9b48d07bc5287059c95bfd1b988195a597a9fd8d562986e72fffcde5233bd66fab5","name":"Contiguous_states.csv","type":"text/csv","lastModified":1617297257118.328,"size":33206},{"id":"c6ee51d1355d11652e5b7a728c7ac2abc10977fcf298d83d2229904ebec249db5c0cbc22d2aa4c256923173171cf6a524ca352202bd9de7a62b79acace45a81f","href":"https://static.observableusercontent.com/files/c6ee51d1355d11652e5b7a728c7ac2abc10977fcf298d83d2229904ebec249db5c0cbc22d2aa4c256923173171cf6a524ca352202bd9de7a62b79acace45a81f","name":"Contiguous_states (1).json","type":"application/json","lastModified":1617297263689.655,"size":225937}] 31:{"id":"eb35c0e027153681","slug":"bivariate-choropleth-mapping","title":"Bivariate Choropleth Mapping","thumbnail":"b3192fc0f1a69ffc2fff5c402008953c0f33294d27ae758a75159b6e20ff23fe","access_level":"public","create_time":"$D2021-04-01T17:00:28.429Z","update_time":"$D2021-04-28T19:48:24.288Z","view_time":null,"first_public_time":"$D2021-04-01T23:16:17.916Z","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":"a78e502fa6f6c01f","login":"awsherman","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9129abc5ec33905cb1cb30859bb8a43b281e323f029f3799d79ccfb43a00bb8c","tier":"starter_2024"},"version":556,"publish_version":556,"role":null,"authored":false,"authors":[{"type":"individual","id":"19874f1c64881ed4","login":"awsherman","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9129abc5ec33905cb1cb30859bb8a43b281e323f029f3799d79ccfb43a00bb8c","tier":null}],"members":[{"type":"individual","id":"19874f1c64881ed4","login":"awsherman","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9129abc5ec33905cb1cb30859bb8a43b281e323f029f3799d79ccfb43a00bb8c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Bivariate Choropleth Mapping","cells":[{"id":0,"value":"md`# Bivariate Choropleth Mapping\n\nPercent of White and Black populations from the Total Population for each State : [Census 2010]`","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(810,500)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.Contiguous_states1).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","output":"$undefined","database":"$undefined"},{"id":547,"value":"md`Above is the code for making in the map. In the .append(\"title\") portion of the code. We set it so if you hover over a shape it tells you the information for that shape. The .text line tells it to grab the data that is specfied in the idAttribite and data lines. In this code the polygons is connected to the csv file in the .data line. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"md`Below is the code for the color scheme for the Bivariate map. You can change the colors by getting a differnt color scheme from colorbrewer adn copying the code into the colors brackets. These colors are used for two quantiles that make up the bivariate map. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"","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 was changed to Albers for more accrute projection\nprojection = d3.geoAlbers()\n .fitSize([width, height], polygon_features)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.Contiguous_states1)","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(\"Contiguous_states.csv\").text(), ({STATE_FIPS, WHITE, BLACK, POP2010}) => [STATE_FIPS, [100*+BLACK/+POP2010, 100*+WHITE/+POP2010]])), {title: [\"Black Population\", \"% White Population\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"idAttribute = \"STATE_FIPS\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"Contiguous_states (1).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":545,"value":"md`Below is the code that creates the legend. It gets called up above to put it into the map but this is the code that creates legend. `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$33","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"},{"id":537,"value":"md` For this assignment I looked at the percentage of the total population of each state that is African American and White. The idea of this is just to identify which states have the largest amount of diversity. One thing you can notice that States in the Western portion of the United States such as Montana and Idaho have a very large percentage of the population that is white. Another observation is that States that are in the South have a very high percentage of the populaition that are minorities. This is likely a lasting scar from pre civil war slavery.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"