21:null 22:["$","title",null,{"children":"Week 5 Exercise: Color scale design and implementation (due Oct 8) | Mohit Gangwani | Observable"}] 27:T546,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. This is what it looks like:

import {Legend, Swatches} from "@d3/color-legend"

At some point in time, we highly encourage that you look at the source notebook to understand how these legends are generated and how you can incorporate their code implementations into your own charts.

28:T709,### 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 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]

Some scenarios come with data described to you; others refer to imported datasets. 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.

29:T4b6,### Using Factory/Generator Functions v.s. Custom Functions The color legends we generated in Part 1B were generated from **factory** or **generator** functions that we imported from another Observable notebook. It's provided in the [_Appendix_](#appendix), but here's how we imported it: ```js import {Legend, Swatches} from "@d3/color-legend" ``` Functions like `Legend` and `Swatches` are factory functions that take a D3 color scale and return a newly generated SVG legend. We can then use that SVG as an element within our own chart (indeed, SVGs can in fact have child SVGs inside of them).

[NOTE]

The term "factory function" has a broader definition as far as JavaScript lexicon goes. Read up more about their implementation in this helpful article that discusses factory functions with JavaScript Objects.

However, for our purposes, it's typically useful to know and understand how we can create our own customized legends for our charts via D3.js. This part will focus on not just bubble charts but also how to create our own custom legends.2a:T6ba,

[TO-DO]

We're going to have a chart that is 1000px wide and 600px tall entirely, including margins. The inner chart itself (where the data will be placed) is 700px wide and 500px tall. Consequently, we have a 50px upper and lower margin as well as a 50px margin to the left and a 250px margin on the right. With this knowledge, generate the following scales assuming that your origin point is in reference to an inner chart that'll be nested within our svg, like we've done for Exercise #4:

x_scale maps the GDP data linearly from the extents of the GDP data to the X-axis. (3%)
y_scale maps the life expectancy linearly from the extents of the life expectancy data to the Y-axis. (3%)
c_scale maps the continent names (alphabetically sorted) to the provided continent_colors array. (3%)
s_scale maps the population size from the extents of the population data to a range between 4 and 40. The mapping applies a square root operation to the population value first before mapping to point radius, and we are expecting a very specific scale type that D3 provides (i.e. you should not separately calculate the square root of the population column manually). (3%)

[HINT]

You might want to review D3.js' scale operations to accomplish the square-root scaling for population.

2b:T8b4,

[TO-DO]

Let's generate a bubble chart to render the Gapminder data. It is really just like a scatter plot, except that we are applying a sizing to each data point. You must do the following:

Create new container and inner chart variables that reference newly created <svg> and <g> elements with the following sizes: (11%)
- The container is 1000px wide and 600px tall entirely, including margins. (2%)
- The inner chart is transformed to account for the following margins: 50px top, 50px bottom, 50px left, and 250px right. (6%)
- The plot is titled "Health Statistics per Region" with the X-axis titled "GDP per Capita" and the Y-axis titled "Life Expectancy (Avg. Years)" (3%)
Create a new x_axis variable that references a newly-created X-axis. The X-axis should represent the gdpPercap feature, be placed at the bottom of the inner chart, and use the x_scale we created in Part 2A. (3%)
Create a new y_axis variable that references a newly-created Y-axis. The Y-axis should represent the "lifeExp" feature, be placed to the left of the inner chart, and use the y_scale we created in Part 2A. (3%)
Populate the inner chart with data from the Gapminder dataset. Each circle must have the following properties: (8%)
- The position of each circle cx and cy are properly placed for each country. (2%)
- The radius of each circle r is set by s_scale and the pop feature (2%)
- The filled color of each circle fill is set by c_scale and the continent feature. (2%)
- The stroke and stroke-width styles of each circle are set to "black" and 1px, respectively. (2%)

Sample Solution:

${await FileAttachment("e5_2b.png").image({width:500})}

2c:T6d5,/* ================ === BEGIN TO-DO === ================ */ // Define margins and dimensions const margin = { top: 50, right: 250, bottom: 50, left: 50 }; const width = 1000 - margin.left - margin.right; // 700px const height = 600 - margin.top - margin.bottom; // 500px // 1. Container (1000x600 SVG) const container = d3.create("svg") .attr("width", 1000) .attr("height", 600); // 2. Inner Chart Group (top-level variable in block) const chart = container.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // Plot title chart.append("text") .attr("x", width / 2) .attr("y", -20) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "bold") .text("Health Statistics per Region"); // 3. X-axis & Label const x_axis = chart.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x_scale)); chart.append("text") .attr("x", width / 2) .attr("y", height + 40) .attr("text-anchor", "middle") .attr("font-size", "12px") .text("GDP per Capita"); // 4. Y-axis & Label const y_axis = chart.append("g") .call(d3.axisLeft(y_scale)); chart.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", -35) .attr("text-anchor", "middle") .attr("font-size", "12px") .text("Life Expectancy (Avg. Years)"); // Render data circles chart.selectAll("circle") .data(gapminder_data) .join("circle") .attr("cx", d => x_scale(d.gdpPercap)) .attr("cy", d => y_scale(d.lifeExp)) .attr("r", d => s_scale(d.pop)) .attr("fill", d => c_scale(d.continent)) .attr("stroke", "black") .attr("stroke-width", "1px"); /* ============== === END TO-DO === ============== */ // Do not modify display(container?.node());2d:T6d7,

