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

2d:null 2e:["$","title",null,{"children":"Bivariate Choropleth Mapping | Dan Burleson | Observable"}] 33:T408,chart = { const svg = d3.create("svg") // SVG is a programming process used by your browser to display visual variables (points, // lines, poygons). .attr("viewBox", [0, 0, width, height]); svg.append(legend) .attr("transform", "translate(900,90)"); // Set the location of your legend (x, y) svg.append("g") .selectAll("path") .data(topojson.feature(polygons, polygons.objects.iowa_WGS84).features) // Read in polygons features to draw the map .join("path") .attr("stroke", "black") .attr("fill", d => color(data.get(d.properties[idAttribute]))) // Pull data for each polygon using the appropriate identifying attribute defined in other code and then assign a color to the instance pulled .attr("d", path) .append("title") .text(d => `${d.properties[idAttribute]}, ${format(data.get(d.properties[idAttribute]))}`); // The hovering title displayed, second function piece is the same function as how // color is determined above return svg.node(); }34:T4b9,// Create the customized legend to appear in the Obervable notebook visualization. (Not to be changed at all 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]} `; }35:[{"id":"976cda63977284546090d4f9cbb1168725384379263cbfae37c7deb1cf5602c470668f75fb70e564f23ffb774fa0e8c8d4f241f6fcf2f006af36144387b6d188","href":"https://static.observableusercontent.com/files/976cda63977284546090d4f9cbb1168725384379263cbfae37c7deb1cf5602c470668f75fb70e564f23ffb774fa0e8c8d4f241f6fcf2f006af36144387b6d188","name":"iowa_WGS84.json","type":"application/json","lastModified":1617663657972.577,"size":629595},{"id":"c9b0febd26f45222c71b07ded94407857a475f83465352f22e92d883752255380df0227bb60d8a92fbad7a006a3d1ff827eed0f0815de65ea241de2822d6bc31","href":"https://static.observableusercontent.com/files/c9b0febd26f45222c71b07ded94407857a475f83465352f22e92d883752255380df0227bb60d8a92fbad7a006a3d1ff827eed0f0815de65ea241de2822d6bc31","name":"census_2010_county_DP1.csv","type":"text/csv","lastModified":1617663670233.825,"size":7286}] 31:{"id":"67a659ce635addd5","slug":"bivariate-choropleth-mapping","title":"Bivariate Choropleth Mapping","thumbnail":"6384e7fa2b482825cb6d295e5ed039e45502c1b04b6a4e2f84fa880e1b154315","access_level":"public","create_time":"$D2021-04-05T22:52:22.237Z","update_time":"$D2021-04-06T19:59:15.509Z","view_time":null,"first_public_time":"$D2021-04-06T19:59:16.153Z","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":"c6381656e677bb94","login":"dburleson98","name":"Dan Burleson","avatar_url":"https://avatars-next.observableusercontent.com/6aa5712f587a55b08797605fb361f3f59b63034d6c2506747c852cd64a062788","tier":"starter_2024"},"version":602,"publish_version":602,"role":null,"authored":false,"authors":[{"type":"individual","id":"fe5a0b6a7ba5a89d","login":"dburleson98","name":"Dan Burleson","avatar_url":"https://avatars-next.observableusercontent.com/6aa5712f587a55b08797605fb361f3f59b63034d6c2506747c852cd64a062788","tier":null}],"members":[{"type":"individual","id":"fe5a0b6a7ba5a89d","login":"dburleson98","name":"Dan Burleson","avatar_url":"https://avatars-next.observableusercontent.com/6aa5712f587a55b08797605fb361f3f59b63034d6c2506747c852cd64a062788","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bivariate Choropleth Mapping","cells":[{"id":0,"value":"md`# Bivariate Choropleth Mapping\n\nAverage Land Area per Capita combined with Average Water Area per Capita by Iowa County;\nSoure: 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":"$33","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/\n// Unchanged setup of color schemes, schemes proven to be understood well by users\nschemes = [\n {\n name: \"RdBu\", \n colors: [\n \"#e8e8e8\", \"#e4acac\", \"#c85a5a\", // You can change the color scheme by replacing the \n \"#b0d5df\", \"#ad9ea5\", \"#985356\", // 9 values shown here in the brackets [].\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":594,"value":"// Unchanged labeling setup","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"labels = [\"low\", \"\", \"high\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"n = Math.floor(Math.sqrt(colors.length))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"// Create two separate scales for our two normalized variables","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":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"// Rotate the map sets the longitude of origin for our UTM projection.\nprojection = d3.geoTransverseMercator().rotate([94,0]).fitExtent([[25, 100], [width, height]], polygon_features);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"// Using a path generator to project geometry onto the map\npath = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"// Converting json to topojson file used for created polygon shape (Iowa shape)\npolygon_features = topojson.feature(polygons, polygons.objects.iowa_WGS84)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"// Upload csv attribute data, making sure the feature you want to measure is the immediately next feature after the identifier (GEOID10) in the portion of the code being pointed towards. (That portion is the data that'll be used in the visualization.) You can include multiple attributes in the right side of the arrow after your identifying field by putting the multiple fields in brackets like so: [field]. The portion of the code being pointed away from is the mapping of the dataset you are importing.\ndata = Object.assign(new Map(d3.csvParse(await FileAttachment(\"census_2010_county_DP1.csv\").text(), ({GEOID10, NAMELSAD10, ALAND10, AWATER10, DP0010001}) => [GEOID10, [ALAND10 / DP0010001, AWATER10 / DP0010001]])), {title: [\"Land per Capita \", \" Water Area per Capita\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"// Define which attribute will be used to join polygons to your csv's normalized attributes\nidAttribute = \"GEOID10\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"// Uploading json file containing shape data and unique identifying attribute\npolygons = FileAttachment(\"iowa_WGS84.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"// Set the size of your canvas you will paint your visualization on","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"// Setup formatting / equation for returning appropriate colors on map\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","output":"$undefined","database":"$undefined"},{"id":513,"value":"formatNum = d3.format(\".1f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"// Set up formatting for values in your legend that'll be read from your data\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","output":"$undefined","database":"$undefined"},{"id":571,"value":"//Import necessary packages","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"