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

2e:null 2f:["$","title",null,{"children":"Reusable Bivariate Choropleth | Julien Barnier | Observable"}] 34:Tb82,chart = { const svg = d3 .create("svg") .attr("width", width) .attr("height", height); const g = svg.append("g"); const polys = g.append("g"); return Object.assign(svg.node(), { update(settings) { const t = svg.transition().duration(1000); const get_key = d => { if ( settings.map_id_property === null || settings.map_id_property === undefined ) return d.id; else return d.properties[settings.map_id_property]; }; polys .selectAll(".polygon") .data(settings.polygons, d => get_key(d)) .join( enter => enter .append("path") .attr("class", "polygon") .attr("stroke", "none") .call(selection => selection .attr("fill", d => settings.color(settings.polygons_data.get(get_key(d))) ) .attr("d", settings.path) .append("title") .text(d => { const name = get_key(d); return `${settings.build_label(get_key(d))}`; }) ), update => update.call(selection => selection .transition(t) .attr("fill", d => settings.color(settings.polygons_data.get(get_key(d))) ) .attr("d", settings.path) .select("title") .text(d => { const name = d.properties[settings.map_id]; return `${settings.build_label(get_key(d))}`; }) ), exit => exit.call(selection => selection .transition(t) .attr("opacity", 0) .remove() ) ); if (settings.contour_type == "topojson") { g.append("path") .datum(settings.contour_path) .attr("class", "contour") .call(settings.format_contour); } if (settings.contour_type == "geojson") { g.append("g") .selectAll(".contour") .data(settings.contour_path) .join("path") .attr("class", "contour") .call(settings.format_contour); } svg.select(".legend").remove(); svg .append(settings.legend) .attr("transform", settings.legend_translation); const zoomf = d3 .zoom() .scaleExtent([1, 8]) .on("zoom", zoomed); function zoomed() { const { transform } = d3.event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); g.selectAll(".contour").attr( "stroke-width", settings.contour_width / transform.k ); } if (settings.zoom) svg.call(zoomf); } }); }35:T541,legend = () => { const k = 24; const arrow = DOM.uid(); return svg` ${d3.cross(d3.range(n), d3.range(n)).map( ([i, j]) => svg` ${polygons_data.title[0]}${labels[j] && ` (${labels[j]})`} ${polygons_data.title[1]}${labels[i] && ` (${labels[i]})`} ` )} ${escape_html(polygons_data.title[0])} ${escape_html( polygons_data.title[1] )} `; }36:[{"id":"f2a5e61b1bfcf1745cad68d1410bd694f1e4aeed32c2dbdf2dd9d053b55d51cce316568041210d0685a415ddd4033c7e5ac3d15b3faf66e039b0b48920036ea2","href":"https://static.observableusercontent.com/files/f2a5e61b1bfcf1745cad68d1410bd694f1e4aeed32c2dbdf2dd9d053b55d51cce316568041210d0685a415ddd4033c7e5ac3d15b3faf66e039b0b48920036ea2","name":"dipl2016@2.csv","type":"text/csv","lastModified":1593157241914.806,"size":998371},{"id":"80a25f7d0f48ef12eff79019e9322d12fe136548af5779a21d889898d1b11f672c667cd464510bc918c13e7b439ddeee8ad6c4a10e26953fae432c42b4e5beea","href":"https://static.observableusercontent.com/files/80a25f7d0f48ef12eff79019e9322d12fe136548af5779a21d889898d1b11f672c667cd464510bc918c13e7b439ddeee8ad6c4a10e26953fae432c42b4e5beea","name":"dipl2016@3.csv","type":"text/csv","lastModified":1593295781716.786,"size":998584}] 32:{"id":"1b3eedffde4bea38","slug":"reusable-bivariate-choropleth","title":"Reusable Bivariate Choropleth","thumbnail":"2e4cf746dff48958e67b9d63f36de7a238c5cae2186c40658cccf3fb669354b7","access_level":"public","create_time":"$D2020-06-25T14:30:19.279Z","update_time":"$D2020-06-29T15:49:03.700Z","view_time":null,"first_public_time":"$D2020-06-26T09:57:57.784Z","has_unpublished_edits":null,"fork":{"id":"8b1da0468b5f1e92","slug":"bivariate-choropleth","title":"Bivariate choropleth","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":4,"starred":false,"owner":{"type":"team","id":"1a55a189adb52dd7","login":"juba","name":"Julien Barnier","avatar_url":"https://avatars-next.observableusercontent.com/39220b21cbf7eff8318ad71b8f1f1b73aaaa40953e51c89e2bf097d8e901318c","tier":"starter_2024"},"version":1072,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ef385df54c3fe400","login":"juba","name":"Julien Barnier","avatar_url":"https://avatars-next.observableusercontent.com/39220b21cbf7eff8318ad71b8f1f1b73aaaa40953e51c89e2bf097d8e901318c","tier":null}],"members":[{"type":"individual","id":"ef385df54c3fe400","login":"juba","name":"Julien Barnier","avatar_url":"https://avatars-next.observableusercontent.com/39220b21cbf7eff8318ad71b8f1f1b73aaaa40953e51c89e2bf097d8e901318c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"7ce57e5117a4f35d","slug":"robservable","title":"robservable","owner":{"id":"1a55a189adb52dd7","login":"juba","name":"Julien Barnier"}},"type":"notebook","body":{"title":"Reusable Bivariate Choropleth","cells":[{"id":0,"value":"md`# Reusable Bivariate Choropleth`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"md`This notebook is a fork of [Mike Bostock's Bivariate Choropleth notebook](https://observablehq.com/@d3/bivariate-choropleth) with the goal to make it as reusable as possible and updatable with transitions.\n\n[robservable](https://juba.github.io/robservable/) users can call it from R with something like :\n\n\\`\\`\\`r\nrobservable(\n \"@juba/reusable-bivariate-choropleth\",\n cell = c(\"chart\", \"draw\"),\n hide = \"draw\"\n)\n\\`\\`\\`\n\nAnd by updating the [settings](#sec_settings) with a named list as \\`input\\` argument.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1002,"value":"md`The example below shows a bivariate choropleth, for of all metropolitan french towns in 2016, of the percentage of people with a college degree (\\`Ens. sup.\\`) *vs* the percentage of people without a degree or with a middle-school one (\\`Dipl. min.\\`). Source : [INSEE](https://www.insee.fr/fr/statistiques/4171395?sommaire=4171407).\n\nYou can also take a look at [another example with contour and animated transitions](https://observablehq.com/d/61be71d2b8c0d456).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"viewof color_scheme = select({\n title: \"Color scheme\",\n options: schemes.map(d => d.name),\n value: \"BuPu\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"draw = chart.update(settings)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"sec_settings = md`## Settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"md`Chart height :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"height = 950","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1020,"value":"md`### Data\n\nThese settings are related to the data used to color polygons. \\`data\\` is the correspondig d3 array, \\`data_ID\\` the data column which contains the polygon ids, \\`data_name\\` the data column which contains the polygon names (showed in the tooltip), \\`data_var1\\` and \\`data_var2\\` the column names of the two displayed variables.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"data = d3.csvParse(await FileAttachment(\"dipl2016@3.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"data_id = \"ID\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"data_name = \"LIBGEO\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"data_var1 = \"Ens. sup.\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"data_var2 = \"Dipl. min.\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"md`### Map\n\\`map\\` is the spatial object containing the polygons. It can be specified either in geoJSON or topoJSON format, and can be either an URL or a JSON String. \\`map_property_id\\` is the name of the property containing the polygon ids (which must match with \\`data_ID\\`, and \\`map_object\\` is the name of the spatial object containing the polygons). If \\`null\\`, the \\`id\\` is used directly instead of a property.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"map = \"https://raw.githubusercontent.com/AtelierCartographie/Khartis/master/public/data/map/FR-com-2016/france.json\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"map_id_property = \"ID\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"map_object = \"poly\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1031,"value":"md`### Contour\n\\`contour\\` is an optional spatial object containing borders which would be superimposed over the polygons. As \\`map\\` it can be a string or an URL in geoJSON or topoJSON format. \\`contour_object\\` is the name of the corresponding object, and \\`contour_stroke\\` and \\`contour_width\\` allows to customize the contour appearance.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"contour = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"contour_object = \"poly\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"contour_stroke = \"white\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"contour_width = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"md`### Misc\n\n\\`legend_position\\` can be either an \\`[x,y]\\` numerical array, or a string among \"bottomleft\", \"bottomright\", \"topleft\" or \"topright\". \\`zoom\\` can be set to \\`false\\` to disable zooming and panning.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"legend_position = \"bottomleft\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"zoom = true","pinned":false,"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":703,"value":"projection = \"geoMercator\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"settings = ({\n polygons: polygons,\n polygons_data: polygons_data,\n contour_type: contour_type,\n contour_path: contour_path,\n path: path,\n map_id_property: map_id_property,\n build_label: build_label,\n contour_width: contour_width,\n format_contour: format_contour,\n zoom: zoom,\n color: color,\n legend: legend,\n legend_translation: legend_translation\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"polygons_data = {\n const data_map = data.map(d => [d[data_id], [d[data_var1], d[data_var2]]]);\n return Object.assign(new Map(data_map), {\n title: [data_var1, data_var2]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"names_data = {\n const data_map = data.map(d => [d[data_id], [d[data_name]]]);\n return new Map(data_map);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"polygons_merge = {\n if (map_type == \"topojson\") {\n return topojson.merge(map_data, map_data.objects[map_object].geometries);\n }\n return map_data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"polygons = {\n if (map_type == \"topojson\") {\n return topojson.feature(map_data, map_object).features;\n }\n // geojson\n if (map_type == \"geojson\") {\n return map_data.features;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"map_type = {\n if (map_data.type == \"Topology\") return \"topojson\";\n if (map_data.type == \"FeatureCollection\") return \"geojson\";\n return null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"map_data = {\n if (typeof map == \"object\") return map;\n if (typeof map == \"string\") {\n if (map.slice(0, 4) == \"http\") {\n return d3.json(map);\n } else {\n return JSON.parse(map);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"format_contour = selection => {\n selection\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", contour_stroke)\n .attr(\"stroke-width\", contour_width)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"d\", path);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"contour_path = {\n if (contour === null) return null;\n if (contour_type == \"topojson\") {\n return topojson.mesh(\n contour_data,\n contour_data.objects[contour_object],\n (a, b) => a !== b\n );\n }\n if (contour_type == \"geojson\") {\n return contour_data.features;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"contour_data = {\n if (typeof contour == \"object\") return contour;\n if (typeof contour == \"string\") {\n if (contour.slice(0, 4) == \"http\") {\n return d3.json(contour);\n } else {\n return JSON.parse(contour);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"contour_type = {\n if (contour !== null && contour_data.type == \"Topology\") return \"topojson\";\n if (contour !== null && contour_data.type == \"FeatureCollection\")\n return \"geojson\";\n return null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"path = d3.geoPath(d3[projection]().fitSize([width, height], polygons_merge))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"build_label = id => {\n const name = names_data.get(id);\n const label_data = polygons_data.get(id);\n if (!label_data)\n return `${name}\nN/A`;\n let [a, b] = label_data;\n return `${name}\n${a} ${polygons_data.title[0]}${labels[x(a)] && ` (${labels[x(a)]})`}\n${b} ${polygons_data.title[1]}${labels[y(b)] && ` (${labels[y(b)]})`}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"legend_translation = {\n let res;\n if (Array.isArray(legend_position)) {\n res = legend_position;\n }\n if (typeof legend_position == \"string\") {\n switch (legend_position) {\n case \"topleft\":\n res = [100, 100];\n break;\n case \"topright\":\n res = [width - 100, 100];\n break;\n case \"bottomleft\":\n res = [100, height - 100];\n break;\n case \"bottomright\":\n res = [width - 100, height - 100];\n break;\n }\n }\n return `translate(${res[0]}, ${res[1]})`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"schemes = [\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","output":"$undefined","database":"$undefined"},{"id":981,"value":"colors = schemes.filter(d => d.name == color_scheme)[0].colors","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"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":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":209,"value":"x = d3.scaleQuantile(Array.from(polygons_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(polygons_data.values(), d => d[1]), d3.range(n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"escape_html = str =>\n str\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"md`## Imports`","pinned":false,"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":973,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\", \"d3-fetch\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"