2d:null 2e:["$","title",null,{"children":"Week 6 Exercise: Chart Types Review (Due Oct. 15) | Zhiqi Zhao | Observable"}] 33:T42a,## Assignment Instructions This assignment is due **October 15th, 2026 @ 11:59pm**. We base our grading on the last updated timestamp of your notebook; please take care to not modify your notebook at any point after this submission time. Otherwise, please follow these instructions: 1. Fork this notebook to make sure that you are working on your own copy! 2. Fill your name and NetID in the code block below. **You will not receive credit if you do not fill this part properly.** 3. All required code exercises are marked with a [TO-DO]. Please fill these out to the best of your ability. - You may refer to either lecture materials, lab materials, or additional online resources such as documentation and public forums for help with these questions. - **Please be mindful of our academic integrity policies when completing this assignment.** 4. Make this notebook either public or unlisted. **You will not receive credit if you do not accomplish this step.** 5. On Brightspace, submit the URL to this notebook under the relevant assignment.34:T4c5,For this exercise, we have question prompts that vary on specificity with code requirements. Please make sure to **_read ALL instructions carefully for each part of this assignment._** - For places where details are strictly defined for code, your solution should try to match exactly the requirements specified. - For more vague prompts **you are allowed to be more creative with of the finer details**, as long as they apply code concepts we've described in this exercise's write-ups, previous exercises, and labs. - Provided sample solutions in this case are **suggestions** for your completed solutions ought to look. They can contain cosmetic differences, such as the choices in color, axes scaling, titles, and legend placement/appearance. - We emphasize our class' policy on AI usage: > You can use generative AI tools to do the assignments in this class. If you use an AI to guide you in completing an assignment, **you must disclose which parts were generated by the AI.** Remember that you are responsible for any errors or inaccuracies in AI-generated content, and you must be able to explain all submitted work. 35:T64d,### Part 1A. Charting a Single Line (25%) Charting a line with D3.js has some similarities with scatter plots - you still need to generate the SVG elements yourself, with the appropriate scales, axes, titles, and point generation. If you need a review, please go over our course's Exercise #4. However, there are some minor differences we need to consider: 1. Rather than plotting generic shapes such as ``, ``, or `` like we do with normal scatter plots, we instead are plotting `` elements. 2. Each `` represents a single line and has a `d` attribute that defines all the points that define the line. We recommend reading up the documentation on `` if you want to learn more. 3. When plotting a _single_ line, rather than use `.data(DATASET)` when we are rendering our data onto our chart, we instead use `.datum(COLLECTION OF POINTS)`. This is because this operation defines whether we are plotting a singular entity (`.datum`) or multiple entities (`.data`). - For scatter plots, since each entry in our dataset represents a data point, we use `.data(DATASET)`. - For a single line in a line plot, we use `.datum(COLLECTION OF POINTS)`. - For a multi-line plot, we use `.data(GROUPED DATASET)`. Observe the example below and its corresponding code. Note that this example lacks the typical charting such as axes. Regardless, focus on how we are plotting the array `example_points`:36:T70b,

[TO-DO]

Generate a single-line plot using entries from stocks_data that are associated with Microsoft. You must do the following:

Create a subset of stocks_data, called msft, that contains stock entries that have a "MSFT" symbol. (1%)
Generate an <svg> plot with D3.js that is 800px wide and 450px tall in total, saved as msft_svg. All content within the plot must be within a 50px margin in all 4 directions (top, bottom, left, right). (3%)
The X-axis: (6%)
- Represents the "date" feature, (1%)
- Is scaled temporally with a domain matching the extents of the "date" feature and a range fitting the entire chart width, (4%)
- Has a visible title "Years". (1%)
The Y-axis: (6%)
- Represents the "price" feature, (1%)
- Is scaled linearly with a domain from 0 to the maximum possible price and a range fitting the entire height of the chart, (4%)
- Has a visible title "Stock Prices". (1%)
A single line, colored as #002FFF and with a stroke width of 2px, is a <path> element that represents the stock items with "MSFT" symbol. (5%)
The chart has a title that: (4%)
- Has the text "Microsoft Stock Prices", and (1%)
- Is placed at half the width and at y=25 relative to the <svg> itself. (3%)

Example Solution

${await FileAttachment("e6-1a.png").image({width:500})}

37:T514,// Do not modify // GRADING_HASH=single-line /* ================ === BEGIN TO-DO === ================ */ const msft = stocks_data .filter(d => d.symbol === "MSFT") .sort((a, b) => a.date - b.date); const msft_svg = d3.create("svg") .attr("width", 800) .attr("height", 450); const x = d3.scaleTime() .domain(d3.extent(msft, d => d.date)) .range([50, 750]); const y = d3.scaleLinear() .domain([0, d3.max(msft, d => d.price)]) .range([400, 50]); msft_svg.append("g") .attr("transform", "translate(0,400)") .call(d3.axisBottom(x)); msft_svg.append("g") .attr("transform", "translate(50,0)") .call(d3.axisLeft(y)); msft_svg.append("path") .datum(msft) .attr("d", d3.line() .x(d => x(d.date)) .y(d => y(d.price)) ) .attr("fill", "none") .attr("stroke", "#002FFF") .attr("stroke-width", 2); msft_svg.append("text") .attr("x", 400) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Microsoft Stock Prices"); msft_svg.append("text") .attr("x", 400) .attr("y", 440) .attr("text-anchor", "middle") .text("Years"); msft_svg.append("text") .attr("transform", "translate(15,225) rotate(-90)") .attr("text-anchor", "middle") .text("Stock Prices"); /* ============== === END TO-DO === ============== */ 38:T440,

