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

2c:null 2d:["$","title",null,{"children":"Bivariate Choropleth Mapping | youthle | Observable"}] 32:T44c,legend = () => { const k = 30; 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]} `; }33:[{"id":"72140398aa4d9229c048924dc7ff41463eb44ebc157afd193c8bd44160fa762050421996eff6aa453068b8ba8845b2f75fcc6e813bf00d0b094517f6e6be7967","href":"https://static.observableusercontent.com/files/72140398aa4d9229c048924dc7ff41463eb44ebc157afd193c8bd44160fa762050421996eff6aa453068b8ba8845b2f75fcc6e813bf00d0b094517f6e6be7967","name":"gdp2.csv","type":"text/csv","lastModified":1617035783916.938,"size":165019},{"id":"2b33e4409c90b0a7f79123981fc7b5929365d8424660f3c1bf4978b62294909a23aade3b1018aca925311052aa7460491afb8fc98fff075cd12bee28259bb952","href":"https://static.observableusercontent.com/files/2b33e4409c90b0a7f79123981fc7b5929365d8424660f3c1bf4978b62294909a23aade3b1018aca925311052aa7460491afb8fc98fff075cd12bee28259bb952","name":"worldmap.json","type":"application/json","lastModified":1617035790640.298,"size":649382}] 30:{"id":"fc0464fe9ee79cc6","slug":"bivariate-choropleth-mapping","title":"Bivariate Choropleth Mapping","thumbnail":"6163a1da5afab36b9c2b72a9664587075c18a2c56fd17d13305f702e1e4bc742","access_level":"public","create_time":"$D2021-03-29T16:35:42.321Z","update_time":"$D2022-08-10T15:50:52.594Z","view_time":null,"first_public_time":"$D2021-04-02T18:16:54.370Z","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":1,"starred":false,"owner":{"type":"team","id":"69acfb8af0d48d37","login":"youthle","name":"","avatar_url":"https://avatars-next.observableusercontent.com/feef21c164befe831cb148ee1fde04bd7e148278d81d6b0a10e4809fd877f1a4","tier":"starter_2024","bio":""},"version":673,"publish_version":673,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3970448d3bc91a0","login":"youthle","name":"","avatar_url":"https://avatars-next.observableusercontent.com/feef21c164befe831cb148ee1fde04bd7e148278d81d6b0a10e4809fd877f1a4","tier":null,"bio":""}],"members":[{"type":"individual","id":"c3970448d3bc91a0","login":"youthle","name":"","avatar_url":"https://avatars-next.observableusercontent.com/feef21c164befe831cb148ee1fde04bd7e148278d81d6b0a10e4809fd877f1a4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bivariate Choropleth Mapping","cells":[{"id":0,"value":"md`# Bivariate Choropleth Mapping \n#### Annual GDP growth in 2005 and the average GDP growth over 1990, 1995, 2000, 2005, 2011, and 2017`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"md`The map shows that most of the developed countries that are located in Europe, North America, and Oceania, have a medium to low GDP growth for both the index in 2005 and the average index over seven years. Many developed countries in Europe have low values for both indexes while some other developed countries such as Canada and Australia still have medium average GDP growth. Developing countries such as China and India with high values of both indexes can be found primarily in Asia and Africa. Some fast-growing economic entities such as Venezuela and Turkey can also be found in Eastern Europe and South America.`","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":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(legend)\n .attr(\"transform\", \"translate(95,510)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(countries.features)\n .join(\"path\")\n .attr(\"fill\", d => color(data.get(d.properties['ADM0_A3'])))\n .attr(\"d\", path)\n .attr(\"stroke\", '#dcdcdc')\n .attr(\"stroke-width\", 0.5)\n .append(\"title\")\n .text(d => `${d.properties.NAME_LONG}, ${format(data.get(d.properties.ADM0_A3))}`);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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 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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"labels = [\"low\", \"medium\", \"high\"]","pinned":false,"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":false,"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":false,"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":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"projection = d3geo.geoKavrayskiy7()\n .fitSize([width*1.2, height*1.2], countries)\n .translate([width*0.46, height*0.6])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"d3geo = require('d3-geo-projection')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"countries = topojson.feature(polygons, polygons.objects.unnamed)","pinned":false,"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(\"gdp2.csv\").text(), ({CountryCode, GDP2005, AverageGDP}) => [CountryCode, [+GDP2005, +AverageGDP]])), {title: [\"GDP growth in 2005\", \"Avg GDP growth\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"worldmap.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"height = 610","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"width = 975","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"color = {\n return value => {\n if (!value) return \"#000\";\n let [a, b] = value;\n return colors[y(b) + x(a) * n];\n };\n}","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"format = (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":false,"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":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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"