31:Te13,# Week 5 Exercise: Color scale design and implementation (due Oct 9) In this week's [_lecture_](https://ctsilva.github.io/2025-InfoVis-CSE/slides/week5-color.html#/) and [_lab_](https://ctsilva.github.io/2025-InfoVis-CSE/labs/week5-lab.html#/), we focused on the nature of color scales and why they're important for visualizations. In this week's exercise, we will take this opportunity to practice with color scales further and write our own custom legends for colors. ### _This assignment is divided as follows:_ 1. [Legends and Color Scales](#cell-263) [25%] 1. [Understanding Scale, Domain, and Range](#cell-268) [16%] 2. [Legends, Practicing with Colors](#cell-335) [9%] 2. [Heatmaps and Color Scales](#cell-11) [30%] 1. [Generating the Heatmap](#cell-78) [15%] 2. [Testing With Pre-Defined Color Scales](#cell-232) [9%] 3. [Analyzing Color Scale Effectiveness](#cell-559) [6%] 3. [Practicing with Bubble Charts and Custom Legends](#cell-572) [45%] 1. [Plotting the Bubble Chart](#cell-574) [14%] 2. [Adding Size](#cell-624) [5%] 3. [Custom Legend for Colors](#cell-732) [26%] ### _Note:_ Code-Intensive Exercise Though there are many parts to each section, note that these tasks are rather simple. Nonetheless, this exercise will be particularly code-heavy. Keep in mind of your time commitment for this, and go at a steady pace you are comfortable with. Do not hesitate to ask online or during office hours for code questions. --- ## Assignment Instructions **_Fork this notebook to make sure that you are working on your own copy!_** Work your way down the notebook, making sure to run code blocks whenever they appear. Some parts may require you to fill out markdown blocks. Others will require code work. And some are not interactive and are just for instructions! All exercises will be marked with a **[TO-DO]**, so pay attention to them throughout the notebook. **_[TO-DO]'s and [NOTES]_**: Keep an eye out not just for **[TO-DO]** but also **[NOTES]**. You MUST read these notes to fully understand what's going on in some sections. **_Academic Integrity Policies_** Please be mindful of our academic integrity policies when completing this assignment. ## Submission Instructions This assignment is due **October 9th, 2025 @ 11:59pm**. Please follow the submission instructions: 1. _Make the notebook visible to the public._ This is accomplished by clicking the "Share" button at the top of the page and changing the "Access" settings for the Public to "Can view". 2. _Copy the Notebook URL in the same "Share" panel._ Feel free to use either an automatically-generated or custom URL. 3. In the markdown block below, _please fill out the following information._ The "Notebook URL" is the URL you copied in Step 2. **Not filling out the details below will result in a 0 for this assignment!** 4. _Download the notebook as a `.tgz` zip file._ This can be done by: 1. Scroll up to the top of the notebook, and click the "..." button. 2. `Export` -> `Download Code`. This produces a `.tgz` zip file. 3. On Brightspace, _navigate to "Assignments" and locate the corresponding assignment submission page._ 4. _Upload the `.tgz` zip file._

Please make sure to:

Read ALL instructions carefully for each part of this assignment; the code should try to match exactly the requirements specified!
Check your SHARE URL link in the markdown box, alongside your Name and NetID, before submitting!