[TO-DO]

Generate a multi-line plot that demonstrates stock prices over time for all symbols provided in stock_data. The plot must be contained within the stocks_svg variable. Generally, your multi-line plot should have these considerations:

The chart is appropriately titled to let viewers know what the chart is about and what the axes represent. (3%)
5 separate lines must be represent each company and must use the .selectAll().data().enter().append() approach to render lines, rather than plot them individually and manually. (6%)
Each axis uses appropriate scales to demonstrate prices over time. (2%)
Colors and a color legend should clearly indicate which colored line corresponds to which company. (3%)
The chart is clearly legible with no occluded, mistakenly placed, or otherwise out-of-place design choices. (1%)

Example Solution

${await FileAttachment("e6-1b.png").image({width:500})}

39:T83a,// Do not modify // GRADING_HASH=multi-line /* ================ === BEGIN TO-DO === ================ */ const stocks_svg = d3.create("svg") .attr("width", 900) .attr("height", 450); const stocks_grouped = d3.groups(stocks_data, d => d.symbol); stocks_grouped.forEach(([symbol, values]) => { values.sort((a, b) => a.date - b.date); }); const stocks_x = d3.scaleTime() .domain(d3.extent(stocks_data, d => d.date)) .range([60, 750]); const stocks_y = d3.scaleLinear() .domain([0, d3.max(stocks_data, d => d.price)]) .nice() .range([390, 50]); const stocks_color = d3.scaleOrdinal() .domain(stocks_grouped.map(d => d[0])) .range(d3.schemeTableau10); stocks_svg.append("g") .attr("transform", "translate(0,390)") .call(d3.axisBottom(stocks_x)); stocks_svg.append("g") .attr("transform", "translate(60,0)") .call(d3.axisLeft(stocks_y)); stocks_svg.append("g") .selectAll("path") .data(stocks_grouped) .enter() .append("path") .attr("d", d => d3.line() .x(item => stocks_x(item.date)) .y(item => stocks_y(item.price))(d[1]) ) .attr("fill", "none") .attr("stroke", d => stocks_color(d[0])) .attr("stroke-width", 2); stocks_svg.append("text") .attr("x", 450) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Stock Prices by Company"); stocks_svg.append("text") .attr("x", 405) .attr("y", 435) .attr("text-anchor", "middle") .text("Years"); stocks_svg.append("text") .attr("transform", "translate(18,220) rotate(-90)") .attr("text-anchor", "middle") .text("Stock Prices"); const stocks_legend = stocks_svg.append("g") .selectAll("g") .data(stocks_grouped) .enter() .append("g") .attr("transform", (d, i) => `translate(775,${60 + i * 25})` ); stocks_legend.append("line") .attr("x1", 0) .attr("x2", 22) .attr("y1", 0) .attr("y2", 0) .attr("stroke", d => stocks_color(d[0])) .attr("stroke-width", 2); stocks_legend.append("text") .attr("x", 30) .attr("y", 4) .attr("font-size", 12) .text(d => d[0]); /* ============== === END TO-DO === ============== */ 3a:Tb2b,### Part 2A. Basic Histograms (10%) To generate basic histograms, D3.js gives you an easy way to generate histograms: a separate `d3.histogram()` function. Observe the example below, which is adapted from D3 chart gallery's page on basic histograms. In this version of a histogram, we are merely plotting the counts of records as the Y-axis; the X-axis represents the range of prices. ```js // X axis: scale and draw: let x_scale = d3.scaleLinear() .domain([0, 1000]) // We map the domain to between 0 and 1,000 .range([0, width]); // We map the raw prices to the width of the chart // We generate a `histogram` function that extracts the "price" feature from each data item and renders it let histogram = d3.histogram() .value( (d) => d.price ) // Associate the value with the "price" feature .domain(x_scale.domain()) // We match the domain of our histogram to that of our `x_scale` .thresholds(x_scale.ticks(70)); // Finally, we calculate the numbers of bins ``` When it comes to the Y-axis, we need to link it back to how our histogram calculates data counts. So, observe how the Y-axis scale is generated: ```js // We apply our recently-created `histogram` function to calculate our data bins let bins = histogram(data); // We can now identify our Y-axis scale let y_scale = d3.scaleLinear() .domain([0, d3.max(bins, (d) => d.length )]) // The domain goes from 0 to the max possible bin count .range([height, 0]); // And we map to height of the plot ``` Later, we can use the `.selectAll("rect").data().enter().append("rect")` pattern we've used many times before to actually generate the histogram bins: ```js svg.selectAll("rect") .data(bins) // Note that we do not use the raw data; we use `bins` .enter() .append("rect") .attr("x", d => x_scale(d.x0) + 1) .attr("y", d => y_scale(d.length)) .attr("width", d => x_scale(d.x1) - x_scale(d.x0) - 1) .attr("height", d => height - y_scale(d.length)) .style("fill", "#69b3a2"); ``` All the `.attr()` operations we are doing here may look complicated, but consider the following: - SVG `` elements have the following properties: `x`, `y`, `width`, and `height`. `x` and `y` are from the top-left corner of the ``. - To generate each bar, we need to start from the top-left corner, then work our way down to the bottom-right corner. - When setting `x`, we set it to the left edge with respect to `x_scale`. We add a `1` to offset it a little. - When setting `y`, however, we set it to what `y_scale` returns. This corresponds to the top of the bar. - `width` and `height` thus have to be calculated manually, with some offsetting on the `width` to prevent bar overlaps.3b:T780,// Do not modify // GRADING_HASH=penguins /* ================ === BEGIN TO-DO === ================ */ const penguins_svg = d3.create("svg") .attr("width", 800) .attr("height", 450); const penguins_mass = penguins.filter(d => Number.isFinite(d.body_mass_g) ); const penguins_x = d3.scaleLinear() .domain(d3.extent(penguins_mass, d => d.body_mass_g)) .range([60, 750]); const penguins_min = penguins_x.domain()[0]; const penguins_max = penguins_x.domain()[1]; const penguins_thresholds = d3.range(1, 20).map(i => penguins_min + i * (penguins_max - penguins_min) / 20 ); const penguins_histogram = d3.histogram() .value(d => d.body_mass_g) .domain(penguins_x.domain()) .thresholds(penguins_thresholds); const penguins_bins = penguins_histogram(penguins_mass); const penguins_y = d3.scaleLinear() .domain([0, d3.max(penguins_bins, d => d.length)]) .nice() .range([390, 50]); penguins_svg.append("g") .selectAll("rect") .data(penguins_bins) .enter() .append("rect") .attr("x", d => penguins_x(d.x0) + 1) .attr("y", d => penguins_y(d.length)) .attr("width", d => penguins_x(d.x1) - penguins_x(d.x0) - 1 ) .attr("height", d => 390 - penguins_y(d.length)) .attr("fill", "steelblue"); penguins_svg.append("g") .attr("transform", "translate(0,390)") .call(d3.axisBottom(penguins_x)); penguins_svg.append("g") .attr("transform", "translate(60,0)") .call(d3.axisLeft(penguins_y).ticks(8)); penguins_svg.append("text") .attr("x", 400) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Penguins' Body Mass"); penguins_svg.append("text") .attr("x", 405) .attr("y", 435) .attr("text-anchor", "middle") .text("Body Mass (g)"); penguins_svg.append("text") .attr("transform", "translate(18,220) rotate(-90)") .attr("text-anchor", "middle") .text("Counts"); /* ============== === END TO-DO === ============== */ 3c:T478,

