2b:null 2c:["$","title",null,{"children":"Bivariate Choropleth Mapping | kbyriel | Observable"}] 31:T5ba,# Bivariate Color Schemes in Observable Bivariate choropeth maps visualize two variables simultaneously by combining colors into a two-dimensional classification system. Unlike the standard choropeth maps that use a single color ramp, bivariate maps use one color direction for variable 1 and a separate direction for variable 2. The blended colors represent combinations of both variables. This notebook specifically, includes four custom bivariate color schemes from ColorBrewer. The schemes include: - "RdBu" - "BuPu" - "GnBu" - "PuOr" Each scheme contains 9 colors representing a 3×3 classification grid. A 3×3 bivariate map creates 3 classes for variable 1, 3 classes for variable 2, and 9 total combinations. This type of scheme is used to represent data effectivly by balancing detail and readability. The number of classes is calculated automatically with : - n = Math.floor(Math.sqrt(colors.length)) The BuPu scheme contains light colors for low-low combinations and darker purple-blue colors for high-high combinations. The intermediate blended tones for mixed relationships. The lightest colors represent counties where poverty is low and college attainment is low. The darkest colors represent counties where both variables are high. The intermediate colors are also notable considering they represent contrasting combinations. This color scheme is designed so users can visually interpret the interaction between poverty and college education.32:T44c,## Constructing the Bivariate Classification System A bivariate choropleth map requires classifying two variables independently before combining them into a shared color system. This project uses quantile classification for both variables. Quantile classification divides the dataset so that each class contains approximately the same number of geographic units. The x-axis and y-axis classification scale code: - x = d3.scaleQuantile() .domain(Array.from(data.values(), d => d[0])) .range(d3.range(n)) - y = d3.scaleQuantile() .domain(Array.from(data.values(), d => d[1])) .range(d3.range(n)) This code works to extract variable values. - attainmentd3.scaleQuantile() Goes on to create evenly distributed classes. **Quantile classification: ** This classification is useful for this map because it creates a balanced number of counties per class, with an even distribution visually. - Assigning Class Numbers .range(d3.range(n)) - Creates class values: 0, 1, 2 (low, medium, high (for each variable)) - The two class values are then combined to determine the final bivariate color.33:T5fd,## Joining TopoJSON Geometry with CSV Attributes Bivariate choropleth mapping requires combining polygon geometry with statistical attribute data so that each geographic unit can be symbolized according to two variables simultaneously. In this project: - polygon boundaries were stored in a TopoJSON file - demographic variables were stored in a CSV table - both datasets shared a common identifier using county FIPS codes The CSV file was read and converted into a JavaScript Map object: - data = Object.assign( - The await... line loads the CSV file into Observable as raw text. - d3.csvParse() converts the CSV text into usable JavaScript objects. - String(d.FIPS).padStart(5, "0") converts the county FIPS code into a standardized five-digit string. Padding with zeros is important because the FIPS codes have to match exactly and mismatched IDs would prevent the join from working correctly. - [ +d.Pct_Poverty, +d.Pct_Bachelor ] This defines that each county stores two normalized variables:percent poverty & percent college degree attainment. The csv attributes chosen were Illinois 2010 poverty percentage, and 2010 Bachelors degree or higher percentage. The reason was to identify possible patterns between the two datasets using bivariate choropleth mapping. The bivariate color scheme makes for strong visual comparisons and identifying data trends for each county. Bivariate structure captures not only visualization of each individual variable but it also captures any overlapping density areas between both.34:T443,## Creating the Bivariate Legend A bivariate legend explains how the combinations of two variables correspond to map colors. Its different from the standard choropleth legend, becasue it needs to show variation individually for both variables and also the blended combinations of the two. The legend was created using SVG elements: - legend = () => { The legend grid is generated using: - d3.cross() creates all possible combinations of x-axis classes and y-axis classes 3×3 classification. Each combination is drawn as a rectangle in the legend image. - 3 poverty classes - 3 education classes - 9 total color combinations The directional arrows in the legend help users interpret increasing values. The arrows indicate increasing poverty or increasing college attainment. The variable labels are added using: - ${data.title[0]} - ${data.title[1]} This automatically inserts: "% Poverty" and "% College Degree". The legend is critical because bivariate maps are more complex than standard choropleths and users need clear guidance to interpret the color combinations correctly.35:T52f,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]} ${data.title[1]} `; } 36:[{"id":"fa9918e0632fc47cddfd81733331fab3e883b38062929728b723dc8fee1ba919342525d7252d9f791f5d899e82163d1026ea18c0bfeab1bd27782090dd743068","href":"https://static.observableusercontent.com/files/fa9918e0632fc47cddfd81733331fab3e883b38062929728b723dc8fee1ba919342525d7252d9f791f5d899e82163d1026ea18c0bfeab1bd27782090dd743068","name":"ilcounties-2.json","type":"application/json","lastModified":1778629188065.015,"size":94651},{"id":"57ec13e28233f5092aaafa0c758d1e71388f2f8c875d9e8e7642e9fbecc8389f870a70f24ac2605ed813fc2e9491a3d52a21c0e80830783b485e0de71eca5f19","href":"https://static.observableusercontent.com/files/57ec13e28233f5092aaafa0c758d1e71388f2f8c875d9e8e7642e9fbecc8389f870a70f24ac2605ed813fc2e9491a3d52a21c0e80830783b485e0de71eca5f19","name":"illicounties@1.csv","type":"text/csv","lastModified":1778633904063.41,"size":7387}] 2f:{"id":"d9141f7049586937","slug":null,"title":"Bivariate Choropleth Mapping","thumbnail":"58177d333a71e8115c5a47f76111abb51665d747d498518e5d7793bc1b8ca04a","access_level":"public","create_time":"$D2026-05-12T23:28:10.633Z","update_time":"$D2026-05-13T02:39:12.219Z","view_time":null,"first_public_time":"$D2026-05-13T02:35:33.967Z","has_unpublished_edits":null,"fork":{"id":"82e837ede6986ccb","slug":"bivariate-choropleth-mapping","title":"Bivariate Choropleth Mapping","owner":{"id":"01fc5444d5eea4e7","login":"geoviz2026","name":"geoviz2026"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c08ca27a48b753b4","login":"kbyriel","name":"kbyriel","avatar_url":"https://avatars-next.observableusercontent.com/2b6bcaa44fca7e369b4e475abe55e89307f7b10c9512f7ee8872ee480ae770e9","tier":"starter_2024","bio":""},"version":644,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d6716eb8c379b89b","login":"kbyriel","name":"kbyriel","avatar_url":"https://avatars-next.observableusercontent.com/4c3893a14e087b11242ce1b342eec928853fbaca6fd4a69b30a0b0673a66f2e8","tier":null,"bio":""}],"members":[{"type":"individual","id":"d6716eb8c379b89b","login":"kbyriel","name":"kbyriel","avatar_url":"https://avatars-next.observableusercontent.com/4c3893a14e087b11242ce1b342eec928853fbaca6fd4a69b30a0b0673a66f2e8","tier":null,"role":"editor"},{"type":"team","id":"c08ca27a48b753b4","login":"kbyriel","name":"kbyriel","avatar_url":"https://avatars-next.observableusercontent.com/2b6bcaa44fca7e369b4e475abe55e89307f7b10c9512f7ee8872ee480ae770e9","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bivariate Choropleth Mapping","cells":[{"id":0,"value":"md`# Bivariate Choropleth Mapping\n## SEES: 3540 -- Geographic Visualization -- Katie Byriel\n\nPoverty Percentage and Bachelor Degree Completion Percentage by County Census Tracts of Illinois, US. Data: [Census 2010]`","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(\"g\")\n .attr(\"transform\", \"translate(670,250)\")\n .html(legend().innerHTML);\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(\n topojson.feature(polygons, polygons.objects.ilcounties).features\n )\n .join(\"path\")\n .attr(\"fill\", d => color(data.get(String(d.properties[idAttribute]))))\n .attr(\"stroke\", \"#333\")\n .attr(\"stroke-width\", 0.4)\n .attr(\"d\", path)\n .append(\"title\")\n .text(d => {\n const v = data.get(String(d.properties[idAttribute]));\n return `${d.properties[idAttribute]}, ${v ? format(v) : \"No data\"}`;\n });\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"## Positioning the Legend\n\nThe legend had to be positioned correctly to remain fully visible and not overlap important map areas. It also had to avoid extending outside the SVG area. The legend was positioned using a translation transform:\n\n- svg.append(\"g\")\n - .attr(\"transform\", \"translate(670,250)\")\n - .html(legend().innerHTML);\n\n**Explanation:**\n- translate(670,250) --- moves the legend horizontally and vertically\n- the first value controls left/right placement\n- the second value controls up/down placement\n\nThe legend was placed near the right side of the map, away from dense polygon regions and inside the SVG boundaries. Overlapping with the map can cause visual problems like hidden geographic patterns, blocking out important counties and reduction of map clarity. Careful placement improves overall cartographic balance and visual hierarchy.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":623,"value":"## Polygon Outline Symbology\n\nPolygon outlines improve map readability by separating geographic units and preventing adjacent polygons from visually blending together.\n\nThe county outlines were styled using:\n\n- .attr(\"stroke\", \"#333\") --- controls boundary color\n- .attr(\"stroke-width\", 0.4) --- controls line thickness\n\nA dark gray outline was selected to best provide contrast without overpowering the fill colors. The black outlines appeared a little too strong visability. The gray is just a little more subtle to preserve the bivariate color relationships when switching colors. Next, a thin outline width of 0.4 pixels was used to also maintain visabilty and focus on the colors. They both help to avoid visual clutter. Outline design is important in bivariate maps because users are interpreting complex color combinations, so the outline should be simple.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":631,"value":"## Hover Tooltips\n\nInteractive hover tooltips allow the users of this map to inspect exact values for each county. Tooltips are important for this bivariate maps because colors represent combinations of two variables, which can be difficult to interpret precisely from color alone. Working this tool ensures counties without values still display meaningful information and it improes interactivity between users and the map. Users can inspect exact values instead of relying only on visual color interpretation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":611,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"labels = [\"low\", \"\", \"high\"]","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"x = d3.scaleQuantile()\n .domain(Array.from(data.values(), d => d[0]))\n .range(d3.range(n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"y = d3.scaleQuantile()\n .domain(Array.from(data.values(), d => d[1]))\n .range(d3.range(n))","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"// Rotate map\nprojection = d3.geoTransverseMercator()\n .rotate([87,0])\n .fitExtent([[10, 10], [width, height]], polygon_features)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"## Geographic polygons are loaded from TopoJSON:\n\nThe polygons are connected to the CSV attributes using:\n- data.get(String(d.properties[idAttribute]))\n- d.properties[idAttribute] retrieves the county FIPS code from the polygon\n- data.get() searches the Map object for the matching CSV row\n- the matching poverty and education values are returned. Those values are then used for color classification.\n\n This join process allows statistical data to be visualized geographically. Without the successful join the polygons would not contain attribute values and the steps above would fail.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(\n polygons,\n polygons.objects.ilcounties\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":467,"value":"data = Object.assign(\n new Map(\n d3.csvParse(\n await FileAttachment(\"illicounties@1.csv\").text(),\n d => [\n String(d.FIPS).padStart(5, \"0\"),\n [\n +d.Pct_Poverty,\n +d.Pct_Bachelor\n ]\n ]\n )\n ),\n {\n title: [\n \"% Poverty\",\n \"% Bachelors Degree Attainment\"\n ]\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"ilcounties-2.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"height = 610","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"width = 875","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":480,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"idAttribute = \"GEOID10\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"## Applying Bivariate Colors to Polygons\n\nAfter both variables are classified, each polygon receives a color representing the combination of:\n- poverty level\n- education level\n\nThe color assignment function looked like this:\n\n- color = {return value =>....}\n\n\nCounties with missing values are assigned gray. This will help prevent map errors or invisble polygons. I initally struggled with this section of the code so I had to change it several times. This appears to be the best route to avoid misleading classifications. \"A\" represents poverty, while \"B\" represents college degree attainment.\n\n\nAssigning Quantile Classes\n- const xi = x(a);\n- const yi = y(b);\n\nThese calculate the x-axis class and the y-axis class. Each county receives two class values, and class color combinations are next. This converts the two-dimensional class combination into a single color index.\n\n\nExamples (all would receive different colors):\n\n- low poverty + high education\n- high poverty + low education\n- high poverty + high education\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":477,"value":"color = {\n return value => {\n if (!value) return \"#ccc\";\n\n const [a, b] = value;\n\n const xi = x(a);\n const yi = y(b);\n\n return colors[yi * n + xi];\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"formatNum = d3.format(\".1f\")","pinned":true,"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":true,"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":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 30:"$2f:body"