32:T52f,## Part 1: Legends and Color Scales [25%] Up to this point, we hadn't generated any legends for our plots. In many cases, legends weren't needed with most of the simple scatter plots we created with D3. However, as we start to approach more unique chart types and interact with color scales, it is becoming much more useful to start generating legends alongside our plots. This part is divided into 2 major subparts: 1. 1A: Understanding Scale, Domain, and Range [16%] 2. 1B: Legends, Practicing with Colors [9%] The goals of this part of the exercise are to familiarize you with generating color scales (i.e. understanding the causal links between `d3.scale`, `domain()`, and `range()`) as well as generating custom legends for your plots within the Observable environment. ### [NOTE]: About Legends, D3, and Observable To help abstract away some of the difficulties with generating legends, we have imported the following package in the [_Appendix_](#cell-172). This is what it looks like: ````js import {Legend, Swatches} from "@d3/color-legend" ```` At some point in time, we highly encourage that you look at the [_source notebook_](https://observablehq.com/@d3/color-legend) to understand how these legends are generated - but for now, we will be using this to help us generate legends for our color scales.33:T810,### 1A: Understanding Scale, Domain, and Range [16%] In our previous scatter plots, we had to define our X- and Y-axes using scales. Recall that every time we did so, it was a 3-step operation (sometimes a two-step operation, for reasons we'll explore further): 1. Define the scale type we want to use (e.g. `d3.scaleLinear()`, `d3.scaleLog()`, `d3.scaleSequential()`). 2. Indicate a `.domain()` that defined either the extents or explicit values of the data feature we wanted to represent. 3. Indicate a `.range()` that defined how the domain would be mapped to the pixels of our SVG chart. It is incredibly useful for you to understand the various [_types of D3 scales_](https://d3js.org/d3-scale) provided by D3. As a general rule of thumb, consider these when making your choices: 1. What **data type** is the feature I am working with? Is it quantitative data? Ordinal/nominal data? Time data? 2. Depending on the data type of the feature, what **scale** do I need? Linear, Log, Time, Sequential, etc.? 3. In the end, to what pixel **range** do I want to map the feature values to? Let's practice with some manually defined scales. In this part, you will be provided several unique scenarios. _Read each scenario carefully_, and generate the proper scale. Using your scale, provide an answer to each prompt. **_[NOTE]_**: Each section here is structured like so: ````js { const scale = return scale() } ```` Only modify the `` and `` sections based on the scenario prompts. **_[NOTE]_**: Some scenarios come with data described to you; others refer to imported datasets (most of which are actually imported in the [_Appendix_](#cell-63)). Some come with pre-defined variables such as `_width` or `_margin_right`, while others don't. For scenarios with the data described to you, use manually defined values (ex. `400`, `1000`); for scenarios with either data or dimensional variables provided, use the dataset or variables instead. **You will not get credit if you do not follow scenario prompts corrected**. 34:T480,### 1B: Legends, Practicing with Colors [9%] The last scenario in Part 1A deals with colors that are manually defined for you. However, in most cases, you won't have that luxury. Instead, you are likely to rely on color scales that have to be generated dynamically, based on either your dataset or some interactive feature. Here, we will practice generating color scales. Recall in this week's [_Lecture_](https://ctsilva.github.io/2025-InfoVis-CSE/slides/week5-color.html#/) and [_Lab_](https://ctsilva.github.io/2025-InfoVis-CSE/labs/week5-lab.html#/) that we covered the explicit data types and their corresponding D3 scales. We'll replicate some of that in our own scenarios. For this part, you will be run through several scenarios like in Part 1A. Pay attention to how the legends are rendered in each scenario - you will be implementing them in later parts of this Exercise. **_[NOTE]_**: If you want to learn more about the different kind of color interpolations provided by D3, take some time to read through these two notebooks [_here_](https://observablehq.com/@d3/working-with-color) and [_here_](https://d3js.org/d3-interpolate/color).35:T4f9,#### [TO-DO, 15%] We have provided the scaffolding for the SVG container and chart, as well as titled its axes and chart. Your task is to finish the histogram to resemble the chart previewed below. To achieve this chart, you must accomplish the following: 1. **[3%]**: Add an x-axis to the chart using the `x_scale` variable that scales the "groups" column to the width of the chart. 2. **[3%]**: Add a y-axis to the chart using the `y_scale` variable that scales the "variable" column to the height of the chart. 3. **[3%]**: Create a color axis `c_scale` variable that: 1. **[1%]**: Uses `d3.scaleLinear()`. 1. **[1%]**: Has a **domain** set to the extents of the `value` feature. 2. **[1%]**: Has a **range** set to to a two-item array containing the colors "white" and "black". 4. **[6%]**: Add the data points from `heatmap_data` following the example code provided. Your code must: 1. **[1%]**: Select and append "rect" elements 2. **[3%]**: Use `x_scale`, `y_scale`, and `c_scale` to set values for the `x`, `y`, and `fill` attributes 3. **[2%]**: Sets `width` and `height` to the `.bandwidth()` of their respective axes. In the end, your code implementation must provide a figure similar to that previewed below, complete with axes and a color legend.36:T625,_**TIPS**_: - Take care to read the scaffold code provided to you carefully; we might have already pre-defined some values for you. - For each of the axes, if you do not know what kind of [_D3 scale_](https://d3js.org/d3-scale) to use, consider what data type each feature is as well as what the output range will be. For the X-axis and Y-axis, consider that you will be outputting to a continuous pixel range. - For more information on how the `` works with SVGs, read [_this documentation_](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect). - Since this is your first time handling heat map data, we will provide a clear example of what the code looks like. ````js chart.selectAll('rect') // We use `rect` instead of `circle` for scatter plots .data(data) // Bind our data .enter() // We refer to all data that remains unbounded to the SVG still .append("rect") // Append a `rect` for each row of unbound data .attr("x", (d) => x_scale(d.x) ) // We must define an x and y origin for each rect .attr("y", (d) => y_scale(d.y) ) .attr("width", x_scale.bandwidth() ) // We must define a width and height for each rect .attr("height", y_scale.bandwidth() ) .style("fill", (d) => c_scale(d.c) ) // The fill defines the color of the heatmap cell .style('stroke', '#fff') // OPTIONAL: "stroke" and "stroke-width" are stylistic .style('stroke-width', "5px"); // choices to avoid overlaps between heatmap cells ````37:T5b0,heatmap_linear = { // Use our helper function to create the container and chart for our the heatmap. const _width_ = 400; const _height_ = 400; const margins = {top:30, left: 50, bottom:50}; const titles = {chart: "Heatmap: Linear Color Scale", x:"Groups", y:"Variables"}; const heatmap = instantiate_chart({width: _width_, height: _height_, margins: margins, titles: titles}); // Create arrays from our feature columns. const groups = unique(heatmap_data.map( d => d.group)) const vars = unique(heatmap_data.map( d => d.variable)) const values = heatmap_data.map( d => d.value ); /* ================ === BEGIN TO-DO === ================ */ // TO-DO [3%]: // 1. Create an `x_scale` variable with the appropriate scale type, domain, and range // 2. Append your new x-axis to `heatmap.chart` const x_scale = // TO-DO [3%]: // 1. Create an `y_scale` variable with the appropriate scale type, domain, and range // 2. Append your new y-axis to `heatmap.chart` const y_scale = // TO-DO [3%]: // Create a `c_scale` scale using `d3.scaleLinear()`, with: // - A domain set to the extents of `values`, and // - A range set to ["white","black"] const c_scale = // TO-DO [6%]: // Plot the data to `heatmap.chart`, following the example provided. /* ================ ==== END TO-DO ==== ================ */ return Object.assign(heatmap.container.node(), {scales: {c_scale}}); }38:T830,#### [TO-DO, 14%] A bubble chart is generally similar to a scatter plot, with one major exception: the _size_ of each point will represent a 3rd quantitative feature. For our chart, let's start with a very simple scatter plot with the following setup: - **[3%]**: Each row in the `gapminder_data` dataset is represented by a circle, complete with `cx`, `cy`, and `r` attributes. We manually set the radius to 5px for now. - **[1%]**: The `cx` attribute is set properly. - **[1%]**: The `cy` attribute is set properly. - **[1%]**: The `r` attribute is set properly. - **[2%]**: The "gdpPercap" feature is represented along the X-axis. We use a _custom_ domain set to between `0` and the maximum "gdpPercap" value - **[1%]**: The `x_scale` is set using the proper scale, domain, and range. - **[1%]**: The X-axis is appended to the chart. - **[2%]**: The "lifeExp" feature is represented along the Y-axis. - **[1%]**: The `y_scale` is set using the proper scale, domain, and range. - **[1%]**: The Y-axis is appended to the chart. - **[7%]**: The "continent" feature is represented by the color, or `fill`, of each circle. - **[1%]**: The `c_scale` is set using the proper scale, domain, and range/interpolator. - **[2%]**: The `fill` style property of each circle is set properly. - **[2%]**: The `stroke` style property of each circle is set to "black". - **[2%]**: The `stroke-width` style property of each circle is set to 1px. We've provided the scaffold, but your task is to render a simple scatter plot with these characteristics in mind. This time, we will leave it up to you to set and render the axes and circles of the scatter plot. It is also up to you to determine the optimal coloration of each continent; you can use tools like [_ColorBrewer_](https://colorbrewer2.org/) or [_Figma's Color Palette Tool_](https://www.figma.com/color-palette-generator/) to aid you. We will provide some light scaffolding for the chart and legend, but it's up to you to complete the code on your own. The colors may differ, but your plot should look something similar to this:39:T42d,gapminder_scatter = { // Use our helper function to create the container and chart for our the heatmap. const _width_ = 700; const _height_ = 500; const margins = {top:30, left: 50, bottom:50, right:200}; const titles = {chart: "Health Statistics per Region", x:"GDP Per Capita", y:"Life Expectancy (Avg., Years)"}; const svg = instantiate_chart({width: _width_, height: _height_, margins: margins, titles: titles}); // Create arrays from our feature columns. const countries = gapminder_data.map( d => d.country) const continents = gapminder_data.map( d => d.continent) const gdp = gapminder_data.map( d => d.gdpPercap ); const life = gapminder_data.map( d => d.lifeExp ); const pop = gapminder_data.map( d => d.pop ); /* ================ === BEGIN TO-DO === ================ */ const x_scale = const y_scale = const c_scale = /* ================ ==== END TO-DO ==== ================ */ // Return the container and color scale for rendering return Object.assign(svg.container.node(), {scales: {c_scale}}); }3a:T43c,gapminder_size = { // Use our helper function to create the container and chart for our the heatmap. const _width_ = 700; const _height_ = 500; const margins = {top:30, left: 50, bottom:50, right:200}; const titles = {chart: "Health Statistics per Region", x:"GDP Per Capita", y:"Life Expectancy (Avg., Years)"}; const svg = instantiate_chart({width: _width_, height: _height_, margins: margins, titles: titles}); // Create arrays from our feature columns. const countries = gapminder_data.map( d => d.country) const continents = gapminder_data.map( d => d.continent) const gdp = gapminder_data.map( d => d.gdpPercap ); const life = gapminder_data.map( d => d.lifeExp ); const pop = gapminder_data.map( d => d.pop ); /* ================ === BEGIN TO-DO === ================ */ const x_scale = const y_scale = const c_scale = const r_scale = /* ================ ==== END TO-DO ==== ================ */ // Return the container and color scale for rendering return Object.assign(svg.container.node(), {scales: {c_scale}}); }3b:T6a7,#### [TO-DO, 26%] Copy your solution from Part 3B below and further add to it by following these instructions: 1. **[6%]**: Create a new `legend` variable that appends a new `g` element to `svg.container`. This `g` element must have the following attributes: - **[2%]**: must be translated to 20 pixels right of the chart as well as downward by the top margin. - **[2%]**: Must have a width of 100px. - **[2%]**: Must have a height of 250px. 2. **[9%]**: Using the `.selectAll()`, `.data()`, and `.enter()` syntax that we've been using before, add circles to the `legend` element such that: - **[1%]**: We append a `circle` for every unique item in our `continents` array. - **[8%]**: Each circle must have: - **[2%]**: A `cx` set to 10px. - **[2%]**: A `cy` that uses the `(d,i)` syntax to generate a custom height: ``10 + i*(lsize+lgap)``. - **[2%]**: A `r` set to `lsize`. - **[2%]**: A `fill` style determine by your `c_scale`. 3. **[11%]**: Using the `.selectAll()`, `.data()`, and `.enter()` syntax that we've been using before, add text elements to the `legend` element such that: - **[1%]**: We append a `text` for every unique item in our `continents` array. - **[10%]**: Each text element must have: - **[2%]**: An `x` set to a custom width: ``20 + lsize*0.8``. - **[2%]**: A `y` that uses the `(d,i)` syntax to generate a custom height: ``10 + i*(lsize+lgap) + lsize/2``. - **[2%]**: A `fill` style determine by your `c_scale`. - **[2%]**: A `font-weight` style set to "bold". - **[2%]**: A `.text(d => d)` that sets the text content to the value itself. If successful, you should have a legend that looks very similar to the preview below:3c:T91c,gapminder_legend = { // Use our helper function to create the container and chart for our the heatmap. const _width_ = 700; const _height_ = 500; const margins = {top:30, left: 50, bottom:50., right:200}; const titles = {chart: "Health Statistics per Region", x:"GDP Per Capita", y:"Life Expectancy (Avg., Years)"}; const svg = instantiate_chart({width: _width_, height: _height_, margins: margins, titles: titles}); // Create arrays from our feature columns. const countries = gapminder_data.map( d => d.country) const continents = gapminder_data.map( d => d.continent) const gdp = gapminder_data.map( d => d.gdpPercap ); const life = gapminder_data.map( d => d.lifeExp ); const pop = gapminder_data.map( d => d.pop ); // We pre-define a radius size for the circles in our legend, as well as the gap between legend items const lsize = 10; const lgap = 20; /* ================ === BEGIN TO-DO === ================ */ // TO-DO: Copy your solution from Part 3B here: const x_scale = const y_scale = const c_scale = const r_scale = // TO-DO: Append a new `g` element to `svg.container` that has the following attributes: // - Translated to 20px rightward, 20px downward // - Has a width of 100 and a height of 250; const legend = // TO-DO: For each unique item in `continents`, append a circle to `legend` as follows: // - Use the `selectAll()`, `.data()`, and `.enter()` method. // - Set the `cx` of each circle to 10 // - Set the `cy` of each circle to 10 + i*(lsize+lgap) // - Set the `r` of each circle to `lsize` // - Set the `fill` of each circle to the color of the continent, defined by `c_scale` // TO-DO: For each unique item in `continents`, append a text element to `legend` as follows: // - Use the `selectAll()`, `.data()`, and `.enter()` method. // - Set the `x` of each text to 20 + lsize*0.8 // - Set the `y` of each text to 10 + i*(lsize+lgap) + lsize/2 // - Set the `fill` of each circle to the color of the continent, defined by `c_scale` // - Set the `font-weight` style property to 'bold' // - Using `.text(...)`, set the text content to the continent name /* ================ ==== END TO-DO ==== ================ */ // DO NOT MODIFY return Object.assign(svg.container.node(), {scales: {c_scale}}); }3d:T914,function instantiate_chart(args) { // Handling optional arguments args = args ?? {}; // Width and Height args.width = args.width ?? width; args.height = args.height ?? args.width * 0.6; // margins args.margins = args.margins ?? {left:0, right:0, top:0, bottom:0}; args.margins.left = args.margins.left ?? 0; args.margins.right = args.margins.right ?? 0; args.margins.top = args.margins.top ?? 0; args.margins.bottom = args.margins.bottom ?? 0; // titles args.titles = args.titles ?? {chart:"", x_title:"", y_title:""}; args.titles.chart = args.titles.chart ?? ""; args.titles.x = args.titles.x ?? ""; args.titles.y = args.titles.y ?? ""; // Define our container `svg` const container = d3.create('svg') .attr('width', args.width + args.margins.left + args.margins.right) .attr('height', args.height + args.margins.top + args.margins.bottom) // Define our chart `g`. const chart = container.append('g') .attr('width', args.width) .attr('height', args.height) .attr('transform', `translate(${args.margins.left}, ${args.margins.top})`); // If prompted, produce each of our titles if (args.titles.chart != null && args.titles.chart.length > 0) { chart.append("text") .attr("transform", `translate(${args.width/2}, ${-args.margins.top/2})`) .style("text-anchor", "middle") .style("font-weight", 700) .text(args.titles.chart); } if (args.titles.x != null && args.titles.x.length > 0) { chart.append("text") .attr("transform", `translate(${args.width/2}, ${args.height + args.margins.bottom - 10})`) .style("text-anchor", "middle") .text(args.titles.x); } if (args.titles.y != null && args.titles.y.length > 0) { chart.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - args.margins.left) .attr("x", 0 - (args.height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text(args.titles.y); } function clone() { let _container = cloneAndAppend(this.container); let _chart = cloneAndAppend(this.chart, _container); return { container: _container, chart: _chart, clone: clone }; }; // Return both container and chart return { container: container, chart: chart, clone: clone, } }3e:[{"id":"b30c79325faecc9103c2ce7dd7b2402752438d0f50c7e29158f4c55708d087ddafc0fa69273a3282a49ec3d3fa525fc51d4d083f5eaeab28ce791722d74d9863","href":"https://static.observableusercontent.com/files/b30c79325faecc9103c2ce7dd7b2402752438d0f50c7e29158f4c55708d087ddafc0fa69273a3282a49ec3d3fa525fc51d4d083f5eaeab28ce791722d74d9863","name":"disasters.csv","type":"text/csv","lastModified":1759749761449.621,"size":18840},{"id":"bfff238ba4616b3b4f19f67191c44a04dc992d95b81895b36f7473a70d304b0486d3534f99cc1f93584499931dea3fff9a904f18b047844d6d4e1221f8e886af","href":"https://static.observableusercontent.com/files/bfff238ba4616b3b4f19f67191c44a04dc992d95b81895b36f7473a70d304b0486d3534f99cc1f93584499931dea3fff9a904f18b047844d6d4e1221f8e886af","name":"flare.csv","type":"text/csv","lastModified":1759751802528.461,"size":7989},{"id":"c68c46aebcb653329df1a397a6e7a1ebf55c857771c667d8ea6c21e76b2cc6592e451b15a93b4b9253716f8b8bf8930beea5848a432aa9b3efc3145d9af2fb2c","href":"https://static.observableusercontent.com/files/c68c46aebcb653329df1a397a6e7a1ebf55c857771c667d8ea6c21e76b2cc6592e451b15a93b4b9253716f8b8bf8930beea5848a432aa9b3efc3145d9af2fb2c","name":"1b_b.png","type":"image/png","lastModified":1759753844028.713,"size":12175},{"id":"88320d8f0bd865823a2dff184f17d09a1335972a819029e89e895e8f69c459040002b62c4ba8e01a347f61a916c53e34b4328726825e1aa7b40741c0ac1288bf","href":"https://static.observableusercontent.com/files/88320d8f0bd865823a2dff184f17d09a1335972a819029e89e895e8f69c459040002b62c4ba8e01a347f61a916c53e34b4328726825e1aa7b40741c0ac1288bf","name":"1b_c.png","type":"image/png","lastModified":1759754611481.619,"size":9477},{"id":"04782b9ecb2849264ea93917c652a914b402e14ecf8d0111992cd82cdd2cbc7a430b80c8cd9adcee80269a70f563b984fdec0566c619e85e6d1c8dd78eef8182","href":"https://static.observableusercontent.com/files/04782b9ecb2849264ea93917c652a914b402e14ecf8d0111992cd82cdd2cbc7a430b80c8cd9adcee80269a70f563b984fdec0566c619e85e6d1c8dd78eef8182","name":"2b_c.png","type":"image/png","lastModified":1759759508233.89,"size":12437},{"id":"f61d68d6d0cf5fd2a0f56774d6a203f06018e9da1768de59295a83b775882fa38fa1a50ff66562c70c3cb6973b10b10a81f87da413b3336c2ccfcc8cd9d50bb4","href":"https://static.observableusercontent.com/files/f61d68d6d0cf5fd2a0f56774d6a203f06018e9da1768de59295a83b775882fa38fa1a50ff66562c70c3cb6973b10b10a81f87da413b3336c2ccfcc8cd9d50bb4","name":"color_legend.png","type":"image/png","lastModified":1759776970778.292,"size":23910},{"id":"d459dac1e9978aaae4cd82b5867db70812d2653540b38108c432e43f79fb08f23f48310c3092457efe45d1b9979a5b0f50de7417897521652ef29e5a08e0e613","href":"https://static.observableusercontent.com/files/d459dac1e9978aaae4cd82b5867db70812d2653540b38108c432e43f79fb08f23f48310c3092457efe45d1b9979a5b0f50de7417897521652ef29e5a08e0e613","name":"2b_b.png","type":"image/png","lastModified":1759758772787.791,"size":12536},{"id":"63f0826090f493dce98c76bfd0bb69e4e87f3f44d36a13438804e069cd133669b81a0d29db6b71c4f8812a1b29112eb43b93a17b8e505e0e01a38a259b4630df","href":"https://static.observableusercontent.com/files/63f0826090f493dce98c76bfd0bb69e4e87f3f44d36a13438804e069cd133669b81a0d29db6b71c4f8812a1b29112eb43b93a17b8e505e0e01a38a259b4630df","name":"2b_a.png","type":"image/png","lastModified":1759758560640.761,"size":12626},{"id":"250ec36e00c6bb23b176ed33531bf5ea9b603cf1bb13cbd2587cb24859180fcd18d38fe820b3232f3b44c4797e43c6a0f12e887c2feb144eb3f4fd532dafdfdf","href":"https://static.observableusercontent.com/files/250ec36e00c6bb23b176ed33531bf5ea9b603cf1bb13cbd2587cb24859180fcd18d38fe820b3232f3b44c4797e43c6a0f12e887c2feb144eb3f4fd532dafdfdf","name":"2a.png","type":"image/png","lastModified":1759757665652.018,"size":12370},{"id":"cc09cd47578200bbc32b62d5ffdd91959952900ae31d6035bbbfff5e5f71acad8ee364f79d5c5769b98b973efe52d85eceaf60361a3fa5d139a193ad7358457c","href":"https://static.observableusercontent.com/files/cc09cd47578200bbc32b62d5ffdd91959952900ae31d6035bbbfff5e5f71acad8ee364f79d5c5769b98b973efe52d85eceaf60361a3fa5d139a193ad7358457c","name":"1b_a.png","type":"image/png","lastModified":1759753418645.456,"size":10074},{"id":"7067cbe84cc292195ae53334d6afeff13a35834816f1d5ba24a9097d842fe67feb51021e8c923caf4322d7494e5ed34e5b3f2379a1de75d3239d3e5d98742db6","href":"https://static.observableusercontent.com/files/7067cbe84cc292195ae53334d6afeff13a35834816f1d5ba24a9097d842fe67feb51021e8c923caf4322d7494e5ed34e5b3f2379a1de75d3239d3e5d98742db6","name":"3c.png","type":"image/png","lastModified":1759784747208.458,"size":227482},{"id":"e986c8bb5472a8fe196edc335d1fc3930ea17378640d62a60298984e52ef1ddb0dd6f63622de368dbd9157041ee88e20af161254b8e697bac5403ea062658faa","href":"https://static.observableusercontent.com/files/e986c8bb5472a8fe196edc335d1fc3930ea17378640d62a60298984e52ef1ddb0dd6f63622de368dbd9157041ee88e20af161254b8e697bac5403ea062658faa","name":"3a@2.png","type":"image/png","lastModified":1759774517297.232,"size":649270}] 2f:{"title":"Week 5 Exercise: Color scale design and implementation (due Oct 9)","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":852,"value":"---\n\n#### [TO-DO]\n\nFill out the following submission details:\n\n* **Name:** <FULL NAME>\n* **NetID:** <NET ID>\n* **SHARE URL:** <NOTEBOOK URL>\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":263,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":299,"value":"#### [TO-DO, 4%]\n\n**Scenario #1**: You have generated a scatter plot with a chart 800px wide and 550px tall. The chart has no margins. The data along the X-axis stretches from 0 to 25, while the Y-axis represents data from 10 to 105. Generate the proper scale for the X-axis, and tell me what pixel value corresponds to the value `12`.","pinned":false,"hidden":false,"mode":"md"},{"id":301,"value":"// 3%: Proper scale, domain, and range\n// 1%: Proper return value\n{\n // TO-DO\n const scale = \n return scale();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"#### [TO-DO, 4%]\n\n**Scenario #2**: You have generated a line plot where the chart is 500px wide and 300px tall. The chart has no margins. The chart is meant to render the data provided by `scatter_data`, where the Y-axis represents the \"value\" feature of the data. Generate the proper scale for the Y-axis, and tell me what pixel value corresponds to value `8,231.56`.","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"scatter_data","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"// [3%]: Proper scale, domain, and range\n// [1%] Proper return value\n{\n const _width = 500;\n const _height = 300;\n \n // TO-DO\n const scale = \n return scale();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"#### [TO-DO. 4%]\n\n**Scenario #3**: You are tasked with measuring and visualizing the number of deaths corresponding to each natural disaster. You've managed to aggregate such data and saved it as `disasters_data`. You want to generate a horizontal histogram where the disaster type (represented by the feature \"Entity\") is along the X-axis while the Y-axis represents the number of deaths per disaster type. Your chart is 1100px wide and 790px tall, with a left margin of 30px and a top margin of 50px. Generate the proper scale for the X-axis and return the pixel position of the disaster type \"Epidemic\". **_[Note]_**: You can make use of the `unique()` function provided to you in the [_Appendix_](#unique).","pinned":false,"hidden":false,"mode":"md"},{"id":319,"value":"disasters_data","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"// [3%] Proper scale, domain, and range\n// [1%] Proper return value\n{\n const _width = 1100, _height = 790;\n const _margin_left = 30, _margin_right = 30, _margin_top = 50, _margin_bottom = 30\n \n // TO-DO\n const scale = \n return scale();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":328,"value":"#### [TO-DO, 4%]\n\n**Scenario #4**: You want to generate a color scale for your plot. Fortunately, your boss has manually defined which categorical data feature is assigned to which color, meaning your job is to just generate the proper scale to map categorical features to distinct colors. Generate the scale needed for this job, and indicate what color corresponds to \"e\".","pinned":false,"hidden":false,"mode":"md"},{"id":332,"value":"// [3%] Proper scale, domain, and range\n{\n const feature_values = [\"a\", \"b\", \"c\", \"d\", \"e\", \"f\", \"g\", \"h\"];\n const color_values = [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"purple\", \"darkgray\", \"black\"]\n\n // TO-DO\n const scale = \n return scale();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":335,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":340,"value":"#### [TO-DO, 3%]\n\n**Scenario #1**: You are a systems architect responsible for managing class dependencies in your company's software hierarchy. You've aggregated the data inside of the `flare_data` dataset. Your job is to generate a color scale that maps the \"group\" feature to a scale using `d3.schemeTableau10`. Your legend should appear similar to this:","pinned":false,"hidden":false,"mode":"md"},{"id":387,"value":"FileAttachment(\"1b_a.png\").image({width:400})","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"flare_data","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"// [3%] Proper scale, interpolator, and domain\n{ \n // TO-DO\n const scale = \n\n // DO NOT MODIFY\n return Swatches(scale);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"#### [TO-DO, 3%]\n\n**Scenario #2**: You're working again with `scatter_data` and you are tasked with creating a color scheme for the \"value\" feature. Your task is to generate a continuous color legend using `d3.interpolateOranges`. If successful, your legend should look something similar to that below:\n","pinned":false,"hidden":false,"mode":"md"},{"id":422,"value":"FileAttachment(\"1b_b.png\").image({width:400})","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"scatter_data","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"// [3%] Proper scale, interpolator, and domain\n{\n // TO-DO\n const scale = \n\n // DO NOT MODIFY\n return Legend(scale, {title:\"Values\", ticks:13, width:600});\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":426,"value":"#### [TO-DO, 3%]\n\n**Scenario #3**: Working with `disasters_data` once more, you want to add visual impact to your chart by using colors to map \"Deaths\" to specific colors. However, a continuous interpolation won't do - instead, we want to map the \"Deaths\" feature to a discrete color palette. To achieve this, we need to use `d3.scaleQuantize()`. Generate a color scale that uses `d3.scaleQuantize()` with `d3.schemeSpectral[8]` that visualizes the number of deaths. In this case, you want the number of deaths to range between zero and 4 million. If successful, your chart should look something similar to: ","pinned":false,"hidden":false,"mode":"md"},{"id":455,"value":"FileAttachment(\"1b_c.png\").image({width:400})","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"disasters_data","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"// [3%] Proper scale, interpolator, and domain\n{\n // TO-DO\n const scale = \n\n // DO NOT MODIFY\n return Legend(scale, {title:\"Total number of deaths\", width:700, ticks:10});\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"## Part 2: Heatmaps and Color Scales [30%]\n\nIn this section, we will be practicing with generating legends for our plots, color scales, and a chart type we had very little prior experience before: heatmaps. This is particularly useful when we want to represent trends between two categorical features.\n\nThis part is divided into **three** sub-parts:\n\n1. 2A: Generating the Heatmap [15%]\n2. 2B: Testing With Pre-Defined Color Scales [9%]\n3. 2C: Analyzing Color Scale Effectiveness [6%]","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"### 2A. Generating the Heatmap [15%]\n\nA heatmap can be rendered similarly to a scatter plot. There are some caveats to consider:\n\n1. Both the X- and Y-axes must be either categorical in nature or be binned in some way, similar to how a histogram will be generated.\n2. Depending on the data type of the features represented by the axes, you will have to modify which D3 scale you should use.\n3. Rather than plot circles, we will need to plot rectangles. We may need to apply additional attributes and style properties to them.\n\nIn the code block below, we will generate a barebone histogram using the `heatmap_data` dataset (see the [_Appendix_](#heatmap_data)). This dataset contains three features: \"group\", \"variable\", and \"value\". \"group\" and \"variable\" are categorical features, while \"value\" is a quantitative value. We will plot the \"group\" feature along the X-axis, the \"variable\" feature along the y-axis, and color the heatmap based on the \"value\" feature.","pinned":false,"hidden":false,"mode":"md"},{"id":218,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":202,"value":"FileAttachment(\"2a.png\").image({width:300})","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"$36","pinned":false,"hidden":false,"mode":"md"},{"id":237,"value":"// DO NOT MODIFY - Will auto-generate if the code block below is implemented correctly.\nLegend(heatmap_linear.scales.c_scale, {title:\"Heatmap Value Scale\", ticks:8});","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"### 2B: Testing With Pre-Defined Color Scales [9%]\n\nIn Part 2A, we used a linear scale with our color scale. This isn't a bad choice, but we can make the visualization a tad more interesting by implementing a different color scale.\n\nThis time, your task is copy your implementation from Part 2A into the **three** code blocks below and use **three** different color scales this time. All these variants will use `d3.scaleSequential()` with the following interpolators:\n\n1. **[3%]**: Use `d3.interpolateInferno`.\n2. **[3%]**: Use `d3.interpolateBlues`.\n3. **[3%]**: Use `d3.interpolateRgbBasis([\"red\", \"green\", \"blue\"])`.","pinned":false,"hidden":false,"mode":"md"},{"id":497,"value":"#### [TO-DO, 3%]\nCopy your answer from Part 2A and use `d3.scaleSequential()` with `d3.interpolateInferno` for the color scale. Don't forget to set the `.domain()` too. If successful, your visualization should look like the preview below:","pinned":false,"hidden":false,"mode":"md"},{"id":514,"value":"FileAttachment(\"2b_a.png\").image({width:300})","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"Legend(heatmap_inferno.scales.c_scale, {title:\"Heatmap Value Scale\", ticks:8})","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"heatmap_inferno = {\n // Use our helper function to create the container and chart for our the heatmap.\n const _width_ = 400;\n const _height_ = 400;\n const margins = {top:30, left: 50, bottom:50};\n const titles = {chart: \"Heatmap: Linear Color Scale\", x:\"Groups\", y:\"Variables\"};\n const heatmap = instantiate_chart({width: _width_, height: _height_, margins: margins, titles: titles});\n \n // Create arrays from our feature columns.\n const groups = unique(heatmap_data.map( d => d.group))\n const vars = unique(heatmap_data.map( d => d.variable))\n const values = heatmap_data.map( d => d.value );\n\n /* ================\n === BEGIN TO-DO ===\n ================ */\n\n const x_scale = \n const y_scale = \n const c_scale = \n \n\n \n /* ================\n ==== END TO-DO ====\n ================ */\n \n return Object.assign(heatmap.container.node(), {scales: {c_scale}});\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"#### [TO-DO, 3%]\nCopy your answer from Part 2A and use `d3.scaleSequential()` with `d3.interpolateBlues` for the color scale. Don't forget to set the `.domain()` too. If successful, your visualization should look like the preview below:","pinned":false,"hidden":false,"mode":"md"},{"id":528,"value":"FileAttachment(\"2b_b.png\").image({width:300})","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"Legend(heatmap_blues.scales.c_scale, {title:\"Heatmap Value Scale\", ticks:8})","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"heatmap_blues = {\n // Use our helper function to create the container and chart for our the heatmap.\n const _width_ = 400;\n const _height_ = 400;\n const margins = {top:30, left: 50, bottom:50};\n const titles = {chart: \"Heatmap: Linear Color Scale\", x:\"Groups\", y:\"Variables\"};\n const heatmap = instantiate_chart({width: _width_, height: _height_, margins: margins, titles: titles});\n \n // Create arrays from our feature columns.\n const groups = unique(heatmap_data.map( d => d.group))\n const vars = unique(heatmap_data.map( d => d.variable))\n const values = heatmap_data.map( d => d.value );\n\n /* ================\n === BEGIN TO-DO ===\n ================ */\n \n const x_scale = \n const y_scale = \n const c_scale = \n\n \n \n \n /* ================\n ==== END TO-DO ====\n ================ */\n \n return Object.assign(heatmap.container.node(), {scales: {c_scale}});\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":534,"value":"#### [TO-DO, 3%]\nCopy your answer from Part 2A and use `d3.scaleSequential` with `d3.interpolateRgbBasis([\"red\", \"green\", \"blue\"])` for the color scale. Don't forget to set the `.domain()` too. If successful, your visualization should look like the preview below:","pinned":false,"hidden":false,"mode":"md"},{"id":555,"value":"FileAttachment(\"2b_c.png\").image({width:300})","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"// DO NOT MODIFY\nLegend(heatmap_rgb.scales.c_scale, {title:\"Heatmap Value Scale\", ticks:8})","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"heatmap_rgb = {\n // Use our helper function to create the container and chart for our the heatmap.\n const _width_ = 400;\n const _height_ = 400;\n const margins = {top:30, left: 50, bottom:50};\n const titles = {chart: \"Heatmap: Linear Color Scale\", x:\"Groups\", y:\"Variables\"};\n const heatmap = instantiate_chart({width: _width_, height: _height_, margins: margins, titles: titles});\n \n // Create arrays from our feature columns.\n const groups = unique(heatmap_data.map( d => d.group))\n const vars = unique(heatmap_data.map( d => d.variable))\n const values = heatmap_data.map( d => d.value );\n\n /* ================\n === BEGIN TO-DO ===\n ================ */\n \n const x_scale = \n const y_scale = \n const c_scale = \n\n \n \n /* ================\n ==== END TO-DO ====\n ================ */\n \n return Object.assign(heatmap.container.node(), {scales: {c_scale}});\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":559,"value":"### 2C: Analyzing Color Scale Effectiveness [6%]\n\nIn the markdown box below, answer these questions. For both, there is no wrong or right answer, but we expect at least a few sentences here.\n\n- **[4%]** Provide a ranking, from worst to best, of the four color interpolations we've explored with our heatmap in terms of _your ability to distinguish a cell's value based on its color_. Some plots may be equally good or bad from your point of view.\n- **[2%]** Provide justifications for your rankings. Why did you rank the visualizations in this way? Did you use a color checker such as [_this_](https://bioapps.byu.edu/colorblind_image_tester), or is it from your intuition?","pinned":false,"hidden":false,"mode":"md"},{"id":567,"value":"===============\n\n> [TO-DO]\n\n===============","pinned":false,"hidden":false,"mode":"md"},{"id":572,"value":"## Part 3: Practicing with Bubble Charts and Custom Legends [45%]\n\nIn this part, we will be exploring a variant of scatter plots: **bubble charts**. This part is divided into the following sub-parts:\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":574,"value":"### 3A: Plotting the Bubble Chart [14%]\n\nWe will be rendering the `gapminder_data` dataset we imported via the [_Appendix_](#gapminder_data). This dataset, if you recall, has the following feature set:","pinned":false,"hidden":false,"mode":"md"},{"id":583,"value":"gapminder_data","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"$38","pinned":false,"hidden":false,"mode":"md"},{"id":620,"value":"FileAttachment(\"3a@2.png\").image({width:400})","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"// DO NOT MODIFY\nSwatches(gapminder_scatter.scales.c_scale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":624,"value":"### 3B: Adding Size [5%]\n\nWe want to make the size of each circle correspond to the population size. This time, pay close attention to the range of possible values provided by the \"pop\" feature in the `gapminder_data` dataset and set the size accordingly.","pinned":false,"hidden":false,"mode":"md"},{"id":702,"value":"#### [TO-DO, 5%]\n\nCopy your answer from Part 3A over to the code block below, and make the following changes:\n\n- **[3%]**: Create a **new** `r_scale` variable for the \"pop\" feature.\n - **[1%]**: A linear scale is used.\n - **[1%]**: The proper domain is used.\n - **[1%]**: the range is set to between `4` and `40`.\n- **[2%]**: Modify the `r` attribute of the circles so that they instead adhere the new `r_scale`.","pinned":false,"hidden":false,"mode":"md"},{"id":728,"value":"// DO NOT MODIFY\nSwatches(gapminder_size.scales.c_scale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":732,"value":"### 3C. Custom Legend for Colors [26%]\n\nIn Parts 1 and 2 and up to Part 3B, we've used the `Legend()` and `Swatches()` functions we imported. However, with this size chart, let's try a more _custom_ solution. In this part, we'll focus purely on generating our own colors legend. The idea here is:\n\n1. We append a new group \"g\" to the container, such that it's positioned to the right of the chart (we may have to modify our margins to allow this).\n2. Within this new \"g\" group, we have colored circles to represent the colors, and text labels next to them to represent the continents.\n\nWe might end up wanting to generate something similar to that below:","pinned":false,"hidden":false,"mode":"md"},{"id":786,"value":"FileAttachment(\"color_legend.png\").image({width:150})","pinned":false,"hidden":false,"mode":"ojs"},{"id":792,"value":"However, we need to be a bit careful about how we position the elements in our legend. Namely:\n\n- We need to set the Y-position of each color circle and their respective continent so that they don't overlap with each other.\n- Each circle must not overlap with their continent name, and vice-versa.\n\nTo handle the relative positioning of each vertical item in the legend, we can use a handy trick. Observe the code below:\n\n````js\n .attr('cy', (d,i) => ...)\n````\n\nRather than just use `d` or `(d)`, we have `(d,i)`. When using this syntax, we are getting not just the value `d`, but also its index `i` in the array defined by `.data()`. So we can leverage this to relatively position each item vertically in the array.","pinned":false,"hidden":false,"mode":"md"},{"id":734,"value":"$3b","pinned":false,"hidden":false,"mode":"md"},{"id":863,"value":"FileAttachment(\"3c.png\").image({width:400})","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":170,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":172,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"### Helper Functions","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"function unique(array) {\n return array.filter((v, i) => array.indexOf(v) === i);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"function cloneAndAppend(child, parent) {\n const childClones = [];\n \n child.each(function(p, j) {\n const original = d3.select(this);\n const cloneNode = original.node().cloneNode(true);\n const cloneSelection = d3.select(cloneNode);\n cloneSelection.datum(original.datum());\n \n cloneSelection.select('*'); // propogate data down.\n childClones.push(cloneNode);\n\n if (parent) {\n parent.node().appendChild(cloneNode);\n }\n });\n \n return d3.selectAll(childClones);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"### Datasets","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"scatter_data = d3.csv(\"https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/connectedscatter.csv\", \n function(d){\n return { date : d3.timeParse(\"%Y-%m-%d\")(d.date), value : d.value }\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"disasters_data = FileAttachment(\"disasters.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"flare_data = FileAttachment(\"flare.csv\").csv({typed:true}).then(_data => {\n return _data.map(row => ({\n id: row.id,\n group: row.id.split(\".\")[1] ?? \"no group\",\n value: row.value ?? 0\n }))\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"heatmap_data = d3.csv(\"https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"gapminder_data = d3.csv(\"https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/4_ThreeNum.csv\", function(d) {\n return {\n country: d.country,\n continent: d.continent,\n lifeExp: +d.lifeExp,\n pop: +d.pop,\n gdpPercap: +d.gdpPercap\n } \n});","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}