[TO-DO]

Please implement a stacked histogram, saved as the variable penguins_multi_stacked, to demonstrate differences in penguins' body mass across the three separate species represented in the dataset: "Adelie", "Gentoo", and "Chinstrap". You'll later justify your design decisions in Part 2D, so here focus on the following:

Your histogram and its axes are titled so that viewers understand what your plots are about. (3%)
Your histogram uses effective colors and/or other design elements to clearly delineate between the different species. (5%)
Your histogram attempts to reduce any kind of bias in its representation, such as heavily skewed distributions. (1%)
The plot is clearly legible with no occluded, mistakenly placed, or otherwise out-of-place design choices. (1%)

Outside of these requirements, you are allowed to use whichever scales, number of bins, etc. as you wish.

Example Solutions

${await FileAttachment("e6-2b_stacked.png").image({width:500})}

3d:Tbff,// Do not modify // GRADING_HASH=penguins-multi-stacked /* ================ === BEGIN TO-DO === ================ */ const penguins_multi_stacked = d3.create("svg") .attr("width", 900) .attr("height", 450); const stacked_species = ["Adelie", "Gentoo", "Chinstrap"]; const stacked_data = penguins.filter(d => Number.isFinite(d.body_mass_g) ); const stacked_x = d3.scaleLinear() .domain(d3.extent(stacked_data, d => d.body_mass_g)) .range([60, 750]); const stacked_min = stacked_x.domain()[0]; const stacked_max = stacked_x.domain()[1]; const stacked_thresholds = d3.range(1, 20).map(i => stacked_min + i * (stacked_max - stacked_min) / 20 ); const stacked_histogram = d3.histogram() .value(d => d.body_mass_g) .domain(stacked_x.domain()) .thresholds(stacked_thresholds); const stacked_bins = stacked_histogram(stacked_data); const stacked_counts = stacked_bins.map(bin => ({ x0: bin.x0, x1: bin.x1, Adelie: bin.filter(d => d.species === "Adelie").length, Gentoo: bin.filter(d => d.species === "Gentoo").length, Chinstrap: bin.filter(d => d.species === "Chinstrap").length })); const stacked_series = d3.stack() .keys(stacked_species)(stacked_counts); const stacked_y = d3.scaleLinear() .domain([0, d3.max(stacked_bins, d => d.length)]) .nice() .range([390, 50]); const stacked_color = d3.scaleOrdinal() .domain(stacked_species) .range(["steelblue", "orange", "seagreen"]); const stacked_groups = penguins_multi_stacked.append("g") .selectAll("g") .data(stacked_series) .enter() .append("g") .attr("fill", d => stacked_color(d.key)); stacked_groups.selectAll("rect") .data(d => d) .enter() .append("rect") .attr("x", d => stacked_x(d.data.x0) + 1) .attr("y", d => stacked_y(d[1])) .attr("width", d => stacked_x(d.data.x1) - stacked_x(d.data.x0) - 1 ) .attr("height", d => stacked_y(d[0]) - stacked_y(d[1]) ); penguins_multi_stacked.append("g") .attr("transform", "translate(0,390)") .call(d3.axisBottom(stacked_x)); penguins_multi_stacked.append("g") .attr("transform", "translate(60,0)") .call(d3.axisLeft(stacked_y).ticks(8)); penguins_multi_stacked.append("text") .attr("x", 450) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Penguin Body Mass by Species (Stacked)"); penguins_multi_stacked.append("text") .attr("x", 405) .attr("y", 435) .attr("text-anchor", "middle") .text("Body Mass (g)"); penguins_multi_stacked.append("text") .attr("transform", "translate(18,220) rotate(-90)") .attr("text-anchor", "middle") .text("Counts"); const stacked_legend = penguins_multi_stacked.append("g") .selectAll("g") .data(stacked_species) .enter() .append("g") .attr("transform", (d, i) => `translate(775,${60 + i * 25})` ); stacked_legend.append("rect") .attr("width", 12) .attr("height", 12) .attr("fill", d => stacked_color(d)); stacked_legend.append("text") .attr("x", 20) .attr("y", 10) .attr("font-size", 12) .text(d => d); /* ============== === END TO-DO === ============== */ 3e:T47c,

