2c:null 2d:["$","title",null,{"children":"Week 5 Lab: Color scale exercises, Choropleth maps, Accessibility testing | rk2546 | Observable"}] 32:T785,### All D3.js' In-Built Color Scaes | Category | D3 scale | Typical use | |---|---|---| | **Continuous** | `d3.scaleLinear()` | Numeric → numeric/color/etc. | | | `d3.scalePow()` | Power-transformed quantitative data | | | `d3.scaleSqrt()` | Square-root scaling, especially symbol area | | | `d3.scaleLog()` | Data spanning orders of magnitude | | | `d3.scaleSymlog()` | Log-like scaling that can handle zero/negative values | | | `d3.scaleRadial()` | Radial visual encodings | | | `d3.scaleIdentity()` | Domain and range are identical | | **Temporal** | `d3.scaleTime()` | Dates/times using local time | | | `d3.scaleUtc()` | Dates/times using UTC | | **Sequential** | `d3.scaleSequential()` | Continuous values → sequential interpolator | | | `d3.scaleSequentialLog()` | Sequential + logarithmic transform | | | `d3.scaleSequentialPow()` | Sequential + power transform | | | `d3.scaleSequentialSqrt()` | Sequential + square-root transform | | | `d3.scaleSequentialSymlog()` | Sequential + symmetric-log transform | | | `d3.scaleSequentialQuantile()` | Quantile-based sequential encoding | | **Diverging** | `d3.scaleDiverging()` | Continuous values around a meaningful midpoint | | | `d3.scaleDivergingLog()` | Diverging + logarithmic transform | | | `d3.scaleDivergingPow()` | Diverging + power transform | | | `d3.scaleDivergingSqrt()` | Diverging + square-root transform | | | `d3.scaleDivergingSymlog()` | Diverging + symmetric-log transform | | **Discrete / categorical** | `d3.scaleOrdinal()` | Categories → arbitrary discrete values/colors | | | `d3.scaleBand()` | Categories → evenly spaced bands | | | `d3.scalePoint()` | Categories → evenly spaced points | | **Discretizing** | `d3.scaleQuantize()` | Continuous domain → fixed number of discrete bins | | | `d3.scaleQuantile()` | Continuous distribution → equal-count bins | | | `d3.scaleThreshold()` | User-defined thresholds → discrete values |33:T63b,In this coding session, you will be practicing with producing a scatter plot based on health data from different countries/regions. This session uses the `gapminder` data, which has been uploaded in the [_Appendix_](#gapminder-health-and-income).

[TO-DO]

You've been provided with an initialized chart with titles, but it's missing the axes and data. We want to accomplish the following:

Explore different quantitative scales (d3.scaleLinear(), d3.scaleLog()).
Explore different coloration scales.
Practice with domain() and range() when setting up plot axes.
Practice with data binding from raw datasets to D3 plots.

[HINTS]

You can use either Week 4 Exercise or this example code as coding guidelines with scatter plots.
Rather than manually define a two-item array containing d3.min() and d3.max() when setting up the domain() of each scale, you can instead just call d3.extent(ARRAY), which produces that two-item array for you.
If you need to get only unique values of an array, we provided a helper function unique(ARRAY) in the Appendix

34:T6c9,// Define our dimensions for this plot let dims = { width:500, height:500, margin_top:50, margin_bottom:50, margin_left:50, margin_right:50 }; // Instantiate a brand new chart for this coding session. Returns an

[TO-DO]

As starter code, you've been provided the barebones code for the Mercator map, adapted from the example code above. Your goals here are to:

Create a JavaScript Map() to act as a lookup dictionary when mapping countries to populations.
Practice with color scales.
Practice with rendering geodata.

[HINTS]