[TO-DO]

Create a new color legend for the continent encoding and place it within the right margin of our plot:

Create a new color_legend variable that references a <g> appended to _with_color_.container. Translate the legend 770px to the right and 50px downward. (2%)
Using the alphabetically sorted unique continent names from gapminder_data, append one circle for each continent. Each circle should have a radius of 8px, and the circles should be vertically spaced 30px apart. Use c_scale to determine each circle's fill color. (3%)
Append a text label next to each circle containing its corresponding continent name. The labels should be vertically aligned with their circles. (3%)
Add a text element at the top of the legend (at position (0,0)) with the title "Continent". Set its font-weight to "bold". (2%)

You do not have to be 100% precise with the sample solution provided. As long as they look similar, or as long as you are styling the element to be legible, then you will get points.

Sample solution:

${await FileAttachment("e5_2c.png").image({width:500})}

[HINT]

There's actually many ways to create the color legend, given what we described above. For example, you can manually add each individual continent and corresponding color. Or, you can use the same chart-generating logic to create a new colored circle and text item for each item in an array of continents. As long as the conditions above are met, you will get the grade for this.

2e:T512,/* ================ === BEGIN TO-DO === ================ */ // 1. Create a element appended to _with_color_.container and translated (770, 50) const color_legend = _with_color_.container.append("g") .attr("transform", "translate(770, 50)"); // 2. Add title at (0, 0) with bold font-weight color_legend.append("text") .attr("x", 0) .attr("y", 0) .attr("font-weight", "bold") .text("Continent"); // Extract alphabetically sorted unique continent names const continents = Array.from(new Set(gapminder_data.map(d => d.continent))).sort(d3.ascending); // 3. Append circles and labels for each continent spaced 30px apart vertically continents.forEach((continent, i) => { const yOffset = 30 + i * 30; // 30px spacing starting below title // Circle with radius 8px and color from c_scale color_legend.append("circle") .attr("cx", 0) .attr("cy", yOffset) .attr("r", 8) .attr("fill", c_scale(continent)); // Text label vertically aligned with the circle color_legend.append("text") .attr("x", 18) .attr("y", yOffset + 4) .attr("fill", c_scale(continent)) .attr("font-size", "13px") .text(continent); }); /* ============== === END TO-DO === ============== */ // Do not modify if (color_legend != null) display(_with_color_.container?.node())2f:T5f8,

[TO-DO]

Create a new size legend that communicates how population is mapped to point radius. Place it below the continent legend within the right margin of the plot:

You are provided with population_legend representing populations of 10 million, 100 million, and 1 billion. Create a new size_legend variable that references a <g> appended to _with_sizes_.container. Translate the legend 770px to the right and 250px downward. (2%)
Add a text element at the top (at position (0,0)) of the legend titled "Population", with its font-weight set to "bold". (2%)
Using population_legend, append one circle for each population value. Use the existing s_scale to determine the radius of each circle. Vertically position the circles so that they do not overlap. (3%)
Append a text label next to each circle showing its corresponding population. Display the values as "10M", "100M", and "1B". (3%)

You do not have to be 100% precise with the sample solution provided. As long as they look similar, or as long as you are styling the element to be legible, then you will get points. To help you, we've provided the pixel positions for each of the circles in the size legend as size_positions.

Sample Solution:
${await FileAttachment("e5_2d.png").image({width:500})}

30:T499,// Do not modify const population_legend = [ 10000000, // 10M 100000000, // 100M 1000000000 // 1B ]; const size_positions = [ 30, // 10M 80, // 100M 155 // 1B ]; /* ================ === BEGIN TO-DO === ================ */ const size_legend = _with_sizes_.container.append("g") .attr("transform", "translate(770, 250)"); size_legend.append("text") .attr("x", 0) .attr("y", 0) .attr("font-weight", "bold") .text("Population"); const pop_labels = ["10M", "100M", "1B"]; population_legend.forEach((pop, i) => { const yOffset = size_positions[i]; // Circle with radius calculated by s_scale(pop) size_legend.append("circle") .attr("cx", 0) .attr("cy", yOffset) .attr("r", s_scale(pop)) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "1px"); // Text label aligned to the right of the circles size_legend.append("text") .attr("x", 50) .attr("y", yOffset + 4) .attr("font-size", "12px") .text(pop_labels[i]); }); /* ============== === END TO-DO === ============== */ // Do not modify if (size_legend != null) display(_with_sizes_.container?.node());31:T576,

