3e:null 3f:["$","title",null,{"children":"Bivariate Choropleth with Continuous Color Scales | Mubanga Nsofu | Observable"}] 45:T57a,md`#### Notebook purpose This is a fork of Mike Bostock's [bivariate choropleth](https://observablehq.com/@d3/bivariate-choropleth) notebook that brings together a few variations on the original. First, this notebook uses continuous color scales rather than the original quantile bins. To best facilitate comparison between the two approaches to mapping data values to color, this notebook preserves the color schemes in the original notebook. It also gives you the option to create your own color scheme. You can also vary the color interpolation function and select whether you scale values to colors linearly, according to data values, or ordinally, according to rank among values. (Both of these make a big differences! The original notebook this is forked from makes bins values ordinally, fyi.) This notebook is a good...well, passable example of code for the following things: - Creating a two-dimensional continuous color scale. See *bivariateColorScale* - Constructing a two-dimensional gradient using HTML Canvas, which allows you to control the interpolation space. (You can also create a two-dimensional gradient by multiplying two linear gradients in CSS but you are restricted to RGB interpolation.) See *legend* - Making a multi-element form whose elements update among themselves. (The two color pickers and the color scheme dropdown listen to each other.) See *selectors*`46:Tac7,viewof selectors = { const div = d3.create('div'); const selectors = makeSelectorGroup(colorsSelectorsConfig); const getComplement = col => { const c = d3.lab(col); c.a = -c.a; c.b = -c.b; const rgbC = d3.color(c); return rgbToHex(rgbC.r, rgbC.g, rgbC.b); }; // insert some cutom instructions in the middle of the pre-built form d3.select(selectors).select('.selector-form') .insert('p', '#selector-block-Diabetes') .text('Or, use the selectors below to select custom colors.') .style('font', '400 1rem sans-serif') .style('margin', '12px 0'); // change the padding on selectors that have no italicized instructions d3.select(selectors).selectAll('.selector-instructions') .filter((d, i, nodes) => nodes[i].innerHTML === '') .style('padding-bottom', '0.4rem'); d3.select(selectors) .select('#scheme-select-colors') .on('change', (event, d) => { const scheme = event.target.value; document.getElementById(`${data.title[0]}-color-colors`).value = schemes.filter(obj => obj.name === scheme)[0].colors[2]; document.getElementById(`${data.title[1]}-color-colors`).value = schemes.filter(obj => obj.name === scheme)[0].colors[6]; }); d3.select(selectors) .select(`#${data.title[0]}-color-colors`) .on('input change', (event, d) => { if (selectors.value.compColors) { selectors.value[data.title[1]] = getComplement(event.target.value); document.getElementById(`${data.title[1]}-color-colors`).value = getComplement( event.target.value ); } selectors.value[data.title[0]] = event.target.value; document.getElementById('scheme-select-colors').selectedIndex = '0'; selectors.value.scheme = 'Custom colors'; }); d3.select(selectors) .select(`#${data.title[1]}-color-colors`) .on('input change', (event, d) => { if (selectors.value.compColors) { selectors.value[data.title[0]] = getComplement(event.target.value); document.getElementById(`${data.title[0]}-color-colors`).value = getComplement( event.target.value ); } selectors.value[data.title[1]] = event.target.value; document.getElementById('scheme-select-colors').selectedIndex = '0'; selectors.value.scheme = 'Custom colors'; }); d3.select(selectors) .select('#compColors-toggle-colors') .on('change', () => { if (selectors.value.compColors) { selectors.value[data.title[1]] = getComplement(selectors.value[data.title[0]]); } else { selectors.value[data.title[1]] = document.getElementById( `${data.title[1]}-color-colors` ).value; } }); return selectors; }47:T596,chart = { const div = d3.create('div') .style('position', 'relative'); const svg = div.append('svg') .attr("viewBox", [0, 0, 975, 610]) const title1Label = html`

${data.title[1]}

`; const title0Label = html`

${data.title[0]}

`; const legendDiv = div.append('div') .style('position', 'absolute') .style('top', '65%') .style('right', '0'); const legendCanvas = legend.canvas; legendDiv.node().appendChild(title1Label); legendDiv.node().appendChild(legendCanvas); legendDiv.node().appendChild(title0Label); legendDiv .style('transform', 'rotate(-45deg)') .style('transform-origin', 'bottom left'); svg.append("g") .selectAll("path") .data(topojson.feature(us, us.objects.counties).features) .join("path") .attr("fill", d => color(data.get(d.id))) .attr("d", path) svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); return div.node(); }48:T66a,colorsSelectorsConfig = { const measures = [data.title[0], data.title[1]]; const colors = [defaultScheme.colors[2], defaultScheme.colors[6]]; const colorSels = measures.map((measure, i) => { return { name: `${measure}`, title: `Select a color for ${measure}`, instructions: '', type: 'color', value: colors[i] }; }); const toggle = { name: 'compColors', title: `Use complementary colors?`, instructions: 'Select to maximize color variation by using complementary colors. Deselect to select colors independently.', type: 'toggle', values: ['complement'], selected: ['complement'] }; const colorScheme = { name: 'scheme', title: 'Select a color scheme', instructions: 'Select a scheme from the original bivariate choropleth notebook.', type: 'single', values: ['Custom colors', ...schemes.map(x => x.name)], selected: [defaultScheme.name] }; const scale = { name: 'scaleType', title: 'Select a scale type', instructions: 'Select a type of scale with which to map data values to colors', type: 'single', values: scaleTypes, selected: scaleTypes[1] } const interpolator = { name: 'interpolator', title: 'Select a color interpolator', instructions: '', type: 'single', values: colInterpolators.filter(x => x !== 'interpolateRgbBasis' && x !== 'interpolateRgbBasisClosed' && x !== 'interpolateHue'), selected: 'interpolateLab' } const config = { group: 'colors', dimensions: [scale, colorScheme, interpolator, ...colorSels, toggle] }; return config; }49:T8d4,legend = { const { width, height, colorX, colorY, color0, interpolator } = legendConfig; const margin = { top: 0, right: 5, bottom: 5, left: 5 } const canvas = DOM.canvas(width + margin.right + margin.left, height + margin.top + margin.bottom); const ctx = canvas.getContext('2d'); const colors = [ color0, colorX, colorY, multiplyColors(colorX, colorY) ]; const calcColor = (point, bottomLeft, bottomRight, topLeft, topRight) => { const top = interpolator(topLeft, topRight)(point.x); const bottom = interpolator(bottomLeft, bottomRight)(point.x); const result = interpolator(top, bottom)(point.y); return result; }; const drawCanvas = () => { const imageData = ctx.createImageData(width, height); for (let y = 0; y < width; y += 1) { for (let x = 0; x < height; x += 1) { const color = calcColor( { x: x / (width - 1), y: y / (height - 1) }, ...colors ); imageData.data[(y * width + x) * 4] = d3.color(color).r; imageData.data[(y * width + x) * 4 + 1] = d3.color(color).g; imageData.data[(y * width + x) * 4 + 2] = d3.color(color).b; imageData.data[(y * width + x) * 4 + 3] = 255; } } ctx.putImageData(imageData, margin.left, 0); }; const drawLineWithArrows = (x0, y0, x1, y1, aWidth, aLength, arrowStart, arrowEnd) => { var dx = x1 - x0; var dy = y1 - y0; var angle = Math.atan2(dy, dx); var length = Math.sqrt(dx * dx + dy * dy); ctx.translate(x0, y0); ctx.rotate(angle); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(length, 0); if (arrowStart) { ctx.moveTo(aLength, -aWidth); ctx.lineTo(0, 0); ctx.lineTo(aLength, aWidth); } if (arrowEnd) { ctx.moveTo(length - aLength, -aWidth); ctx.lineTo(length, 0); ctx.lineTo(length - aLength, aWidth); } ctx.stroke(); ctx.setTransform(1, 0, 0, 1, 0, 0); } drawCanvas(); const arrowExtension = 3; drawLineWithArrows(margin.left, height + margin.top, width + margin.left, height + margin.top, 5, 9, false, true); drawLineWithArrows(margin.left, height + margin.top, margin.left, margin.top, 5, 9, false, true); return ctx; }4a:[{"id":"a532a3a211eb0a93bc9f24f5a1915f4689b36e46a99a8c3df3692cd9a26670a9b7c05aaee62ce583f4237797a1d489cc0f0c46549200744a0a5996417093a05c","href":"https://static.observableusercontent.com/files/a532a3a211eb0a93bc9f24f5a1915f4689b36e46a99a8c3df3692cd9a26670a9b7c05aaee62ce583f4237797a1d489cc0f0c46549200744a0a5996417093a05c","name":"cdc-diabetes-obesity.csv","type":"application/octet-stream","lastModified":1670364260361.725,"size":49043},{"id":"6b1776f5a0a0e76e6428805c0074a8f262e3f34b1b50944da27903e014b409958dc29b03a1c9cc331949d6a2a404c19dfd0d9d36d9c32274e6ffbc07c11350ee","href":"https://static.observableusercontent.com/files/6b1776f5a0a0e76e6428805c0074a8f262e3f34b1b50944da27903e014b409958dc29b03a1c9cc331949d6a2a404c19dfd0d9d36d9c32274e6ffbc07c11350ee","name":"counties-albers-10m.json","type":"application/octet-stream","lastModified":1670364260361.725,"size":795407}] 43:{"id":"929784d7e985c831","slug":null,"title":"Bivariate Choropleth with Continuous Color Scales","thumbnail":"c160c0e4a980a71ee1c03724ec9b8e7ba3589e4aa7d42d8e478f4bf09e48c890","access_level":"public","create_time":"$D2022-12-06T22:04:20.361Z","update_time":"$D2022-12-06T22:04:20.361Z","view_time":null,"first_public_time":"$D2022-12-06T22:04:20.361Z","has_unpublished_edits":null,"fork":{"id":"8aabbe735b6fc199","slug":"bivariate-choropleth-with-continuous-color-scales","title":"Bivariate Choropleth with Continuous Color Scales","owner":{"id":"fb1662282f83cbbe","login":"stephanietuerk","name":"Stephanie Tuerk"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f466891b319ebe82","login":"mubangansofujr","name":"Mubanga Nsofu","avatar_url":"https://avatars-next.observableusercontent.com/4b005c4c9d6b341d61dc750c7789ff06fd47dd3bc7d44c0243fea63e28208c53","tier":"starter_2024","bio":"","following":false},"version":1006,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"40936f732a34be3d","login":"mubangansofujr","name":"Mubanga Nsofu","avatar_url":"https://avatars-next.observableusercontent.com/4b005c4c9d6b341d61dc750c7789ff06fd47dd3bc7d44c0243fea63e28208c53","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"40936f732a34be3d","login":"mubangansofujr","name":"Mubanga Nsofu","avatar_url":"https://avatars-next.observableusercontent.com/4b005c4c9d6b341d61dc750c7789ff06fd47dd3bc7d44c0243fea63e28208c53","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bivariate Choropleth with Continuous Color Scales","cells":[{"id":0,"value":"md`# Bivariate Choropleth with Continuous Color Scales\n\n*Original source note:* \nDiabetes and obesity prevalence by county, 2013. Colors: [Joshua Stevens](http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/) Data: [CDC](https://www.cdc.gov/diabetes/data/countydata/countydataindicators.html)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"html`

End of visualizations

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"legendConfig = {\n let colorX;\n let colorY;\n let color0;\n if (selectors.scheme === 'Custom colors') {\n colorX = selectors[data.title[0]];\n colorY = selectors[data.title[1]];\n color0 = '#e8e8e8';\n } else {\n colorX = schemes.find(obj => obj.name === selectors.scheme).colors[2];\n colorY = schemes.find(obj => obj.name === selectors.scheme).colors[6];\n color0 = schemes.find(obj => obj.name === selectors.scheme).colors[0];\n }\n return {\n width: 75,\n height: 75,\n colorX,\n colorY,\n color0,\n interpolator: d3[selectors.interpolator]\n }\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"color = {\n return value => {\n if (!value) return \"#ccc\";\n let [a, b] = value;\n return bivariateColorScale(value);\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"bivariateColorScale = values => {\n const [xValue, yValue] = values;\n // feel like it is more readable to destructure config object rather than writing legendConfig.blah a number of times\n const { width, height, colorX, colorY, color0, interpolator } = legendConfig;\n \n const xBotScale = interpolator(color0, colorX);\n const xTopScale = interpolator(\n colorY,\n multiplyColors(colorX, colorY)\n );\n\n const yColorScale = interpolator(\n xBotScale(xScale(xValue)),\n xTopScale(xScale(xValue))\n );\n return yColorScale(yScale(yValue));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"function multiplyColors(color1, color2) {\n const r = Math.round((d3.color(color1)['r'] * d3.color(color2)['r']) / 255);\n const g = Math.round((d3.color(color1)['g'] * d3.color(color2)['g']) / 255);\n const b = Math.round((d3.color(color1)['b'] * d3.color(color2)['b']) / 255);\n return rgbToHex(r, g, b);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"function rgbToHex(r, g, b) {\n const componentToHex = c => {\n const hex = c.toString(16);\n return hex.length === 1 ? '0' + hex : hex;\n };\n return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"xScale = {\n if (selectors.scaleType === scaleTypes[0]) {\n return d3\n .scaleLinear()\n .domain(d3.extent(filteredXData))\n .range([0, 1]);\n } else if (selectors.scaleType === scaleTypes[1]) {\n const ordinalScale = (val) => {\n const index = filteredXData.indexOf(val);\n const scale = d3.scaleLinear()\n .domain([0, filteredXData.length])\n .range([0, 1]);\n return scale(index);\n };\n return ordinalScale;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"yScale = {\n if (selectors.scaleType === scaleTypes[0]) {\n return d3\n .scaleLinear()\n .domain(d3.extent(filteredYData))\n .range([0, 1]);\n } else if (selectors.scaleType === scaleTypes[1]) {\n const ordinalScale = (val) => {\n const index = filteredYData.indexOf(val);\n const scale = d3.scaleLinear()\n .domain([0, filteredYData.length])\n .range([0, 1]);\n return scale(index);\n };\n return ordinalScale;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"scaleTypes = ['linear', 'ordinal']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"defaultScheme = schemes[1];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"filteredXData = Array.from(data.values(), d => d[0]).filter(x => !isNaN(x) && x !== 0).sort(d3.ascending)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"filteredYData = Array.from(data.values(), d => d[1]).filter(x => !isNaN(x) && x !== 0).sort(d3.ascending)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"cdc-diabetes-obesity.csv\").text(), ({county, diabetes, obesity}) => [county, [+diabetes, +obesity]])), {title: [\"Diabetes\", \"Obesity\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"us = FileAttachment(\"counties-albers-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"import { colInterpolators } from '@stephanietuerk/d3-color-space-interpolators'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"import { makeSelectorGroup } from '@mathematica/form-functions'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"import { form, formValue } from \"@mbostock/form-input\"","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@6\")","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"}],"files":"$W4a","stdlib":"1"}} 44:"$43:body"