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

29:null 2a:["$","title",null,{"children":"Assignment 5 - Bivariate Choropleth Mapping | Eric Thomas | Observable"}] 2f:T525,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); //This allows you to move your legend within the image. Translating it around the XY plane of pixels. In this map, I had a low X value because I wanted the legend to be on the left side of the map. svg.append(Legend) .attr("transform", "translate(75,200)"); //NULL Value Legend svg.append("g") .attr("transform", "translate(40,270)") .append(() => legend({ color: nullcolorforlegend, title: "No Data", width: 50, tickFormat: ".1f" }) ); //This adds the data from the csv onto the map in the paired polygon value Example: GEOID with GEOID feature. svg.append("g") .selectAll("path") .data(topojson.feature(polygons, polygons.objects.lansing_tracts_topo).features) .join("path") .attr("fill", d => color(data.get(d.properties[idAttribute]))) .attr("d", path) //This creates a hover over title for each polygon within the map. The Attribute that comes with the polygon along with the two variables we defined for the area .append("title") .text(d => `${d.properties[idAttribute]}, ${format(data.get(d.properties[idAttribute]))}`); return svg.node(); }30:T40d,// http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/ //These are the color schemes for each bivariate mapping. The colors must be a useful gradient as single variables AND be multiplied together to create the bivariate variables. After you have found the HEX codes, you line them up from the lower left to upper right section of the legend. schemes = [ { name: "RdBu", colors: [ "#e8e8e8", "#e4acac", "#c85a5a", "#b0d5df", "#ad9ea5", "#985356", "#64acbe", "#627f8c", "#574249" ] }, { name: "BuPu", colors: [ "#e8e8e8", "#ace4e4", "#5ac8c8", "#dfb0d6", "#a5add3", "#5698b9", "#be64ac", "#8c62aa", "#3b4994" ] }, { name: "GnBu", colors: [ "#e8e8e8", "#b5c0da", "#6c83b5", "#b8d6be", "#90b2b3", "#567994", "#73ae80", "#5a9178", "#2a5a5b" ] }, { name: "PuOr", colors: [ "#e8e8e8", "#e4d9ac", "#c8b35a", "#cbb8d7", "#c8ada0", "#af8e53", "#9972af", "#976b82", "#804d36" ] } ]31:T509,//This creates the rotated bivariate legend layout. It rotates the image, adds the lines on each of the axis, adds the two ranges and fills them with the colors that are found in the schemes 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]} `; }32:[{"id":"82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","href":"https://static.observableusercontent.com/files/82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","name":"chicago_tracts_2010_cleaned.csv","type":"text/csv","lastModified":1680541797120.729,"size":377202},{"id":"6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","href":"https://static.observableusercontent.com/files/6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","name":"chicago_tracts_2010_cleaned.json","type":"application/json","lastModified":1680541797120.729,"size":1725175},{"id":"52fe5e580ffc97cacc55e2a95c1f6cffe4b0cff0666872b444bf72a6252df58e42cab1a05ea6590109d0d7070ae38c30b77d2c871fe5117f8111b10b4edac05b","href":"https://static.observableusercontent.com/files/52fe5e580ffc97cacc55e2a95c1f6cffe4b0cff0666872b444bf72a6252df58e42cab1a05ea6590109d0d7070ae38c30b77d2c871fe5117f8111b10b4edac05b","name":"lansing_tracts.json","type":"application/json","lastModified":1680636171410.893,"size":322796},{"id":"1f75be2ef124fb25560a229e16b0774f7d3e1415f25dfad77acd0800e5f19e85dcedd0a549952fbfd0a41112de8bd8d82dcbbce0649876b07cb9dd2fefbeef3f","href":"https://static.observableusercontent.com/files/1f75be2ef124fb25560a229e16b0774f7d3e1415f25dfad77acd0800e5f19e85dcedd0a549952fbfd0a41112de8bd8d82dcbbce0649876b07cb9dd2fefbeef3f","name":"lansing_tracts_topo.json","type":"application/json","lastModified":1680637088371.149,"size":78830},{"id":"2b5de357f550ee8a0b0fe750de4cea6a7c95a809e4f8bac5b807844b26ab046a5fa6a51b725b2cb7dcbb6b971f06a99dd975632ca39789c93cbc66d90b2c32f1","href":"https://static.observableusercontent.com/files/2b5de357f550ee8a0b0fe750de4cea6a7c95a809e4f8bac5b807844b26ab046a5fa6a51b725b2cb7dcbb6b971f06a99dd975632ca39789c93cbc66d90b2c32f1","name":"MichiganData@1.csv","type":"text/csv","lastModified":1680656536367.687,"size":47053565}] 2d:{"id":"fd4b04f8801bb307","slug":null,"title":"Assignment 5 - Bivariate Choropleth Mapping","thumbnail":"c17f5342d4c5a948453249125d89a0904fee298b3900352f145099a5cf8ac2a4","access_level":"public","create_time":"$D2023-04-03T17:09:57.120Z","update_time":"$D2023-04-06T02:47:17.414Z","view_time":null,"first_public_time":"$D2023-04-03T17:09:57.120Z","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":"8439e4da5850f0a6","login":"enthomas18","name":"Eric Thomas","avatar_url":"https://avatars-next.observableusercontent.com/c8981eb4ac458e5dc256f495cd29d0d120febf983b0c2061b79e2533ba0a7680","tier":"starter_2024"},"version":667,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9fc5cbeb4e527300","login":"enthomas18","name":"Eric Thomas","avatar_url":"https://avatars-next.observableusercontent.com/c8981eb4ac458e5dc256f495cd29d0d120febf983b0c2061b79e2533ba0a7680","tier":null}],"members":[{"type":"individual","id":"9fc5cbeb4e527300","login":"enthomas18","name":"Eric Thomas","avatar_url":"https://avatars-next.observableusercontent.com/c8981eb4ac458e5dc256f495cd29d0d120febf983b0c2061b79e2533ba0a7680","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Assignment 5 - Bivariate Choropleth Mapping","cells":[{"id":0,"value":"md`# Assignment 5 - Bivariate Choropleth Mapping\n\nPercent of population under the poverty rate versus percent black within the Census Tracts of Lansing, Michigan, and Surrounding Townships. \n\nData: [USDA 2019]`","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":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":636,"value":"md`\n#### Interpretation of Data\nGeographically, you can see smaller census tracts within the city have a higher rate of black people and poverty. The opposite is the case (low/low) in the less dense suburbs NW, NE, and SE of town. In terms of how the two variables interact, there is a loose correlatation between poverty and being black. There is only one cencus tract that is high poverty and low black population percentage. Most are high for both variables or have at least some percentage of black if there is a medium rate of poverty. The \"Low/Low\" rate in the middle of downtown may be an area of high income that was gerrymandered. Living in this town for a year, I know the area is full of upper middle class white people. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":593,"value":"//NULL VALUE INFORMATION\nimport {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":611,"value":"//This makes every null (N/A) value colored grey in the legend.\nnullcolorforlegend = d3.scaleOrdinal()\n .domain([\"N/A\"])\n .range([\"grey\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"$30","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":"//This defines the amount of classes we are using in the bivariate legend \nn = Math.floor(Math.sqrt(colors.length))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"//This creates a classification for the first variable we are using\nx = 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":"//This creates a classification for the second varibale we are using \ny = 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":"//Rotate the map sets the longitude of origin for our UTM projection.\nprojection = d3.geoTransverseMercator().rotate([85,0]).fitExtent([[10, 10], [width, height]], polygon_features);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"//This adds data to the topological data we added to the map earlier. Example: The GEOID values ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":654,"value":"\npolygon_features = topojson.feature(polygons, polygons.objects.lansing_tracts_topo)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":596,"value":"data.get(26045020305)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"MichiganData@1.csv\").text(), ({GEOID, PovertyRate, TractBlack, Pop2010}) => [GEOID, [+PovertyRate, +TractBlack/+Pop2010 * 100]])), {title: [\"% Poverty Rate\", \"% Black\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":483,"value":"//This is the attribute that is shared within the topojson and csv file\nidAttribute = \"GEOID\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"//This adds the topojson that that creates the polygons on the map. \npolygons = FileAttachment(\"lansing_tracts_topo.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":427,"value":"height = 550","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":424,"value":"width = 850","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":477,"value":"//This defines the color of the cell if the data is undefined\ncolor = {\n return value => {\n if (!value) return \"grey\";\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":"//If either value of the polygon is undefined, the output of the bivariate map is undefined or in this case \"N/A\"\nformat = (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":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"