[TO-DO]

Please implement a multi-layer histogram, saved as the variable penguins_multi_layered, to demonstrate differences in penguins' body mass across the three separate species represented in the dataset: "Adelie", "Gentoo", and "Chinstrap". You'll later justify your design decisions in Part 2D, so here focus on the following:

Your histogram and its axes are titled so that viewers understand what your plots are about. (3%)
Your histogram uses effective colors and/or other design elements to clearly delineate between the different species. (5%)
Your histogram attempts to reduce any kind of bias in its representation, such as heavily skewed distributions. (1%)
The plot is clearly legible with no occluded, mistakenly placed, or otherwise out-of-place design choices. (1%)

Outside of these requirements, you are allowed to use whichever scales, number of bins, etc. as you wish.

Example Solutions

${await FileAttachment("e6-2b_layered.png").image({width:500})}

3f:Taa7,// Do not modify // GRADING_HASH=penguins-multi-layered /* ================ === BEGIN TO-DO === ================ */ const penguins_multi_layered = d3.create("svg") .attr("width", 800) .attr("height", 450); const layered_species = ["Adelie", "Chinstrap", "Gentoo"]; const layered_data = penguins.filter(d => Number.isFinite(d.body_mass_g) ); const layered_x = d3.scaleLinear() .domain(d3.extent(layered_data, d => d.body_mass_g)) .range([60, 740]); const layered_histogram = d3.histogram() .value(d => d.body_mass_g) .domain(layered_x.domain()) .thresholds(d3.range(2800, 6300, 200)); const layered_bins = layered_species.map(species => ({ species: species, bins: layered_histogram( layered_data.filter(d => d.species === species) ) })); const layered_y = d3.scaleLinear() .domain([0, d3.max(layered_bins, d => d3.max(d.bins, bin => bin.length) )]) .range([390, 60]); const layered_color = d3.scaleOrdinal() .domain(layered_species) .range(["steelblue", "orange", "seagreen"]); const layered_groups = penguins_multi_layered.append("g") .selectAll("g") .data(layered_bins) .enter() .append("g") .attr("fill", d => layered_color(d.species)) .attr("fill-opacity", 0.5); layered_groups.selectAll("rect") .data(d => d.bins) .enter() .append("rect") .attr("x", d => layered_x(d.x0) + 0.5) .attr("y", d => layered_y(d.length)) .attr("width", d => layered_x(d.x1) - layered_x(d.x0) - 0.5 ) .attr("height", d => 390 - layered_y(d.length)); penguins_multi_layered.append("g") .attr("transform", "translate(0,390)") .call(d3.axisBottom(layered_x).ticks(7)); penguins_multi_layered.append("g") .attr("transform", "translate(60,0)") .call(d3.axisLeft(layered_y).ticks(14)); penguins_multi_layered.append("text") .attr("x", 400) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Penguin Body Mass by Species (Layered)"); penguins_multi_layered.append("text") .attr("x", 400) .attr("y", 435) .attr("text-anchor", "middle") .text("Body Mass (g)"); penguins_multi_layered.append("text") .attr("transform", "translate(18,225) rotate(-90)") .attr("text-anchor", "middle") .text("Counts"); const layered_legend = penguins_multi_layered.append("g") .selectAll("g") .data(layered_species) .enter() .append("g") .attr("transform", (d, i) => `translate(630,${70 + i * 22})` ); layered_legend.append("rect") .attr("width", 12) .attr("height", 12) .attr("fill", d => layered_color(d)) .attr("fill-opacity", 0.7); layered_legend.append("text") .attr("x", 20) .attr("y", 10) .attr("font-size", 12) .text(d => d); /* ============== === END TO-DO === ============== */ 40:T599,Pie charts are another common graphical chart used in data visualization. Despite this, there are several reasons why we don't necessarily recommend using pie charts. The primary reason is that, in general, **humans are relatively poor at comparing angles and areas.** This is especially true when compared against easier tasks such as comparing positions or lengths along a common scale. In short summary: 1. **Difficulty with comparing areas and angles**: Your typical bar chart or histogram makes it substantially easier to compare quantities than sections of a pie chart. 2. **Category Overload**: Pie charts quickly become unwieldy when you have a lot of bins and/or categories to compare against. However, that doesn't mean that pie charts are inherently a terrible design. Most importantly, **pie charts let you compare approximate proportions**. This means that pie charts are a quick and efficient way to communicate relative aspects of a data distribution, albeit sacrificing the precision that other plot types may offer. In this section, we will cover just the basic pie chart implementation and analyze whether these limitations of pie charts holds true here. The dataset we will be using is a familiar one we've used before: Vega-Lite's Movies Dataset.41:T56d,### Part 3A. Basic Pie Charts (15%) Pie charts have a rather simple D3.js implementation, just like with `d3.line()` and `d3.histogram()`. In this case, we have two functions: `d3.pie()`, and `d3.arc()`. ````js // Creating our `pie()` function, assuming that your data has a quantitative feature called `counts` let pie = d3.pie() .value(d => d.count); // `arcs` is the dataset generated using `pie()` let segments = pie(DATASET); // Define a radius for our pie chart let radius = 300; // Creating segments of our pie chart. Note the use of `d3.arc()` with the `d` attribute of paths svg.selectAll("path.arc") .data(segments) .enter() .append("path") .attr("class", "arc") .attr("d", d3.arc() .innerRadius(0) .outerRadius(radius) ) .attr('fill', (d) => color_scale(d.category) ) .attr("stroke", SOME COLOR) .style("stroke-width", SOME PIXEL VALUE) .style("opacity", SOME 0-1 VALUE); ```` The caveat here is that we need a dataset to simply map categories to quantitative values. Our `movies` dataset isn't really fit for that, so we need to perform some filtering and data processing prior to passing off the movie data to our pie chart. For this, D3.js offers some helpful functions such as `d3.rollups()`, which you can read more about here.42:T4cd,