[TO-DO]

Your job is to complete the Hertzsprung-Russell diagram. Right now, it's just a black box; we've already implemented the CSS styling for you, so you should focus primarily on the plotting logic. The final chart must show the following:

The chart must be titled "Hertzsprung-Russell Diagram". The X-axis must be titled "Temperature". The Y-axis must be titled "Luminosity". (3%)

The X-axis (hz_x_axis) must represent the Temperature of stars. The scale (hz_x_scale) is a linear scale. The scale increments from left to right. It must be positioned at the bottom of the chart. (4%)

The Y-axis (hz_y_axis) must represent the Luminosity of stars. The scale (hz_y_scale) is also a linear scale. The scale increments from top to bottom. It must be positioned to the left of the chart. (4%)

The points of the scatter plot must represent a star each (i.e. a row in the star_data). Graphically, stars must be circle points. Points must be colored using the bv2rgb() function. Each point must have a radius set to 0.5. (4%)

There is no need to create a legend for this chart.

Sample solution:
${await FileAttachment('hz_diagram.png').image({width:400})}
32:T779,// Define the dimensions of the chart. let w = 600; let h = 600; let m = {top:50, left:50, right:50, bottom:50}; // Create the SVG, with the relevant styling const hz_diagram = d3.create('svg') .attr('width', w + m.left + m.right) .attr('height', h + m.top + m.bottom) .style("background-color", "#000") .style("color", "#fff") .attr("fill", "#fff") .attr("font-family", "sans-serif") .attr("font-size", 15); // Create the chart inside of the SVG let hz_chart = hz_diagram.append('g') .attr('width', w) .attr('height', h) .attr('transform', `translate(${m.left}, ${m.top})`); /* ==================== ===== BEGIN TO-DO ===== ==================== */ const hz_x_scale = d3.scaleLinear() .domain(d3.extent(star_data, d => d.color)) .range([0, w]); const hz_y_scale = d3.scaleLinear() .domain(d3.extent(star_data, d => d.absolute_magnitude)) .range([0, h]); hz_chart.append("text") .attr("x", w / 2) .attr("y", -20) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Hertzsprung–Russell Diagram"); hz_chart.append("text") .attr("x", w / 2) .attr("y", h + 40) .attr("text-anchor", "middle") .attr("font-size", "12px") .text("Temperature"); hz_chart.append("text") .attr("transform", "rotate(-90)") .attr("x", -h / 2) .attr("y", -35) .attr("text-anchor", "middle") .attr("font-size", "12px") .text("Luminosity"); const hz_x_axis = hz_chart.append("g") .attr("transform", `translate(0, ${h})`) .call(d3.axisBottom(hz_x_scale)); const hz_y_axis = hz_chart.append("g") .call(d3.axisLeft(hz_y_scale)); hz_chart.selectAll("circle") .data(star_data) .join("circle") .attr("cx", d => hz_x_scale(d.color)) .attr("cy", d => hz_y_scale(d.absolute_magnitude)) .attr("r", 0.5) .attr("fill", d => bv2rgb(d.color)); /* ==================== ====== END TO-DO ====== ==================== */ // Do not modify display(hz_diagram.node())33:T605,function cloneChart(source) { if ( source == null || source.container == null || source.chart == null || typeof source.container.node !== "function" || typeof source.chart.node !== "function" || source.container.node() == null || source.chart.node() == null ) { return { container: d3.selectAll([]), chart: d3.selectAll([]) }; } const originalContainer = source.container.node(); const originalChart = source.chart.node(); // Get every element in the original tree. const originalElements = [ originalContainer, ...originalContainer.querySelectorAll("*") ]; // Find where chart occurs in that tree. const chartIndex = originalElements.indexOf(originalChart); // chart must actually belong to container. if (chartIndex === -1) { return { container: d3.selectAll([]), chart: d3.selectAll([]) }; } // Clone the entire tree ONCE. const clonedContainer = originalContainer.cloneNode(true); // Get the elements from the cloned tree in the same order. const clonedElements = [ clonedContainer, ...clonedContainer.querySelectorAll("*") ]; // Copy D3 data bindings. originalElements.forEach((original, i) => { if ("__data__" in original) { clonedElements[i].__data__ = original.__data__; } }); // The element at chartIndex is the cloned version of chart. const clonedChart = clonedElements[chartIndex]; return { container: d3.select(clonedContainer), chart: d3.select(clonedChart) }; }34:[{"id":"510c53dac985241270ae8611f30569c70a7406e86af758c9f99a28b5794e5f35e749d7855b6c6ed9acd9abcaa6cae7e815243d4b71b6b30d947e899af2cd5936","href":"https://static.observableusercontent.com/files/510c53dac985241270ae8611f30569c70a7406e86af758c9f99a28b5794e5f35e749d7855b6c6ed9acd9abcaa6cae7e815243d4b71b6b30d947e899af2cd5936","name":"color_legend.png","type":"image/png","lastModified":1791155436628,"size":23910},{"id":"29c15828dbbb50654339221d2b712cbda729b386c1b2d85c6b711b9ec3630ffddcad730e5f64ea0fb145015adb01d11accdc08103b15e2aa96b78fe32f809278","href":"https://static.observableusercontent.com/files/29c15828dbbb50654339221d2b712cbda729b386c1b2d85c6b711b9ec3630ffddcad730e5f64ea0fb145015adb01d11accdc08103b15e2aa96b78fe32f809278","name":"disasters.csv","type":"text/csv","lastModified":1791151558489,"size":18840},{"id":"f3c34def2875d0680ccc3c41eda28ac56924bd0bfc619b608d7db9d0914181fd8c6970e868bd86042a72e6825a01b3aba81fcba43cb91b9432bc94c4267d291a","href":"https://static.observableusercontent.com/files/f3c34def2875d0680ccc3c41eda28ac56924bd0bfc619b608d7db9d0914181fd8c6970e868bd86042a72e6825a01b3aba81fcba43cb91b9432bc94c4267d291a","name":"e5_1b2.png","type":"image/png","lastModified":1791153651746,"size":19645},{"id":"f6b56b9301cef7127f09e242791406d3d722534e222c5bec3ac853f1b155ffbe2a3a7165663a2c4297784017d9997252d94d47c9025619a650a09b55dbfe5ce4","href":"https://static.observableusercontent.com/files/f6b56b9301cef7127f09e242791406d3d722534e222c5bec3ac853f1b155ffbe2a3a7165663a2c4297784017d9997252d94d47c9025619a650a09b55dbfe5ce4","name":"e5_1b3.png","type":"image/png","lastModified":1791153931269,"size":17375},{"id":"27f0d1689486b27a983f4ee0c22d441302a83993fa38a76322b608e7ef95d309cda4d761ae5ab61cd439afeaa04f6839690a48afe0e388819fedcf25b6a13433","href":"https://static.observableusercontent.com/files/27f0d1689486b27a983f4ee0c22d441302a83993fa38a76322b608e7ef95d309cda4d761ae5ab61cd439afeaa04f6839690a48afe0e388819fedcf25b6a13433","name":"e5_2d.png","type":"image/png","lastModified":1791162027932,"size":87103},{"id":"964cfbab4a3653535ba109e94ee83722419b4c3249229980fbff9ca2c117b631f68332b94d9663ad6b435c04a81d8b6f59f78be7a1b5366e050cb269d334b5ed","href":"https://static.observableusercontent.com/files/964cfbab4a3653535ba109e94ee83722419b4c3249229980fbff9ca2c117b631f68332b94d9663ad6b435c04a81d8b6f59f78be7a1b5366e050cb269d334b5ed","name":"e5_3.png","type":"image/png","lastModified":1791154393847,"size":234899},{"id":"d052aab63b560a567148976b3573bd8c5629d0c8abd600aa7b49f80606cc99bfc1f378400bae48bcf82363691710199a37479333b7e1a377b252488fe651a86d","href":"https://static.observableusercontent.com/files/d052aab63b560a567148976b3573bd8c5629d0c8abd600aa7b49f80606cc99bfc1f378400bae48bcf82363691710199a37479333b7e1a377b252488fe651a86d","name":"flare.csv","type":"text/csv","lastModified":1791153196551,"size":7989},{"id":"a01b08636a1314e9dc329d141684564156cb49190d762542f3b8d09a20f7c3275fe0be93d2ed6f9056af7b27708ed91037b729cf12263e63c0eb98abd43702fc","href":"https://static.observableusercontent.com/files/a01b08636a1314e9dc329d141684564156cb49190d762542f3b8d09a20f7c3275fe0be93d2ed6f9056af7b27708ed91037b729cf12263e63c0eb98abd43702fc","name":"hertzsprung–russell.csv","type":"text/csv","lastModified":1791168164994,"size":665977},{"id":"e61abef9018da413bf95f6aca1025e88200a5b7d4958fbc7f4741a0ccf425bde04c9756c5a1ee4abd8c4e118ebe6c2365c1743d74013684ed5a2aefb5eb38a0b","href":"https://static.observableusercontent.com/files/e61abef9018da413bf95f6aca1025e88200a5b7d4958fbc7f4741a0ccf425bde04c9756c5a1ee4abd8c4e118ebe6c2365c1743d74013684ed5a2aefb5eb38a0b","name":"hz_diagram.png","type":"image/png","lastModified":1791167104065,"size":430563},{"id":"e4c9fa7f7458a40679075e7c42cd337872b8abb8a26023b30e929b6dc5a31935fc62546d1fd07615ee0bd199fdb211dd277fc93c5485a823eccc9c25ce9f175f","href":"https://static.observableusercontent.com/files/e4c9fa7f7458a40679075e7c42cd337872b8abb8a26023b30e929b6dc5a31935fc62546d1fd07615ee0bd199fdb211dd277fc93c5485a823eccc9c25ce9f175f","name":"e5_2c.png","type":"image/png","lastModified":1791161945159,"size":80901},{"id":"7b9188df8419fdc3eb55859c2989ca4649ff7228df70304d157044f726e63574f2f95cfbf8095fd54e1e1899dc12e8d11daa62e00fb7b9db3f854a0d49511dcc","href":"https://static.observableusercontent.com/files/7b9188df8419fdc3eb55859c2989ca4649ff7228df70304d157044f726e63574f2f95cfbf8095fd54e1e1899dc12e8d11daa62e00fb7b9db3f854a0d49511dcc","name":"e5_2b.png","type":"image/png","lastModified":1791161780169,"size":71421},{"id":"633e8c9649ac5d9941a6375242d64b19d5b8b5d4fceaaa16f2727c1ec5a3fa70194eebd1e558e09f80fd324819f845bf2d2fc3cc1dae55d9f85fa33868fd17ca","href":"https://static.observableusercontent.com/files/633e8c9649ac5d9941a6375242d64b19d5b8b5d4fceaaa16f2727c1ec5a3fa70194eebd1e558e09f80fd324819f845bf2d2fc3cc1dae55d9f85fa33868fd17ca","name":"e5_1b1.png","type":"image/png","lastModified":1791317964031,"size":2583},{"id":"a01b08636a1314e9dc329d141684564156cb49190d762542f3b8d09a20f7c3275fe0be93d2ed6f9056af7b27708ed91037b729cf12263e63c0eb98abd43702fc","href":"https://static.observableusercontent.com/files/a01b08636a1314e9dc329d141684564156cb49190d762542f3b8d09a20f7c3275fe0be93d2ed6f9056af7b27708ed91037b729cf12263e63c0eb98abd43702fc","name":"star_data.csv","type":"text/csv","lastModified":1791345440584,"size":665977}] 25:{"id":"6b50ea3b8fed1497","slug":"week-5-exercise-color-scale-design-and-implementation-due-oct-8","title":"Week 5 Exercise: Color scale design and implementation (due Oct 8)","thumbnail":"9b012b310a46366231f13303629892ab335b765bcd4c4d2c33d2f6d5d89cc7f1","access_level":"public","create_time":"$D2026-10-07T03:03:16.025Z","update_time":"$D2026-10-07T04:08:58.992Z","view_time":null,"first_public_time":"$D2026-10-07T04:11:18.767Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"383d02e3b2b3aefd","login":"mohit-gangwani","name":"Mohit Gangwani","avatar_url":"https://avatars-next.observableusercontent.com/76fcbbde21623ab461b6fdb3e1da501d1b48a81ce7c5a3ba04f9866cf4e1804b","tier":"starter_2024","bio":""},"version":513,"publish_version":513,"role":null,"authored":false,"authors":[{"type":"individual","id":"ef35952751fbeeb8","login":"mohit-gangwani","name":"Mohit Gangwani","avatar_url":"https://avatars-next.observableusercontent.com/76fcbbde21623ab461b6fdb3e1da501d1b48a81ce7c5a3ba04f9866cf4e1804b","tier":null,"bio":""}],"members":[{"type":"team","id":"383d02e3b2b3aefd","login":"mohit-gangwani","name":"Mohit Gangwani","avatar_url":"https://avatars-next.observableusercontent.com/76fcbbde21623ab461b6fdb3e1da501d1b48a81ce7c5a3ba04f9866cf4e1804b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Week 5 Exercise: Color scale design and implementation (due Oct 8)","cells":[{"id":1,"value":"# Week 5 Exercise: Color scale design and implementation (due Oct 8)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"In this week's lecture and lab, 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, legends in D3.js, and some more chart variants.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"## Assignment Instructions\n\nThis assignment is due **October 8th, 2026 @ 11:59pm**. Please follow the submission instructions:\n\n1. Fork this notebook to make sure that you are working on your own copy!\n2. Fill your name and NetID in the code block below. **You will not receive credit if you do not fill this part properly.**\n3. All required code exercises are marked with a [TO-DO]. Please fill these out to the best of your ability.\n - You may refer to additional online resources such as documentation and public forums for help with these questions.\n - **Please be mindful of our academic integrity policies when completing this assignment.**\n4. Make this notebook either public or unlisted. **You will not receive credit if you do not accomplish this step.**\n5. On Brightspace, submit the URL to this notebook under the relevant assignment.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"---\n
\n
[TO-DO]
\n
Fill your name and NetID:
\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"const student_name = \"Mohit Gangwani\";\nconst student_netid = \"mcg9877\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"---\n## Part 1: Legends and Color Scales (25%)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$27","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$28","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"
\n
[TO-DO] (4%)
\n
Scenario #1: You have generated a scatter plot with a chart 800px wide and 550px tall. The data along the X-axis is continuously numerical, linearly mapping values between 0 and 25 (inclusive) to the plot. Generate the proper scale for the X-axis, and calculate the X-axis pixel position that corresponds to 12.
\n
\n
Proper scale, domain, and range. (3%)
\n
Proper return value for 12. (1%)
\n
\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"/* ================\n=== BEGIN TO-DO ===\n================ */\n\nconst scenario1_scale = d3.scaleLinear()\n .domain([0, 25])\n .range([0, 800]);\nconst scenario1_value = scenario1_scale(12);\n\n/* ================\n==== END TO-DO ====\n================ */","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"
\n
[TO-DO] (4%)
\n
Scenario #2: You have generated a line plot where the chart is 500px wide and 300px tall. The chart is meant to render the data provided by scatter_data, where the Y-axis represents the \"value\" feature linearly mapping values between 8,000 and 9,500 (inclusive) to chart dimensions. Generate the proper scale for the Y-axis such that larger values appear higher on the chart, and calculate the Y-axis pixel value corresponding to 8,231.56.
\n
\n
Proper scale, domain, and range. (3%)
\n
Proper scaled value for 8,231.56. (1%)
\n
\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"// Do not modify\nconst 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 });\ndisplay(Inputs.table(scatter_data))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"/* ================\n=== BEGIN TO-DO ===\n================ */\n\nconst scenario2_scale = d3.scaleLinear()\n .domain([8000, 9500])\n .range([300, 0]);\nconst scenario2_value = scenario2_scale(8231.56);\n\n/* ================\n==== END TO-DO ====\n================ */","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"
\n
[TO-DO] (4%)
\n
Scenario #3: You are tasked with measuring and visualizing the number of deaths corresponding to each natural disaster, recorded as disasters_data. You want to generate a histogram where the disaster type (represented by the feature \"Entity\") is mapped along the X-axis in alphabetical order while the Y-axis represents the number of deaths per disaster type. Your chart is 1100px wide and 790px tall in total. Generate the proper scale for the X-axis and calculate the pixel position of the disaster type \"Epidemic\".
\n
\n
Proper scale, domain, and range. (3%)
\n
Proper scaled value for the disaster type Epidemic. (1%)
\n
\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"// Do not modify\nconst disasters_data = FileAttachment(\"disasters.csv\").csv({typed:true});\ndisplay(Inputs.table(disasters_data));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"/* ================\n=== BEGIN TO-DO ===\n================ */\nconst entities = Array.from(new Set(disasters_data.map(d => d.Entity))).sort(d3.ascending);\nconst scenario3_scale = d3.scaleBand()\n .domain(entities)\n .range([0, 1100]);\nconst scenario3_value = scenario3_scale(\"Epidemic\");\n\n/* ================\n==== END TO-DO ====\n================ */","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"
\n
[TO-DO] (4%)
\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 calculate what color corresponds to \"e\".
\n
\n
Proper scale, domain, and range. (3%)
\n
Proper scaled value for \"e\". (1%)
\n
\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"// Do not modify\nconst feature_values = [\"a\", \"b\", \"c\", \"d\", \"e\", \"f\", \"g\", \"h\"];\nconst color_values = [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"purple\", \"darkgray\", \"black\"]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"/* ================\n=== BEGIN TO-DO ===\n================ */\n\nconst scenario4_scale = d3.scaleOrdinal()\n .domain(feature_values)\n .range(color_values);\nconst scenario4_value = scenario4_scale(\"e\");\n\n/* ================\n==== END TO-DO ====\n================ */","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"### 1B. Legends, Practicing with Colors (9%)\n\nThe 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. In this part, we will practice generating color scales visually in color legends.\n\nFor this part, you will be run through several scenarios like in Part 1A. Pay attention to the descriptions of each prompt. All you need to do here is generate the color scales; the notebook is configured to auto-generate the SVGs of the legends.\n\n
\n
[NOTE]
\n
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 and here.
\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"
\n
[TO-DO] (3%)
\n
Scenario #5: 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, sorted alphabetically, to d3.schemeTableau10.
\n
\n
Proper scale, color scheme, and domain. (3%)
\n
\n
Solution:
\n ${await FileAttachment(\"e5_1b1.png\").image({width:600})}\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"// Do not modify\nconst 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 });\ndisplay(Inputs.table(flare_data));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"// Do not modify\nconst scenario5_swatch = (scenario5_scale != null)\n ? Swatches(scenario5_scale)\n : html`The color legend will generate here once you complete the code below.`;\nif (scenario5_swatch != null) display(scenario5_swatch)","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"/* ================\n=== BEGIN TO-DO ===\n================ */\n\nconst scenario5_scale = d3.scaleOrdinal()\n .domain(Array.from(new Set(flare_data.map(d => d.group))).sort(d3.ascending))\n .range(d3.schemeTableau10);\n\n/* ================\n==== END TO-DO ====\n================ */","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"
\n
[TO-DO] (3%)
\n
Scenario #6: 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. Unlike last time, the scale should be restricted to the min. and max. of the \"value\" feature.
\n
\n
Proper scale, color scheme, and domain. (3%)
\n
\n
Solution:
\n ${await FileAttachment(\"e5_1b2.png\").image({width:600})}\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"Inputs.table(scatter_data)","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"// Do not modify\nconst scenario6_legend = (scenario6_scale != null)\n ? Legend(scenario6_scale, {title:\"Values\", ticks:13, width:600})\n : html`The color legend will generate here once you complete the code below.`;\nif (scenario6_legend != null) display(scenario6_legend);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"/* ================\n=== BEGIN TO-DO ===\n================ */\n\nconst scenario6_scale = d3.scaleSequential()\n .domain(d3.extent(scatter_data, d => d.value))\n .interpolator(d3.interpolateOranges);\n\n/* ================\n==== END TO-DO ====\n================ */","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"
\n
[TO-DO] (3%)
\n
Scenario #7: Working with disasters_data once more, you want to add visual impact to your chart by using d3.schemeSpectral[8] colors to map \"Deaths\" to specific colors (not a gradient). Generate a color scale that visualizes the number of deaths ranging between zero and 4 million.
\n
\n
Proper scale, color scheme, and domain. (3%)
\n
\n
Solution:
\n ${await FileAttachment(\"e5_1b3.png\").image({width:600})}\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"display(Inputs.table(disasters_data));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// Do not modify\nconst scenario7_legend = (scenario7_scale != null)\n ? Legend(scenario7_scale, {title:\"Total number of deaths\", width:700, ticks:10})\n : html`The color legend will generate here once you complete the code below.`;\nif (scenario7_legend != null) display(scenario7_legend);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"/* ================\n=== BEGIN TO-DO ===\n================ */\n\nconst scenario7_scale = d3.scaleQuantize()\n .domain([0, 4000000])\n .range(d3.schemeSpectral[8]);\n\n/* ================\n==== END TO-DO ====\n================ */","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"---\n## Part 2: Practicing with Bubble Charts and Custom Legends (57%)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"In this part, we will be exploring a variant of scatter plots: **bubble charts**. A bubble chart is generally similar to a scatter plot, with one major exception: unlike a normal scatter chart where there are usually at most three (3) features (X-axis, Y-axis, color), the _size_ of each point represents a 4th quantitative feature.\n\nWe will be rendering the `gapminder_data` dataset, which we import below. This dataset, if you recall, has the following feature set:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"const 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});\n\ndisplay(Inputs.table(gapminder_data));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"The type of graph we will be generating here looks a lot like this:\n\n${await FileAttachment(\"e5_2d.png\").image({width:770})}\n\nTake note the following properties of the bubble chart:\n\n- The _GDP per Capita_ and _Life Expectancy_ of each country are represented by the X-axis and Y-axis, respectively.\n- The _size_ of each point is indicative of the population of each country.\n- The _color_ of each point is indicative of which continent the country belongs to.\n- The _legend_ mapping continent to color looks very different from those we generated in Part 1B.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$29","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"### 2A. Generating Scale Encodings For Features (12%)\n\nLet's start very simple and create the scale encodings for our four data features:\n\n- `gdpPercap`: The GDP per capita for each country. Should scale linearly to the X-axis.\n- `lifeExp`: The average life expectancy in years for each country. Should also scale linearly to the Y-axis.\n- `continent`: The continent that each country resides in. Should scale to distinct colors.\n- `pop` The population of each country. Should scale to the radii of each point, _not linearly but by square-rooting each population value first_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$2a","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"// Do not modify\nconst continent_colors = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99']\n\n/* ================\n=== BEGIN TO-DO ===\n================ */\n\nconst x_scale = d3.scaleLinear()\n .domain(d3.extent(gapminder_data, d => d.gdpPercap))\n .range([0, 700]);\nconst y_scale = d3.scaleLinear()\n .domain(d3.extent(gapminder_data, d => d.lifeExp))\n .range([500, 0]);\nconst c_scale = d3.scaleOrdinal()\n .domain(Array.from(new Set(gapminder_data.map(d => d.continent))).sort(d3.ascending))\n .range(continent_colors);\nconst s_scale = d3.scaleSqrt()\n .domain(d3.extent(gapminder_data, d => d.pop))\n .range([4, 40]);\n\n/* ================\n==== END TO-DO ====\n================ */","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"### 2B. Generating The Chart Without the Legend (25%)\n\nNow, generating the actual chart isn't too terribly complicated here. We want to generate the chart without the legend at first; we'll do that in the next part. Instead, let's simply plot the data as-is using all four scales we created in Part 2A.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$2b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$2c","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"### 2C. Creating our Color Legend (10%)\n\nWith our main chart instantiated, let's now create a legend for the colors of our data points.\n\n
\n
[NOTE]
\n
Similar with Exercise #4, we will be cloning our containers and charts to ensure that we don't mutate answers from previous parts of this section. For this part, you must use _with_color_.container instead of just container.
\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"const _with_color_ = cloneChart({container,chart});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"$2d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$2e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"### 2D. Creating Our Size Legend (10%)\nNow, it is time to create a sizing legend to map point radii to actual population sizes.\n\n
\n
[NOTE]
\n
Similar with Exercise #4, we will be cloning our containers and charts to ensure that we don't mutate answers from previous parts of this section. For this part, you must use _with_sizes_.container instead of container or _with_colors_.container.
\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"const _with_sizes_ = (()=>{\n color_legend;\n return cloneChart(_with_color_);\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"$30","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"--\n## Part 3: Colors in Application: The Herzsprung-Russell Diagram (18%)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"We will be re-creating a very interesting plot known as the \"Hertzsprung-Russell Diagram\". This diagram is a scatter plot that depicts the relationship between stars' luminosity and temperature. Curiously, the diagram was created independently by two separate individuals: Ejnar Hertzsprung (1911) and Henry Norris Russell (1913).\n\n${await FileAttachment(\"hz_diagram.png\").image({width:800})}\n\nYou might notice the use of colors in this chart to create an _ambience_. The data concerns stellar bodies, and colors are used to invoke a space theme where points are meant to reflect the starlight in the night sky.\n\nLet's generate a similar scatter plot for ourselves. We have a dataset `star_data` that contains the original data. If you look closely, you'll notice that this dataset has only two features: `absolute_magnitude` (AKA the luminosity) and `color` (AKA temperature).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"### 3A. Importing Star Data (3%)\n\n
\n
[TO-DO]
\n
Please download and import the original dataset from Google Drive and save it as star_data.
\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"/* ================\n=== BEGIN TO-DO ===\n================ */\n\nconst star_data = FileAttachment(\"star_data.csv\").csv({ typed: true });\n\n/* ================\n==== END TO-DO ====\n================ */\n\n// Do not modify\nif (star_data != null) display(Inputs.table(star_data, {align:{absolute_magnitude:\"left\",color:\"left\"}}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"### 3B. Creating the Herzsprung-Russel Diagram (15%)\n\nThe `absolute_magnitude` feature is rather simple: luminosity can be easily thought of as a quantitative value. The more curious feature is the `color` feature, which is also numerical. We need a means to convert this column's scalar values into RGB data. We have a helper function [`bv2rgb()`](#bv2rgb) that helps us with this conversion. In fact, `bv2rgb()` will take the place of typical D3.js scales such as `d3.scaleSequential()`; you can use this as an example of a custom function that designers can write up manually, instead of using pre-defined D3 functions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"$32","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"---\n## Appendix\n\n
\n
[NOTE]
\n
Do not touch anything beyond this point.
\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"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":6,"value":"css","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"function bv2rgb(bv) {\n bv = Math.max(-0.4, Math.min(2, bv));\n let t;\n return `#${[\n bv < 0 ? (t = (bv + 0.4) / 0.4, 0.61 + (0.11 * t) + (0.1 * t * t))\n : bv < 0.4 ? (t = bv / 0.4, 0.83 + (0.17 * t))\n : 1,\n bv < 0 ? (t = (bv + 0.4) / 0.4, 0.70 + (0.07 * t) + (0.1 * t * t))\n : bv < 0.4 ? (t = bv / 0.4, 0.87 + (0.11 * t))\n : bv < 1.6 ? (t = (bv - 0.4) / 1.20, 0.98 - (0.16 * t))\n : (t = (bv - 1.6) / 0.4, 0.82 - (0.5 * t * t)),\n bv < 0.4 ? 1\n : bv < 1.5 ? (t = (bv - 0.4) / 1.1, 1 - (0.47 * t) + (0.1 * t * t))\n : bv < 1.94 ? (t = (bv - 1.5) / 0.44, 0.63 - (0.6 * t * t))\n : 0\n ].map(t => Math.round(t * 255).toString(16).padStart(2, \"0\")).join(\"\")}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"const answers = {\n student_name, student_netid,\n\n scenario1_scale, scenario1_value,\n scenario2_scale, scenario2_value,\n scenario3_scale, scenario3_value,\n scenario4_scale, scenario4_value,\n\n scenario5_scale,\n scenario6_scale,\n scenario7_scale,\n\n x_scale,\n y_scale,\n c_scale,\n s_scale,\n\n container,\n chart,\n x_axis,\n y_axis,\n color_legend,\n size_legend,\n\n star_data,\n hz_diagram,\n hz_chart,\n hz_x_scale,\n hz_y_scale,\n hz_x_axis,\n hz_y_axis,\n bv2rgb\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"2"}} 26:"$25:body"