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

2b:null 2c:["$","title",null,{"children":"Beer vs. Wine Bivariate Choropleth Map | Mattison Belardo | Observable"}] 31: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]} `; }32:[{"id":"ec91f7b419ab2f49ef736e8f4bf7353497314fa3bfced57889c650d88d101d2f7848aaad5db05adb8789714fda52b32e88f326c0bb959e0327aeb75350729291","href":"https://static.observableusercontent.com/files/ec91f7b419ab2f49ef736e8f4bf7353497314fa3bfced57889c650d88d101d2f7848aaad5db05adb8789714fda52b32e88f326c0bb959e0327aeb75350729291","name":"VA.csv","type":"text/csv","lastModified":1683869381044.849,"size":75892},{"id":"f4a3d063134a6e6203e394b6295da4e8d7f4d6a98257ce932f398593e52e7501931147854b8801d661187b5340b50074f6df42cb87a0563f4050d1bac6fc1c89","href":"https://static.observableusercontent.com/files/f4a3d063134a6e6203e394b6295da4e8d7f4d6a98257ce932f398593e52e7501931147854b8801d661187b5340b50074f6df42cb87a0563f4050d1bac6fc1c89","name":"VA.json","type":"application/json","lastModified":1683869381044.849,"size":4906581},{"id":"c894656efe167d3c90d23dd7672f16ea090fc90989bed6231ad657f6351173167ddc16afb51224072f9dde7530d4937ba246d5fff61b87eeefadfd3f78594995","href":"https://static.observableusercontent.com/files/c894656efe167d3c90d23dd7672f16ea090fc90989bed6231ad657f6351173167ddc16afb51224072f9dde7530d4937ba246d5fff61b87eeefadfd3f78594995","name":"bivariate.csv","type":"text/csv","lastModified":1683869396826.08,"size":2006},{"id":"e4b8b4d9a0d433b65ce05ba6f96e870b3997c0ce4d2036dea628ad57ac84f0a87c10e75a12b5845e14f798de78212f0ab8bda8a18e9d08f655cb69d092cefd80","href":"https://static.observableusercontent.com/files/e4b8b4d9a0d433b65ce05ba6f96e870b3997c0ce4d2036dea628ad57ac84f0a87c10e75a12b5845e14f798de78212f0ab8bda8a18e9d08f655cb69d092cefd80","name":"bivarite.json","type":"application/json","lastModified":1683869407357.208,"size":4029634},{"id":"a1d85f8f45486cbe5cd48387946f294c394d09a91bc5d24f816fd1ded9727819dde957e36c72cee801edd62d8bb30046f7e431bd072857b583fcc516f4193868","href":"https://static.observableusercontent.com/files/a1d85f8f45486cbe5cd48387946f294c394d09a91bc5d24f816fd1ded9727819dde957e36c72cee801edd62d8bb30046f7e431bd072857b583fcc516f4193868","name":"csv.csv","type":"text/csv","lastModified":1683870071631.391,"size":7521}] 2f:{"id":"2be5a5ae35aab655","slug":null,"title":"Beer vs. Wine Bivariate Choropleth Map","thumbnail":"357e50dd333a210a792ef1c150da7be6eff96b1907db727693b768385247b6d1","access_level":"public","create_time":"$D2023-05-12T05:29:41.044Z","update_time":"$D2023-05-12T15:16:07.824Z","view_time":null,"first_public_time":"$D2023-05-12T05:29:41.044Z","has_unpublished_edits":null,"fork":{"id":"fa43353b846d6691","slug":null,"title":"Bivariate Choropleth Mapping","owner":{"id":"1f53a26ef1def300","login":"mattison-belardo","name":"Mattison Belardo"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1f53a26ef1def300","login":"mattison-belardo","name":"Mattison Belardo","avatar_url":"https://avatars-next.observableusercontent.com/f7cfdfa9e2d98f697975b192177a4c1022c7c82d6dc1f503fd2783305fa6ebfc","tier":"starter_2024"},"version":617,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0f0397a3785cb0d0","login":"mattison-belardo","name":"Mattison Belardo","avatar_url":"https://avatars-next.observableusercontent.com/f7cfdfa9e2d98f697975b192177a4c1022c7c82d6dc1f503fd2783305fa6ebfc","tier":null}],"members":[{"type":"individual","id":"0f0397a3785cb0d0","login":"mattison-belardo","name":"Mattison Belardo","avatar_url":"https://avatars-next.observableusercontent.com/f7cfdfa9e2d98f697975b192177a4c1022c7c82d6dc1f503fd2783305fa6ebfc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Beer vs. Wine Bivariate Choropleth Map","cells":[{"id":0,"value":"md`# Beer vs. Wine Bivariate Choropleth Map\nThe map below displays the total beer and wine consumpton per US state (excluding Hawaii and Alaska) in the year 2016\n`","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(70,500)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.bivarite).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":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// I will be using this specific color scheme for my map\n name: \"RGB\", \n colors: [\n \"#e8e8e8\", \"#9abfd0\", \"#4b96b8\", \n \"#e8cb7e\", \"#9aa771\", \"#4b8364\", \n \"#e9aa01\", \"#9b8c01\", \"#4c6e01\"]\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":"//Rotate the map sets the longitude of origin for our UTM projection.\nprojection = d3.geoTransverseMercator().rotate([100,0]).fitExtent([[10, 10], [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.bivarite)","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(\"csv.csv\").text(), ({GEOID, bivariate_Beer, bivariate_Wine}) => [GEOID,[+bivariate_Beer, +bivariate_Wine]])), {title: [\"Beer Per Capita\", \"Wine Per Capita\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"idAttribute = \"GEOID\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"bivarite.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":480,"value":"$31","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"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"