[TO-DO]

Let's generate a simple pie chart, saved with the variable movies_svg, with the movies dataset we imported. We want our pie chart to demonstrate the count (number) of movies that fit under each movie category. We are looking particularly at the following:

Your pie chart is titled so that viewers understand what your chart is about. (1%)
Your pie chart uses effective colors and/or other design elements to clearly delineate between the different movie genres. (5%)
Your pie chart uses either a legend or other visual tricks to make it obvious which color maps to which movie genre, as well as what the actual count of each movie genre is. (5%)
Your pie chart uses the correct scale type to map quantitative values to categories. (3%)
The plot is clearly legible with no occluded, mistakenly placed, or otherwise out-of-place design choices. (1%)

Outside of these requirements, you are allowed to use whichever scales, pre-processing steps, etc. as you wish.

Example Solutions

${await FileAttachment("e6-3a.png").image({width:500})}

43:T737,// Do not modify // GRADING_HASH=movies-pie /* ================ === BEGIN TO-DO === ================ */ const movies_svg = d3.create("svg") .attr("width", 800) .attr("height", 520); const movies_data = (await movies).filter(d => d["Major Genre"] != null && d["Major Genre"] !== "" ); const movies_counts = d3.rollups( movies_data, values => values.length, d => d["Major Genre"] ) .map(([genre, count]) => ({genre, count})) .sort((a, b) => d3.descending(a.count, b.count)); const movies_color = d3.scaleOrdinal() .domain(movies_counts.map(d => d.genre)) .range([ "#4e79a7", "#f28e2b", "#e15759", "#76b7b2", "#59a14f", "#edc949", "#af7aa1", "#ff9da7", "#9c755f", "#bab0ab", "#b07d62", "#8c8c8c" ]); const movies_pie = d3.pie() .sort(null) .value(d => d.count); const movies_segments = movies_pie(movies_counts); const movies_arc = d3.arc() .innerRadius(0) .outerRadius(205); movies_svg.append("g") .attr("transform", "translate(245,285)") .selectAll("path") .data(movies_segments) .enter() .append("path") .attr("d", movies_arc) .attr("fill", d => movies_color(d.data.genre)) .attr("stroke", "white") .attr("stroke-width", 1); movies_svg.append("text") .attr("x", 400) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Number of Movies by Genre"); const movies_legend = movies_svg.append("g") .selectAll("g") .data(movies_counts) .enter() .append("g") .attr("transform", (d, i) => `translate(485,${90 + i * 32})` ); movies_legend.append("rect") .attr("width", 15) .attr("height", 15) .attr("fill", d => movies_color(d.genre)); movies_legend.append("text") .attr("x", 24) .attr("y", 12) .attr("font-size", 12) .text(d => `${d.genre} (${d.count})`); /* ============== === END TO-DO === ============== */ 44:[{"id":"9689d64204babc4dacf1b8405f56c0ff2d5e2fdf1e667d8121b866671986a432723a23cd0c1fdff27f47f26373252047f7321bbfb6c2a04ee27c56f55de94510","href":"https://static.observableusercontent.com/files/9689d64204babc4dacf1b8405f56c0ff2d5e2fdf1e667d8121b866671986a432723a23cd0c1fdff27f47f26373252047f7321bbfb6c2a04ee27c56f55de94510","name":"e6-1b.png","type":"image/png","lastModified":1791735463648,"size":54173},{"id":"ff6a9cbf53e9f3fe94c60fa42dce96d758c51939e2f0f51e7993871d895ad5cc4063cebf8518116f34375c75e2f6955fbbd0370931a6f0933ce96334d3ddfab7","href":"https://static.observableusercontent.com/files/ff6a9cbf53e9f3fe94c60fa42dce96d758c51939e2f0f51e7993871d895ad5cc4063cebf8518116f34375c75e2f6955fbbd0370931a6f0933ce96334d3ddfab7","name":"e6-2a.png","type":"image/png","lastModified":1791744467425,"size":16074},{"id":"cb56f394501140886079cccbd0d4962c305689044f128584ef06f673bfa20301a9e7dbfefc7ea84109c0fe95a9066e232d562a1f7cc2d28a7a946a9fb3e848f3","href":"https://static.observableusercontent.com/files/cb56f394501140886079cccbd0d4962c305689044f128584ef06f673bfa20301a9e7dbfefc7ea84109c0fe95a9066e232d562a1f7cc2d28a7a946a9fb3e848f3","name":"e6-2b_layered.png","type":"image/png","lastModified":1791751533576,"size":75454},{"id":"430328397638273ca248fd378bb6f9619c8c461226718a60e2907927637cd95e451d786b87095567adc2ee2a1b1657869fbbf72322d4d5739329dbcb1f640ced","href":"https://static.observableusercontent.com/files/430328397638273ca248fd378bb6f9619c8c461226718a60e2907927637cd95e451d786b87095567adc2ee2a1b1657869fbbf72322d4d5739329dbcb1f640ced","name":"e6-2b_stacked.png","type":"image/png","lastModified":1791749965157,"size":72014},{"id":"d07bbe4b820c7cdcb9ea5fcf1df0d66141f87db74f9073520c2289b7d5b89f91ae1d60a4630302ac0d5c4401e21b8a017d888956f75e521a5f2f20ff2cad0146","href":"https://static.observableusercontent.com/files/d07bbe4b820c7cdcb9ea5fcf1df0d66141f87db74f9073520c2289b7d5b89f91ae1d60a4630302ac0d5c4401e21b8a017d888956f75e521a5f2f20ff2cad0146","name":"e6-3a.png","type":"image/png","lastModified":1791755175181,"size":169790},{"id":"ef1053b80e60ecf7aaeec165f1f2a1a512c0fa864e90aa0d6d8e8c80e307ebc921ed12eae87144f76f13764c683a7e2c818502f6a287a5cfff9a93a501eb27e3","href":"https://static.observableusercontent.com/files/ef1053b80e60ecf7aaeec165f1f2a1a512c0fa864e90aa0d6d8e8c80e307ebc921ed12eae87144f76f13764c683a7e2c818502f6a287a5cfff9a93a501eb27e3","name":"movies.json","type":"application/json","lastModified":1791753409315,"size":1399981},{"id":"4fb6cfcbcff8bae31fce53bbb10f4becab74e2e554f54060fa8f463b9066a796429112dad8d1c606ad132f3cf7edf43ef0dff4083c479781acfad60d0cab0a0a","href":"https://static.observableusercontent.com/files/4fb6cfcbcff8bae31fce53bbb10f4becab74e2e554f54060fa8f463b9066a796429112dad8d1c606ad132f3cf7edf43ef0dff4083c479781acfad60d0cab0a0a","name":"penguins.csv","type":"text/csv","lastModified":1791739453676,"size":15241},{"id":"637dd065df783248caf012b6219aec446cad82c7be93d7edf3405c1be074a37aeefa71a25871d95d42d90b2bd35364de630bb07acb949bfcfaecfd2ec705b5f5","href":"https://static.observableusercontent.com/files/637dd065df783248caf012b6219aec446cad82c7be93d7edf3405c1be074a37aeefa71a25871d95d42d90b2bd35364de630bb07acb949bfcfaecfd2ec705b5f5","name":"e6-1a.png","type":"image/png","lastModified":1791788197285,"size":32662}] 31:{"id":"230579d9b493afe8","slug":"week-6-exercise-chart-types-review-due-oct-15","title":"Week 6 Exercise: Chart Types Review (Due Oct. 15)","thumbnail":"f136cb29512f18e21209faa7d43ad21d0be6905299933c355aa6345f8be92d27","access_level":"public","create_time":"$D2026-10-12T23:33:35.070Z","update_time":"$D2026-10-13T00:43:26.213Z","view_time":null,"first_public_time":"$D2026-10-13T00:44:06.261Z","has_unpublished_edits":null,"fork":{"id":"be657f190a1767e4","slug":"2026-infovis-cse_week-6-exercise","title":"Week 6 Exercise: Chart Types Review (Due Oct. 15)","owner":{"id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ec4f177fe289becd","login":"zz10677","name":"Zhiqi Zhao","avatar_url":null,"tier":"starter_2024","bio":""},"version":1572,"publish_version":1572,"role":null,"authored":false,"authors":[{"type":"individual","id":"ffa59d7ff73f730c","login":"zz10677","name":"Zhiqi Zhao","avatar_url":null,"tier":null,"bio":""}],"members":[{"type":"team","id":"ec4f177fe289becd","login":"zz10677","name":"Zhiqi Zhao","avatar_url":null,"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 6 Exercise: Chart Types Review (Due Oct. 15)","cells":[{"id":0,"value":"# Week 6 Exercise: Chart Types Review (Due Oct. 15)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":834,"value":"In this week's exercise, we will review how to generate the common chart types in D3 as a wrap-up. D3.js provides a summary of implementations via their own online documentation, and we're going to replicate some of those charts here for practice.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":744,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":749,"value":"---\n\n

