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

2b:null 2c:["$","title",null,{"children":"Bivariate Choropleth Mapping of Population Density and GDP of China | Geng Tian | Observable"}] 31:T44b,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":"5645b0f3609b8198b5c785604bcdf080cbe18d81054f703eecdfa5c0082fe35c4336cd3e06da516b8a2300ad03039e63bfb27ead785299dd0707af540464bf18","href":"https://static.observableusercontent.com/files/5645b0f3609b8198b5c785604bcdf080cbe18d81054f703eecdfa5c0082fe35c4336cd3e06da516b8a2300ad03039e63bfb27ead785299dd0707af540464bf18","name":"China_adm@5.json","type":"application/json","lastModified":1586642555530.686,"size":2367506},{"id":"190d118a681aef70c6f10a354794f0318184218e324d8b80e0daf760c971ab417f15c51c6e6e887b9304a064c282de341958ca91bab549ff446db837e66d2021","href":"https://static.observableusercontent.com/files/190d118a681aef70c6f10a354794f0318184218e324d8b80e0daf760c971ab417f15c51c6e6e887b9304a064c282de341958ca91bab549ff446db837e66d2021","name":"China_province@4.csv","type":"text/csv","lastModified":1586642545808.86,"size":2989}] 2f:{"id":"a5db223d3aa60657","slug":"bivariate-choropleth-mapping","title":"Bivariate Choropleth Mapping of Population Density and GDP of China","thumbnail":"439393d858456e851f8c2f0134df4aabb5f95f0f34490427c1582c1ba9dd5bfb","access_level":"public","create_time":"$D2020-04-11T19:13:33.529Z","update_time":"$D2020-05-16T21:21:03.760Z","view_time":null,"first_public_time":"$D2020-04-11T22:03:17.267Z","fork":{"id":"de68dfd4266dab75","slug":"bivariate-choropleth-mapping","title":"Bivariate Choropleth Mapping","owner":{"id":"1522f7962f5f1185","login":"caglarkoylu","name":"Caglar Koylu"}},"stars":5,"starred":false,"owner":{"type":"team","id":"7c012315dc829bbf","login":"gengtianuiowa","name":"Geng Tian","avatar_url":"https://avatars-next.observableusercontent.com/802ceaf4ddc8a0b4ceb546c02cce00e05cb7ae269dd49dc58d82ec1007f40d5a","tier":"starter_2024"},"version":643,"publish_version":643,"role":null,"authored":false,"authors":[{"type":"individual","id":"2297369c8a2e6c9c","login":"gengtianuiowa","name":"Geng Tian","avatar_url":"https://avatars-next.observableusercontent.com/802ceaf4ddc8a0b4ceb546c02cce00e05cb7ae269dd49dc58d82ec1007f40d5a","tier":null}],"members":[{"type":"individual","id":"2297369c8a2e6c9c","login":"gengtianuiowa","name":"Geng Tian","avatar_url":"https://avatars-next.observableusercontent.com/802ceaf4ddc8a0b4ceb546c02cce00e05cb7ae269dd49dc58d82ec1007f40d5a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Bivariate Choropleth Mapping of Population Density and GDP of China","cells":[{"id":0,"value":"md`# Bivariate Choropleth Mapping of Population Density and GDP of China\n\nPopulation density and GDP per capita (USD) of province administrations of China. Data: National Bureau of Statistics of China in 2010\n\n--Geng Tian, University of Iowa`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"md`\nSpatial pattern for the map: There are obvious distribution pattern for high-high, high-low, low-high, low-low combinations (in terms of the GDP per capita and population density.)\n\nHigh-high: provinces near the coast (eastern or southern provinces).\n\nHigh-low: northern and north eastern provinces (inner Mongolia, Heilongjiang).\n\nLow-high: most of them are centrol (interior, not coastal) provinces.\n\nLow-low: almost all provinces in the west and south west.`","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(670,250)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.China_adm).features)\n .join(\"path\")\n .attr(\"fill\", d =>color(data.get(d.properties['ID_number'])))\n .attr(\"d\", path)\n .append(\"title\")\n .text(d => 'ID: '+`${d.properties[idAttribute]}, ${format(data.get(d.properties[idAttribute]), d.properties[\"ID\"])}`);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"topojson.feature(polygons, polygons.objects.China_adm).features\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 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\", \"mid\", \"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([-110,0]).fitExtent([[65, 80], [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.China_adm)","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(\"China_province@4.csv\").text(), ({id, Population, size_kms, GDP_USD}) => [+id, [+GDP_USD/+Population, +Population/+size_kms]])), {title: [\"GDP per capita (USD)\", \" Population density / KM^2\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"data.get(24)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"idAttribute = \"ID_number\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"China_adm@5.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, provinceName) => {\n if (!value) return \"N/A\";\n let [a, b] = value;\n return `${provinceName} : ${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","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"