This part requires you practice with a new JavaScript class called Map(). It's very similar to a normal key-value dictionary. Read more about it here.
The fill attribute modifies the colors of each country. You can set it as a single, static color (like we did with the example code above) OR you can pass a function to it. You might want to use the second option to query your lookup dictionary for the country's population size, and to account for the possibility that the data might not exist in your dictionary.
Look at the data - which common feature is shared between the world and the population datasets?

37:T701,// Define our dimensions for this plot let dims = { width: 400, height: 400, margin_top: 30, margin_bottom: 30, margin_left: 30, margin_right: 30 }; // Instantiate a brand new chart for this coding session. Returns an

[TO-DO]

Practice with ColorBrewer palettes to practice with less problematic color scales.
Use https://bioapps.byu.edu/colorblind_image_tester to test your plot for Deuteranopia-friendliness.

39:T56b,function instantiate_chart(dims, titles={title:null, x_title:null, y_title:null}) { // Define our container `svg` const container = d3.create('svg') .attr('width', dims.width + dims.margin_left + dims.margin_right) .attr('height', dims.height + dims.margin_top + dims.margin_bottom) // Define our chart `g`. const chart = container.append('g') .attr('width', dims.width) .attr('height', dims.height) .attr('transform', `translate(${dims.margin_left}, ${dims.margin_top})`); // If prompted, produce each of our titles if (titles.title != null) { chart.append("text") .attr("transform", `translate(${dims.width/2}, ${-dims.margin_top/2})`) .style("text-anchor", "middle") .style("font-weight", 700) .text(titles.title); } if (titles.x_title != null) { chart.append("text") .attr("transform", `translate(${dims.width/2}, ${dims.height + dims.margin_bottom - 10})`) .style("text-anchor", "middle") .text(titles.x_title); } if (titles.y_title != null) { chart.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - dims.margin_left) .attr("x", 0 - (dims.height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text(titles.y_title); } // Return both container and chart return { container: container, chart, chart } }3a:[] 30:{"id":"6f96a044c6f3f546","slug":"2026-infovis-cse_week-5-lab","title":"Week 5 Lab: Color scale exercises, Choropleth maps, Accessibility testing","thumbnail":"341587ba5827418b2475c8f0b2c92c4ba956da02a865c8499d412ea6b4000517","access_level":"public","create_time":"$D2026-09-09T05:40:49.071Z","update_time":"$D2026-10-02T14:34:03.307Z","view_time":null,"first_public_time":"$D2026-10-02T14:54:16.749Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/f4dbf638309ae46a2fdbe9c7c40d1cf5bd31e0cd3ce09ac558ef7a4a8f2d7377","tier":"starter_2024","bio":""},"version":521,"publish_version":521,"role":null,"authored":false,"authors":[{"type":"individual","id":"ddc2916ccfd28b14","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/a17ba87a2618a0219160d264d7e13fdef2d4fb8bd902ae457541c60e7498fc11","tier":null,"bio":""}],"members":[{"type":"team","id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/f4dbf638309ae46a2fdbe9c7c40d1cf5bd31e0cd3ce09ac558ef7a4a8f2d7377","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":25,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Week 5 Lab: Color scale exercises, Choropleth maps, Accessibility testing","cells":[{"id":0,"value":"# Week 5 Lab: Color scale exercises, Choropleth maps, Accessibility testing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":385,"value":"## SLIDE NOTES","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":414,"value":"### D3 Scales: Mapping Data to Pixels","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":387,"value":"const linear_scale_example = d3.scaleLinear()\n .domain([0,10])\n .range([0, 100]);\n\ndisplay(linear_scale_example(5));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"const log_scale_example = d3.scaleLog()\n .domain([1,100000])\n .range([0, 100]);\n\ndisplay(log_scale_example(3233));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"const time_scale_example = d3.scaleTime()\n .domain([new Date(2025, 0, 1), new Date(2025, 11, 31)]) // Jan 1 to Dec 31, 2025\n .range([0, 100]);\n\ndisplay(time_scale_example(new Date(2025, 7, 12)));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"### Sequential Color Scales: Numeric Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":418,"value":"ramp(d3.scaleSequential(d3.interpolateBlues))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"ramp(d3.scaleSequential(['blue', 'yellow', 'red']))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"---\n## CODING SESSION #1: Scatter Plots, Scales, and Colors [~ 10mins]","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"$34","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"---\n## EXAMPLE: Basic Mercator Map in D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"Below, we have an example of a basic Mercator map generated using D3. This code was inspired by the beginner code provided [_here_](https://d3-graph-gallery.com/graph/backgroundmap_basic.html), which uses a different projection but is overall the same concept.\n\nD3 does a good job abstracting a ton of the difficulties with map projections that VL unfortunately had. Plotting geomaps using D3 is, overall, a bit easier. It comes with some caveats, as you'll see in the next coding session.\n\nTake a look at the code provided below to try to understand how we are generating the map data from the `world` dataset, provided in the [_Appendix_](#world). We have provided comments in each major part of the code to aid you here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":325,"value":"$35","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"---\n## CODING SESSION #2: GeoMaps and Colors [~ 25mins]","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"$37","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"---\n## CODING SESSION #3: Color Accessibility Session [~ 5min]","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":371,"value":"\n/* ================\n=== BEGIN TO-DO ===\n================ */\n\n// TO-DO: Copy-paste your code from Coding Session #1 here, and play around with different color schemes.\n// When you are done, upload a png of your plot to the image tester linked above and get an evaluation.\n// You can try different plot versions to see if it works or not.\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":421,"value":"import { css } from \"@rk2546/infovis-cse-backend\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"css","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"### Gapminder: Health and Income\n\nPer-capita income, life expectancy, population and regional grouping. Reference year for the data is not specified. Gapminder historical data is subject to revisions. Gapminder (v30, 2023) defines per-capita income as follows:\n\n> \"This is real GDP per capita (gross domestic product per person adjusted for inflation) converted to international dollars using purchasing power parity rates. An international dollar has the same purchasing power over GDP as the U.S. dollar has in the United States.\"\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"gapminder = d3.csv(\"https://vega.github.io/vega-datasets/data/gapminder-health-income.csv\", function(d) {\n return {\n country: d.country,\n income: +d.income,\n health: +d.health,\n population: +d.population,\n region: d.region\n } \n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"gapminder","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":250,"value":"### World GeoJSON & Population Data\n\nTo present a world map that shows the world population per country in 2005, we need two datasets. Both the world map data and the population-by-country data come from [here](https://r-graph-gallery.com/183-choropleth-map-with-leaflet) and is stored online [here](https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":211,"value":"world = d3.json(\"https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"population = d3.csv(\"https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"population","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":185,"value":"### Helper Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":263,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"function unique(array) {\n return array.filter((v, i) => array.indexOf(v) === i);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"// Adapted from \"@mbostock/color-ramp\"\nfunction ramp(color, numscale, n = 512) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\"),\n w = width + 28;\n canvas.style.margin = \"0 -14px\";\n canvas.style.width = `${w}px`;\n canvas.style.height = \"40px\";\n canvas.style.imageRendering = \"pixelated\";\n\n // companion numerical scale, to define the axis.\n if (numscale === undefined) numscale = d3.scaleLinear();\n if (color.domain) numscale.domain(color.domain());\n numscale.range([0, n]);\n const t = color.ticks ? color.ticks(n) : d3.range(n).map(i => i / (n - 1));\n\n for (let i = 0; i < t.length; ++i) {\n context.fillStyle = color(t[i]);\n context.fillRect((i * n) / t.length, 0, 100, 1);\n }\n\n d3.select(canvas).on(\"mousemove click\", function(event) {\n const t = numscale.invert((d3.pointer(event)[0] / w) * n);\n canvas.value = t;\n canvas.dispatchEvent(new CustomEvent(\"input\"));\n });\n canvas.value = 0;\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"2"}} 31:"$30:body"