[TO-DO]

Fill your name and NetID:

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":824,"value":"const student_name = \"Zhiqi Zhao\";\nconst student_netid = \"zz10677\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"---\n## Special Note About This Assignment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"---\n## Part 1. Line Plots (45%)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"Line charts are another common chart type, but one we didn't explore in D3.js yet. Unlike scatter plots, which solely focus on plotting points, line charts are typically used to demonstrate trends in time.\n\nThe dataset of choice for this part of the exercise is a Vega-Lite dataset pertaining to stocks: https://vega.github.io/vega-datasets/datasets/stocks/.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":844,"value":"const stocks_data = await d3.csv(\"https://cdn.jsdelivr.net/npm/vega-datasets@3/data/stocks.csv\", d => ({\n symbol: d.symbol,\n date: new Date(d.date),\n price: +d.price\n}));\ndisplay(Inputs.table(stocks_data, {layout:\"auto\"}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"

[NOTE]

Take note of how we processed the date feature. This uses one of JavaScripts in-built Object types. We'll cover this topic later, but if you are interested I recommend reading up about it: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"// An example dataset of 3 entries\nlet example_points = [\n {t:2.5, val:10},\n {t:5, val:12},\n {t:7.5, val:5}\n];\n\n// Generating an example chart that is 400px wide and 300px tall\nlet example_svg = d3.create(\"svg\")\n .attr(\"width\", 400)\n .attr(\"height\", 300);\n\n// To make this visualization stand out, I'm just plotting a border around the SVG\nexample_svg.append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", \"100%\")\n .attr(\"height\", \"100%\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 1)\n .attr(\"fill\", \"none\");\n\n// Definine our scales\nlet x = d3.scaleLinear()\n .domain([0,10])\n .range([0,400]);\nlet y = d3.scaleLinear()\n .domain([0,15])\n .range([300,0]);\n\n// Plot a single line\nexample_svg.append(\"path\")\n .datum(example_points)\n .attr(\"d\", d3.line()\n .x( item => x( item.t ) )\n .y( item => y( item.val ) )\n )\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#4A403E\")\n .attr(\"stroke-width\", 3);\n\n// Display above\ndisplay(example_svg.node())","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"About everything up to defining the `x` and `y` scales is on-par with what we explored before. In this example, since I'm just appending a single path, I don't need anything fancy such as `selectAll(\"path\")` or `.enter()`. Notice that on top of using `.datum(example_points)` and a `d` attribute, we also need to specify `stroke`, `stroke-width`, and `fill`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":847,"value":"// Do not modify\nconst msft_display = (msft_svg != null)\n ? msft_svg.attr(\"id\", \"single-line\").node()\n : html`The MSFT plot will generate here once you complete the code below.`;\ndisplay(msft_display);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"$37","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"### Part 1B. Multi-Line Charts (15%)\n\nThis time, we want to add multiple lines to our chart. In our line chart, each line represents a different stock symbol. Our job now is to plot how the stocks have changed over time.\n\nWhen it comes to generating multiple lines, rather than use `.datum(COLLECTION OF POINTS)`, we revert back to using `.data()`. However, we also need an additional step: to group the items into their respective bins. Then, when we render lines using our typical `.selectAll().data().enter().append()`, we refer to this grouped data instead of the raw `stocks_data`.\n\nFor this exercise, we highly recommend that you read how D3.js suggests you handle multi-line charts via their own documentation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"// Do not modify\nconst stocks_display = (stocks_svg != null)\n ? stocks_svg.attr(\"id\", \"multi-line\").node()\n : html`The multi-line plot will generate here once you complete the code below.`;\ndisplay(stocks_display);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"$39","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"### Part 1C. Mutli-Line Plot Write-up (5%)\n\n

