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

44:["$","title",null,{"children":"Incarceration in the United States | Tallie Foster | Observable"}] 4c:T427,//the legend portion of this line of code draws the legend for the map based on code previously input to define "legend". In this portion, the "translate" coordinates indicate where the legend will be on an x,y plane. //This set of code connects csv data to json geometries. "id Attribute" has been defined with csv attributes, as is called on to determine the color that each geometry (state) should be filled with, based on what is represented by the csv. chart = { const svg = d3.create("svg") .attr("viewBox", [50, 0, width, height]); svg.append(legend) .attr("transform", "translate(830,400)"); svg.append("g") .selectAll("path") .data(topojson.feature(polygons, polygons.objects.us_wgs84).features) .join("path") .attr("fill", d => color(data.get(+d.properties[idAttribute]))) .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path) .append("title") .text(d => `${+d.properties[idAttribute]}, ${format(data.get(+d.properties[idAttribute]))}`); return svg.node(); }4d:T460,// //the legend portion of this line of code draws the legend for the map based on code previously input to define "legend". In this portion, the "translate" coordinates indicate where the legend will be on an x,y plane. // //This set of code connects csv data to json geometries. "id Attribute" has been defined with csv attributes, as is called on to determine the color that each geometry (state) should be filled with, based on what is represented by the csv. // chart = { // const svg = d3.create("svg") // .attr("viewBox", [50, 0, width, height]); // svg.append(legend) // .attr("transform", "translate(830,400)"); // svg.append("g") // .selectAll("path") // .data(topojson.feature(polygons, polygons.objects.us_wgs84).features) // .join("path") // .attr("fill", d => color(data.get(+d.properties[idAttribute]))) // .attr("stroke", "white") // .attr("stroke-linejoin", "round") // .attr("d", path) // .append("title") // .text(d => `${+d.properties[idAttribute]}, ${format(data.get(+d.properties[idAttribute]))}`); // return svg.node(); // }4e:T6cd,md`As with many U.S. maps of variables that are influenced by state policies, there appears to be a dividing trend between northern and southern incarceration. The south has higher overall imprisonment rates and generally medium Black imprisonment rates, though it does vary from high to low. Northern states tend to have lower incarceration rates for the total population, but higher rates of Black incarceration. In Iowa, for example, 0.3% of the state is incarcerated, which is a low rate compared to the rest of the country. Iowa is, however, among the states with the highest rates of Black imprisonment, with 1.6% of Black Iowans currently incarcerated. This means that in Iowa, Black people are incarcerated at a rate 5 times higher than the average Iowan. This visualization hides some nuances in the data. States with both low overall and Black incarceration percentages may not raise concerns of inequality, despite Black people still being imprisoned at a much higher rate in all states categorized as low (as is the case in all 50 states regardless of classification). Maine, for example, appears low in both categories, so it may not be a focus for the map's audience. However, Black people in Maine are incarcerated at a rate 6 times higher than that of the average Mainer, which could be dangerous if overlooked. Additionally, states that are categorized as high total incarceration but low Black incarceration are misleading as well, since that designation might indicate that there is not inequality prisons populations. Georgia is the only state categorized as high incarceration but low Black incarceration, but the color coding doesn't indicate that Black people have an incarceration rate 2 times that of the state. `4f:T4ec,//creates customized legend - should always be forked rather than done from scratch //90degree legend makes it easier for user to comprehend the low/high values 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]} `; }50:T586,// http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/ //These are different sets of color schemes that are recognized as effective for bivariate choropleth mapping, defined as "schemes" to be called on in other parts of the code. The schemes are named & assigned an order of objects in the "scheme" array. Different sets of colors can be selected by changing the object number in the "colors" line, as well as from the drop-down bar attached above the map. Colors can be adjusted by replacing hex codes. The colors are based on divergent schemes, though not necessarily total opposite colors. Each set has 9 colors, meant to mix in hue to represent three different classifications for both variables: low, medium, high. 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" ] } ]51:[{"id":"fa366663b271cf95ac709d16c20c329c7912bff66e90463832955f8137cfbfc1f5e1a533d656b04e6587221934bfc6660623e475ee5524ffd131a65fc7731e20","href":"https://static.observableusercontent.com/files/fa366663b271cf95ac709d16c20c329c7912bff66e90463832955f8137cfbfc1f5e1a533d656b04e6587221934bfc6660623e475ee5524ffd131a65fc7731e20","name":"us_wgs84.json","type":"application/json","lastModified":1648651309418.474,"size":28371},{"id":"e61eda516408e779fc0b7495806bad281c4c471fb3d836ed6caa6c20d3bd007dfc5802b7f55059838d15c2e036818d37a2b23a744ab9c218a84bc3f3669cda84","href":"https://static.observableusercontent.com/files/e61eda516408e779fc0b7495806bad281c4c471fb3d836ed6caa6c20d3bd007dfc5802b7f55059838d15c2e036818d37a2b23a744ab9c218a84bc3f3669cda84","name":"incarceratedpop2020@1.csv","type":"text/csv","lastModified":1650464685828.474,"size":11455}] 48:{"id":"28422c3f31e6dcbd","slug":"us-incarceration","title":"Incarceration in the United States","thumbnail":"4446a2028a4106fdba69dc173c9c03da0073fc1015b96cce9e24657300875fa0","access_level":"public","create_time":"$D2022-03-30T14:28:21.149Z","update_time":"$D2022-05-02T14:59:32.340Z","view_time":null,"first_public_time":"$D2022-04-20T15:02:57.742Z","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":"437314ca7b970641","login":"talliefoster","name":"Tallie Foster","avatar_url":"https://avatars-next.observableusercontent.com/5c8e3f9ef35c1fbb2abf1ca5b5c5a2eab6fbf521141a08eda4d042858d583788","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":689,"publish_version":689,"role":null,"authored":false,"authors":[{"type":"individual","id":"ec2f09e4beac2500","login":"talliefoster","name":"Tallie Foster","avatar_url":"https://avatars-next.observableusercontent.com/5c8e3f9ef35c1fbb2abf1ca5b5c5a2eab6fbf521141a08eda4d042858d583788","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"ec2f09e4beac2500","login":"talliefoster","name":"Tallie Foster","avatar_url":"https://avatars-next.observableusercontent.com/5c8e3f9ef35c1fbb2abf1ca5b5c5a2eab6fbf521141a08eda4d042858d583788","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Incarceration in the United States","cells":[{"id":0,"value":"md`# Incarceration in the United States\n\n% of total state population currently incarcerated and % of Black population currently incarcerated by U.S. state \n\nData: [Census 2020, National Prisoner Statistics Report 2020]`","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":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"md`# Annex`","pinned":false,"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":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":8,"value":"polygons = FileAttachment(\"us_wgs84.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"idAttribute = \"STATEFP\"","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(\"incarceratedpop2020@1.csv\").text(), ({STATEFP, JURTOT, BLACKTOT, P1_001N, P1_004N, NAME}) => [+STATEFP, [100*+JURTOT/+P1_001N, 100*+BLACKTOT/+P1_004N]])), {title: [\"% Pop. Incarc. \",\"% Black Incarc.\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"//This set creates text shown when a cursor hovers over specific polygons (states) on the map and indicates what data to show, as well as the title for each variable as defined in the \"data\" line of code. The numeric format of the data values are set in the \"formatNum\" line, and called upon here. This text is called upon to be included in the code that directly dictates the map. \n\n//Code had to be adjusted so each data piece is formated with \".2f\", so each only have 2 decimal places rather than unlimited. Done by using \"formatNum(a)\" rather than just \"a\".\n\nformat = (value) => {\n if (!value) return \"N/A\";\n let [a, b] = value;\n return `${formatNum(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":513,"value":"formatNum = d3.format(\".2f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"//This set indicates colors for legend based on the defined schemes, so they match the map as color choices get updated. \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}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$4f","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":427,"value":"height = 520","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.us_wgs84)","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.geoAlbersUsa()","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":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":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":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":359,"value":"$50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"1"}} 24:null