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

29:null 2a:["$","title",null,{"children":"Bivariate Choropleth Mapping | Isaac McSorley | Observable"}] 2f: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]} `; }30:[{"id":"0addaaa6adf2eda90f2cb3445787c29b2c215036e9731dcbc588f17a100ca565f6b72af7327c628c284d850e2382d729a6a82f8e5e4e162df90e49e8ec2d1d8c","href":"https://static.observableusercontent.com/files/0addaaa6adf2eda90f2cb3445787c29b2c215036e9731dcbc588f17a100ca565f6b72af7327c628c284d850e2382d729a6a82f8e5e4e162df90e49e8ec2d1d8c","name":"LA_FoodAccess.csv","type":"text/csv","lastModified":1680621694960.427,"size":2084024},{"id":"99db8ce031a03641bd5b96edcbf3b02f3f552e08644c236ac8ef4e85132c47e365717b66d388d9261daaa6f2b513612157e8db3cc0b432dc1f96ce30576ea1b8","href":"https://static.observableusercontent.com/files/99db8ce031a03641bd5b96edcbf3b02f3f552e08644c236ac8ef4e85132c47e365717b66d388d9261daaa6f2b513612157e8db3cc0b432dc1f96ce30576ea1b8","name":"LA_Topojson.json","type":"application/json","lastModified":1680632282954.979,"size":865943}] 2d:{"id":"794e90795399806c","slug":null,"title":"Bivariate Choropleth Mapping","thumbnail":"7a07597f328b3e63f6aad7adc65b16ca25d94f8ba5d5a3302c7cc995cb09fa8d","access_level":"public","create_time":"$D2023-04-04T14:43:37.919Z","update_time":"$D2023-04-04T18:18:02.242Z","view_time":null,"first_public_time":"$D2023-04-04T14:43:37.919Z","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":"05f31901f21967bf","login":"immcsorley","name":"Isaac McSorley","avatar_url":"https://avatars-next.observableusercontent.com/b487e2c1088a31ecd8b3ba3a1ad22cb0f1ce49a3f3b1eb83f91ac8243254c94c","tier":"starter_2024"},"version":621,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6553f995f0e9c00f","login":"immcsorley","name":"Isaac McSorley","avatar_url":"https://avatars-next.observableusercontent.com/b487e2c1088a31ecd8b3ba3a1ad22cb0f1ce49a3f3b1eb83f91ac8243254c94c","tier":null}],"members":[{"type":"individual","id":"6553f995f0e9c00f","login":"immcsorley","name":"Isaac McSorley","avatar_url":"https://avatars-next.observableusercontent.com/b487e2c1088a31ecd8b3ba3a1ad22cb0f1ce49a3f3b1eb83f91ac8243254c94c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bivariate Choropleth Mapping","cells":[{"id":0,"value":"md`# Bivariate Choropleth Mapping\n\nMedian Family income vs Poverty Rate in LA County, California. Data: [Census 2010]`","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(150,250)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.Updated_GeoJson).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":569,"value":"Interpretation of Spatial Patterns\n\nIn this bivariate choropleth map, the spatial patterns show the relationship between two variables, Median Family Income and Poverty Rate, in the different census tracts of Los Angeles County.\n\nThe color of each polygon represents the Median Family Income and Poverty Rate in that census tract, with a darker color indicating a higher value for both variables. The legend provides a visual guide for interpreting the color scale. \n\nAs you can see, the middle south and northeast corners of LA represent low family income and high poverty rate. This makes sense because as poverty rate increases one would assume median family income decreases","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":565,"value":"CHEAT SHEET: •\tHow do the values get displayed when you hover over each polygon?\n\nIn the provided code above, a title element is appended to each path element using the .append(\"title\") method. The text content of the title element is set using the .text() method and a template string that includes the idAttribute and the formatted value of the corresponding data value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":559,"value":"CHEAT SHEET:•\tWhich colors are used for bivariate mappping on Observable? Explain how to add a new bivariate color scheme. \n\n\nObservable provides a set of pre-defined color schemes for bivariate mapping that can be accessed via the d3-scale-chromatic library. The library contains several color schemes that are designed to work well for bivariate maps\n\nIn the code below, however, we are using a custom set of color schemes for bivariate mapping, rather than the pre-defined color schemes in d3-scale-chromatic. These schemes are defined as an array of objects, each of which contains a name and an array of colors.\n","pinned":false,"hidden":false,"mode":"md","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]","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":"//Rotate the map sets the longitude of origin for our UTM projection.\nprojection = d3.geoTransverseMercator().rotate([118,0]).fitExtent([[10, 10], [width, height]], polygon_features);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":551,"value":"CHEAT SHEET: How do you join the geometries that come with the topojson file with the attributes that come with a csv file? The two lines of code below accomplish this task. \n\npolygon_features = topojson.feature(polygons, polygons.objects.LA_County_Tracts1): This line is converting the TopoJSON data stored in polygons to a GeoJSON format. It specifically extracts the LA_County_Tracts1 object from the TopoJSON data and converts it to a set of GeoJSON features, which can be used by D3 to draw the polygons on the map. The resulting GeoJSON features are stored in the polygon_features variable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.Updated_GeoJson)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":556,"value":"CHEAT SHEET:\ndata = Object.assign(...): This line loads and processes data from a CSV file (LA_FoodAccess.csv) using D3.js's csvParse() function. The resulting data is stored as a Map object, with the CensusTract IDs as keys and an array of [MedianFamilyIncome, PovertyRate] values as values. The Object.assign() method is used to add a title property to the data object, which is an array of the two column headings.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":467,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"LA_FoodAccess.csv\").text(), ({CensusTract, PovertyRate, MedianFamilyIncome}) => [CensusTract, [+MedianFamilyIncome, +PovertyRate]])), {title: [\"Median Family Income\", \" Poverty Rate\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":483,"value":"idAttribute = \"GEOID\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"LA_Topojson.json\").json()\n","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\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":562,"value":"CHEAT SHEET: How do you create a legend? How do you position the legend so it is not hidden behind the map?\n\nTo create a legend in D3.js, you can create a new g element and add various graphical elements to it, such as rectangles and text. The exact contents and style of the legend will depend on your specific use case.\n\nIn the provided code, the legend() function creates a legend for a bivariate map. It creates a set of colored rectangles to represent the data values, and adds text to represent the titles of the two data variables.\n\nTo position the legend so it is not hidden behind the map, you can use the transform attribute to move the g element to a different position on the SVG canvas.\n\nFor example, in the top line of code where we created the chart, we appended the legend and moved it to a good spot on the map using this code:\n svg.append(legend)\n .attr(\"transform\", \"translate(850,300)\");","pinned":false,"hidden":false,"mode":"md","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"