[TO-DO]

Below, please write a short paragraph (around 2-5 sentences) that explains the design decisions of your chart in Part 1B and your own analysis of the plot you generated. Please explain:

Your design decisions (e.g. what colors did you use and why, how you designed the color legend and scales) and and why you think these decisions are optimal for your plot. (3%)
What kind of insights we can derive about stock price patterns across the years? Are there any companies that stand out? (2%)

[TO-DO]

Create a histogram that demonstrates the distribution of penguins' body mass. Your histogram, saved as the variable penguins_svg, must demonstrate the following qualities:

The histogram and its axes must be titled appropriately to let viewers understand what the chart is about. (3%)
The X-axis must represent the body_mass_g feature from the penguins dataset, binned into 20 bars. Meanwhile, the Y-axis must represent the number of penguins that fit within each bar. Both axes must be scaled appropriately to prevent skewing or uneven distributions. (6%)
The plot is clearly legible with no occluded, mistakenly placed, or otherwise out-of-place design choices. (1%)

Example Solution

\n ${await FileAttachment(\"e6-2a.png\").image({width:500})}\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":856,"value":"// Do not modify\nconst penguins_display = (penguins_svg != null)\n ? penguins_svg.attr(\"id\", \"penguins\").node()\n : html`The Penguins Body Mass histogram will generate here once you complete the code below.`;\ndisplay(penguins_display);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"$3b","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"### Part 2B. Stacked Histograms (10%)\n\nHistograms by themselves are pretty useful. This time, we'll focus on a variant of the histogram called the **Stacked Histograms**. In a stacked histogram, bars are divided length-wise using colors, shapes, or symbols to identify how different categories contribute to the distribution. See an implementation example by D3.js here.\n\nThis version requires you to perform some level of _grouping_ within your data, similar to what you had to do for the multi-line plot in Part 1B. How you group them is not the focus of this exercise though; we will focus more on your own implementations of this histogram variant.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"// Do not modify\nconst penguins_multi_stacked_display = (penguins_multi_stacked != null)\n ? penguins_multi_stacked.attr(\"id\", \"penguins-multi-stacked\").node()\n : html`The Stacked Penguins Body Mass histogram will generate here once you complete the code below.`;\ndisplay(penguins_multi_stacked_display);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"$3d","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"### Part 2C. Multi-Layered Histogram (10%)\n\nThere's another variant of histogram I like to call the **Multi-Layered Histograms**. Here, multiple distributions are shown alongside each other, either side-by-side or overlaid on top of each other, to demonstrate how different categories are distributed along the same data range. See an implementation example by D3.js here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"$3e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"// Do not modify\nconst penguins_multi_layered_display = (penguins_multi_layered != null)\n ? penguins_multi_layered.attr(\"id\", \"penguins-multi-layered\").node()\n : html`The layered Penguins Body Mass histogram will generate here once you complete the code below.`;\ndisplay(penguins_multi_layered_display);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"### Part 2D. Design Explanation (5%)\n\n

[TO-DO]

Below, please write a short paragraph (around 2-5 sentences) that explains the design decisions of your stacked and layered histograms in Parts 2B and 2C. Please explain:

For your histograms, your design decisions (e.g. what colors did you use and why, how you designed the color legend and scales) and and why you think these decisions are optimal for your plots. (3%)
Between the two histogram types, which works better and why. (2%)

[TO-DO]

Analyze your chart and design decisions around it. Answer the following in a short paragraph (2-5 sentences):

What does your pie chart do well? (1%)
What does your pie chart NOT do well? (1%)
Do you feel a different chart type would more effectively communicate movie genre counts? If you believe a different chart is better, what chart type would you use? If not, why is a pie chart more optimal here? (3%)

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":595,"value":"\n\n\n\n\nMy pie chart shows approximate proportions well, making it clear that Drama and Comedy have the most movies. The different colors and legend help identify each genre and its actual count.\n\nMy pie chart does not show small differences well because similar-sized slices are hard to compare. Small genres like Concert/Performance are also difficult to see.\n\nI think a horizontal bar chart would more effectively communicate movie genre counts because bar lengths are easier to compare than slice angles. It would also make the smaller genres and their differences easier to see.\n\n\n\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"---\n## Appendix\n\n

[NOTE]

Do not touch anything beyond this point.