3e:null 3f:["$","title",null,{"children":"Week 6 Exercise: Chart Types Review (Due Oct. 15) | Simranjeet Singh | Observable"}] 45: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.46: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. 47: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`:48: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})}

49:T849,// Do not modify // GRADING_HASH=single-line /* ================ === BEGIN TO-DO === ================ */ // --- 1. Subset: MSFT entries only (1%) --- const msft = stocks_data.filter(d => d.symbol === "MSFT"); // --- 2. The SVG: 800 x 450 total, 50px margin on all 4 sides (3%) --- const msft_w = 800; const msft_h = 450; const msft_margin = { top: 50, right: 50, bottom: 50, left: 50 }; const msft_svg = d3.create("svg") .attr("width", msft_w) .attr("height", msft_h); // --- 3. Scales --- // X: temporal, domain = extent of "date", range = full inner width (6%) const msft_x = d3.scaleTime() .domain(d3.extent(msft, d => d.date)) .range([msft_margin.left, msft_w - msft_margin.right]); // Y: linear, domain = 0 -> max price, range = full inner height (6%) const msft_y = d3.scaleLinear() .domain([0, d3.max(msft, d => d.price)]) .range([msft_h - msft_margin.bottom, msft_margin.top]); // --- 4. Axes --- msft_svg.append("g") .attr("transform", `translate(0, ${msft_h - msft_margin.bottom})`) .call(d3.axisBottom(msft_x)); msft_svg.append("g") .attr("transform", `translate(${msft_margin.left}, 0)`) .call(d3.axisLeft(msft_y)); // --- 5. Axis titles --- msft_svg.append("text") .attr("x", msft_w / 2) .attr("y", msft_h - 12) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Years"); msft_svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -msft_h / 2) .attr("y", 16) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Stock Prices"); // --- 6. The single line: one , .datum(), #002FFF, 2px (5%) --- msft_svg.append("path") .datum(msft) .attr("d", d3.line() .x(d => msft_x(d.date)) .y(d => msft_y(d.price)) ) .attr("fill", "none") .attr("stroke", "#002FFF") .attr("stroke-width", 2); // --- 7. Chart title: centered at half width, y = 25 (4%) --- msft_svg.append("text") .attr("x", msft_w / 2) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Microsoft Stock Prices"); display(msft_svg.node()); /* ============== === END TO-DO === ============== */ 4a: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})}

4b:Tcb9,// Do not modify // GRADING_HASH=multi-line /* ================ === BEGIN TO-DO === ================ */ const stocks_w = 900; const stocks_h = 500; const stocks_margin = { top: 60, right: 110, bottom: 60, left: 70 }; const stocks_svg = d3.create("svg") .attr("width", stocks_w) .attr("height", stocks_h); // --- Group the flat dataset into one entry per symbol --- // d3.group returns a Map: "MSFT" => [ {...}, {...}, ... ] // Iterating it yields [key, values] pairs, which is exactly what .data() wants. const stocks_grouped = d3.group(stocks_data, d => d.symbol); const stocks_symbols = Array.from(stocks_grouped.keys()); // --- Scales --- const stocks_x = d3.scaleTime() .domain(d3.extent(stocks_data, d => d.date)) .range([stocks_margin.left, stocks_w - stocks_margin.right]); const stocks_y = d3.scaleLinear() .domain([0, d3.max(stocks_data, d => d.price)]) .nice() .range([stocks_h - stocks_margin.bottom, stocks_margin.top]); const stocks_color = d3.scaleOrdinal() .domain(stocks_symbols) .range(d3.schemeTableau10); // --- Axes --- stocks_svg.append("g") .attr("transform", `translate(0, ${stocks_h - stocks_margin.bottom})`) .call(d3.axisBottom(stocks_x)); stocks_svg.append("g") .attr("transform", `translate(${stocks_margin.left}, 0)`) .call(d3.axisLeft(stocks_y)); stocks_svg.append("text") .attr("x", (stocks_margin.left + stocks_w - stocks_margin.right) / 2) .attr("y", stocks_h - 16) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Years"); stocks_svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -stocks_h / 2) .attr("y", 18) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Stock Prices (USD)"); // --- Chart title --- stocks_svg.append("text") .attr("x", stocks_w / 2) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", 18) .attr("font-weight", "bold") .text("Stock Prices by Company, 2000-2010"); // --- One shared line generator --- const stocks_line = d3.line() .x(d => stocks_x(d.date)) .y(d => stocks_y(d.price)); // --- 5 lines via selectAll().data().enter().append() (6%) --- stocks_svg.append("g") .selectAll("path") .data(stocks_grouped) // each datum is [symbol, entries] .enter() .append("path") .attr("fill", "none") .attr("stroke", d => stocks_color(d[0])) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", d => stocks_line(d[1])); // --- Color legend, placed in the right margin so nothing is occluded (3%) --- const stocks_legend = stocks_svg.append("g") .attr("transform", `translate(${stocks_w - stocks_margin.right + 20}, ${stocks_margin.top})`); const stocks_legend_rows = stocks_legend.selectAll("g") .data(stocks_symbols) .enter() .append("g") .attr("transform", (d, i) => `translate(0, ${i * 22})`); stocks_legend_rows.append("line") .attr("x1", 0).attr("x2", 22) .attr("y1", 0).attr("y2", 0) .attr("stroke", d => stocks_color(d)) .attr("stroke-width", 3); stocks_legend_rows.append("text") .attr("x", 30) .attr("y", 4) .attr("font-size", 12) .text(d => d); display(stocks_svg.node()); /* ============== === END TO-DO === ============== */ 4c:T6bf, # Used AI for write up I sized the chart at 900×500 with a widened right margin so the legend could sit entirely outside the plotting area; placing it over the lines would have occluded Google's peak around 2007. For color I used D3's schemeTableau10 ordinal scheme, which is designed for categorical data and keeps the five companies distinguishable for most forms of color-vision deficiency a sequential or single-hue scheme would have falsely implied an ordering among the symbols. The x-axis uses scaleTime so that Google's 2004 IPO appears at its true position rather than being stretched to the left edge, and the y-axis starts at zero so that the differences in absolute share price are not visually exaggerated. The plot shows that absolute price levels say more about share structure than about company performance: Google enters in 2004 and immediately dominates the vertical space, climbing from roughly $100 to around $700 by late 2007, while Microsoft stays essentially flat in the $20–$35 band for the whole decade. Apple is the clearest growth story in shape rather than magnitude, rising steadily from under $10 in 2003 to over $200 by 2010. The most striking shared feature is the 2008–2009 financial crisis, where every line turns down simultaneously Google loses more than half its value followed by a broad recovery through 2010. One caveat worth noting is that comparing raw prices across companies is misleading; a normalized or log-scaled y-axis would show relative returns more honestly, though it would obscure the actual dollar values the assignment asks us to plot. 4d: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.4e:Taeb,// Do not modify // GRADING_HASH=penguins /* ================ === BEGIN TO-DO === ================ */ // --- Clean: drop rows with missing body mass --- const p2a_mass = (d) => { const v = d.body_mass_g; return (v === null || v === "" || v === "NA") ? NaN : +v; }; const p2a_data = penguins.filter(d => Number.isFinite(p2a_mass(d))); // --- Canvas --- const p2a_w = 800; const p2a_h = 450; const p2a_m = { top: 50, right: 40, bottom: 60, left: 65 }; const penguins_svg = d3.create("svg") .attr("width", p2a_w) .attr("height", p2a_h); // --- X scale over the full body-mass range --- const p2a_extent = d3.extent(p2a_data, p2a_mass); const p2a_x = d3.scaleLinear() .domain(p2a_extent) .range([p2a_m.left, p2a_w - p2a_m.right]); // --- Exactly 20 equal-width bins --- // .thresholds(20) is only a *hint* - D3 rounds to "nice" tick values and you // often get 18 or 22 bins. Passing an explicit array of 19 interior cut points // guarantees 20 bins of identical width, which is also what keeps the bars // from skewing the distribution. const p2a_nbins = 20; const p2a_thresholds = d3.range(1, p2a_nbins).map( i => p2a_extent[0] + (p2a_extent[1] - p2a_extent[0]) * i / p2a_nbins ); const p2a_bins = d3.bin() .value(p2a_mass) .domain(p2a_x.domain()) .thresholds(p2a_thresholds)(p2a_data); // --- Y scale: counts per bin, anchored at 0 --- const p2a_y = d3.scaleLinear() .domain([0, d3.max(p2a_bins, b => b.length)]) .nice() .range([p2a_h - p2a_m.bottom, p2a_m.top]); // --- Axes --- penguins_svg.append("g") .attr("transform", `translate(0, ${p2a_h - p2a_m.bottom})`) .call(d3.axisBottom(p2a_x).ticks(10).tickFormat(d3.format(","))); penguins_svg.append("g") .attr("transform", `translate(${p2a_m.left}, 0)`) .call(d3.axisLeft(p2a_y)); // --- Bars --- penguins_svg.append("g") .selectAll("rect") .data(p2a_bins) .enter() .append("rect") .attr("x", d => p2a_x(d.x0) + 1) .attr("y", d => p2a_y(d.length)) .attr("width", d => Math.max(0, p2a_x(d.x1) - p2a_x(d.x0) - 1)) .attr("height", d => p2a_y(0) - p2a_y(d.length)) .attr("fill", "#4C78A8"); // --- Titles --- penguins_svg.append("text") .attr("x", p2a_w / 2) .attr("y", 28) .attr("text-anchor", "middle") .attr("font-size", 17) .attr("font-weight", "bold") .text("Penguin's Body Mass"); penguins_svg.append("text") .attr("x", (p2a_m.left + p2a_w - p2a_m.right) / 2) .attr("y", p2a_h - 16) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Body Mass (g)"); penguins_svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -p2a_h / 2) .attr("y", 18) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Counts"); display(penguins_svg.node()); /* ============== === END TO-DO === ============== */ 4f: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})}

50:Tf89,// Do not modify // GRADING_HASH=penguins-multi-stacked /* ================ === BEGIN TO-DO === ================ */ const p2b_mass = (d) => { const v = d.body_mass_g; return (v === null || v === "" || v === "NA") ? NaN : +v; }; const p2b_data = penguins.filter(d => Number.isFinite(p2b_mass(d))); const p2b_w = 860; const p2b_h = 470; const p2b_m = { top: 55, right: 150, bottom: 60, left: 65 }; const penguins_multi_stacked = d3.create("svg") .attr("width", p2b_w) .attr("height", p2b_h); const p2b_species = ["Adelie", "Chinstrap", "Gentoo"]; // Okabe-Ito colorblind-safe palette const p2b_color = d3.scaleOrdinal() .domain(p2b_species) .range(["#0072B2", "#E69F00", "#009E73"]); // --- Shared X scale + shared bin edges (critical: every species must be // binned on the SAME cut points or the stacks won't line up) --- const p2b_extent = d3.extent(p2b_data, p2b_mass); const p2b_x = d3.scaleLinear() .domain(p2b_extent) .range([p2b_m.left, p2b_w - p2b_m.right]); const p2b_nbins = 20; const p2b_thresholds = d3.range(1, p2b_nbins).map( i => p2b_extent[0] + (p2b_extent[1] - p2b_extent[0]) * i / p2b_nbins ); const p2b_allBins = d3.bin() .value(p2b_mass) .domain(p2b_x.domain()) .thresholds(p2b_thresholds)(p2b_data); // --- Reshape into one row per bin: {x0, x1, Adelie, Chinstrap, Gentoo} --- const p2b_table = p2b_allBins.map(b => { const row = { x0: b.x0, x1: b.x1 }; for (const s of p2b_species) { row[s] = b.filter(d => d.species === s).length; } return row; }); // --- d3.stack turns that into cumulative [y0, y1] pairs per species --- const p2b_stacked = d3.stack().keys(p2b_species)(p2b_table); const p2b_y = d3.scaleLinear() .domain([0, d3.max(p2b_table, r => d3.sum(p2b_species, s => r[s]))]) .nice() .range([p2b_h - p2b_m.bottom, p2b_m.top]); // --- Axes --- penguins_multi_stacked.append("g") .attr("transform", `translate(0, ${p2b_h - p2b_m.bottom})`) .call(d3.axisBottom(p2b_x).ticks(10).tickFormat(d3.format(","))); penguins_multi_stacked.append("g") .attr("transform", `translate(${p2b_m.left}, 0)`) .call(d3.axisLeft(p2b_y)); // --- Stacked bars: outer group per species, inner rect per bin --- penguins_multi_stacked.append("g") .selectAll("g") .data(p2b_stacked) .enter() .append("g") .attr("fill", d => p2b_color(d.key)) .selectAll("rect") .data(d => d) // each d is [y0, y1] with a .data backref .enter() .append("rect") .attr("x", d => p2b_x(d.data.x0) + 1) .attr("y", d => p2b_y(d[1])) .attr("width", d => Math.max(0, p2b_x(d.data.x1) - p2b_x(d.data.x0) - 1)) .attr("height", d => Math.max(0, p2b_y(d[0]) - p2b_y(d[1]))); // --- Titles --- penguins_multi_stacked.append("text") .attr("x", p2b_w / 2) .attr("y", 28) .attr("text-anchor", "middle") .attr("font-size", 17) .attr("font-weight", "bold") .text("Penguin Body Mass by Species (Stacked)"); penguins_multi_stacked.append("text") .attr("x", (p2b_m.left + p2b_w - p2b_m.right) / 2) .attr("y", p2b_h - 16) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Body Mass (g)"); penguins_multi_stacked.append("text") .attr("transform", "rotate(-90)") .attr("x", -p2b_h / 2) .attr("y", 18) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Counts"); // --- Legend, parked in the right margin so it can never cover a bar --- const p2b_legend = penguins_multi_stacked.append("g") .attr("transform", `translate(${p2b_w - p2b_m.right + 25}, ${p2b_m.top + 10})`); const p2b_rows = p2b_legend.selectAll("g") .data(p2b_species) .enter() .append("g") .attr("transform", (d, i) => `translate(0, ${i * 24})`); p2b_rows.append("rect") .attr("width", 14).attr("height", 14) .attr("fill", d => p2b_color(d)); p2b_rows.append("text") .attr("x", 22).attr("y", 12) .attr("font-size", 13) .text(d => d); display(penguins_multi_stacked.node()); /* ============== === END TO-DO === ============== */ 51: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})}

52:Tf20,// Do not modify // GRADING_HASH=penguins-multi-layered /* ================ === BEGIN TO-DO === ================ */ const p2c_mass = (d) => { const v = d.body_mass_g; return (v === null || v === "" || v === "NA") ? NaN : +v; }; const p2c_data = penguins.filter(d => Number.isFinite(p2c_mass(d))); const p2c_w = 860; const p2c_h = 470; const p2c_m = { top: 55, right: 150, bottom: 60, left: 65 }; const penguins_multi_layered = d3.create("svg") .attr("width", p2c_w) .attr("height", p2c_h); const p2c_species = ["Adelie", "Chinstrap", "Gentoo"]; const p2c_color = d3.scaleOrdinal() .domain(p2c_species) .range(["#0072B2", "#E69F00", "#009E73"]); // --- Shared X scale and shared bin edges across all three species --- const p2c_extent = d3.extent(p2c_data, p2c_mass); const p2c_x = d3.scaleLinear() .domain(p2c_extent) .range([p2c_m.left, p2c_w - p2c_m.right]); const p2c_nbins = 20; const p2c_thresholds = d3.range(1, p2c_nbins).map( i => p2c_extent[0] + (p2c_extent[1] - p2c_extent[0]) * i / p2c_nbins ); const p2c_binner = d3.bin() .value(p2c_mass) .domain(p2c_x.domain()) .thresholds(p2c_thresholds); // --- Bin each species separately, on those shared edges --- const p2c_layers = p2c_species.map(s => ({ species: s, bins: p2c_binner(p2c_data.filter(d => d.species === s)) })); // --- Y: tallest single-species bar, NOT the stacked total --- const p2c_y = d3.scaleLinear() .domain([0, d3.max(p2c_layers, L => d3.max(L.bins, b => b.length))]) .nice() .range([p2c_h - p2c_m.bottom, p2c_m.top]); // --- Axes --- penguins_multi_layered.append("g") .attr("transform", `translate(0, ${p2c_h - p2c_m.bottom})`) .call(d3.axisBottom(p2c_x).ticks(10).tickFormat(d3.format(","))); penguins_multi_layered.append("g") .attr("transform", `translate(${p2c_m.left}, 0)`) .call(d3.axisLeft(p2c_y)); // --- Overlaid bars: every layer starts from the same zero baseline, with // partial transparency + a solid outline so overlaps stay readable --- penguins_multi_layered.append("g") .selectAll("g") .data(p2c_layers) .enter() .append("g") .attr("fill", d => p2c_color(d.species)) .attr("stroke", d => p2c_color(d.species)) .attr("fill-opacity", 0.5) .attr("stroke-width", 1) .selectAll("rect") .data(d => d.bins) .enter() .append("rect") .attr("x", d => p2c_x(d.x0) + 1) .attr("y", d => p2c_y(d.length)) .attr("width", d => Math.max(0, p2c_x(d.x1) - p2c_x(d.x0) - 1)) .attr("height", d => p2c_y(0) - p2c_y(d.length)); // --- Titles --- penguins_multi_layered.append("text") .attr("x", p2c_w / 2) .attr("y", 28) .attr("text-anchor", "middle") .attr("font-size", 17) .attr("font-weight", "bold") .text("Penguin Body Mass by Species (Layered)"); penguins_multi_layered.append("text") .attr("x", (p2c_m.left + p2c_w - p2c_m.right) / 2) .attr("y", p2c_h - 16) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Body Mass (g)"); penguins_multi_layered.append("text") .attr("transform", "rotate(-90)") .attr("x", -p2c_h / 2) .attr("y", 18) .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Counts"); // --- Legend (swatches drawn at the same opacity as the bars) --- const p2c_legend = penguins_multi_layered.append("g") .attr("transform", `translate(${p2c_w - p2c_m.right + 25}, ${p2c_m.top + 10})`); const p2c_rows = p2c_legend.selectAll("g") .data(p2c_species) .enter() .append("g") .attr("transform", (d, i) => `translate(0, ${i * 24})`); p2c_rows.append("rect") .attr("width", 14).attr("height", 14) .attr("fill", d => p2c_color(d)) .attr("stroke", d => p2c_color(d)) .attr("fill-opacity", 0.5); p2c_rows.append("text") .attr("x", 22).attr("y", 12) .attr("font-size", 13) .text(d => d); display(penguins_multi_layered.node()); /* ============== === END TO-DO === ============== */ 53:T7b5, # Used AI for write up All three histograms share a common design spine: 20 equal-width bins computed from an explicit array of cut points rather than D3's .thresholds(20) hint, a shared x-domain across species, and a y-axis anchored at zero. Those choices exist to remove bias unequal bin widths would misrepresent density, and binning each species on its own extent would make the bars incomparable between layers. For color I used the Okabe-Ito palette (blue / orange / green), which stays distinguishable under deuteranopia and protanopia; the legend sits in the right margin rather than floating inside the plot so it cannot occlude a bar, and in the layered chart the legend swatches carry the same 50% fill opacity as the bars so the key matches what's actually on screen. Between the two variants, the layered histogram is the more honest view of this particular question. A stacked histogram encodes the combined distribution well and makes it easy to read the total count in any mass range, but only the bottom series sits on a flat baseline Chinstrap and Gentoo float on a shifting floor, so comparing their shapes means mentally subtracting the layers beneath them. The layered version starts every species at zero, which immediately exposes the structure that matters here: Adelie and Chinstrap overlap almost completely between 3,000 and 4,500 g, while Gentoo sits in a nearly disjoint band above 4,500 g. The cost is occlusion in the region where the distributions overlap, which the transparency and outlines only partly solve. One caveat worth flagging is that both charts plot raw counts while the groups are unequal in size (roughly 152 Adelie, 124 Gentoo, 68 Chinstrap), so Chinstrap looks less prominent than its distribution warrants; normalizing to density would fix that at the cost of losing the actual sample sizes. 54: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.55: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.56: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})}

57:T104b,// Do not modify // GRADING_HASH=movies-pie /* ================ === BEGIN TO-DO === ================ */ // --- Drop movies with no recorded genre --- const p3_clean = movies.filter( d => d["Major Genre"] !== null && d["Major Genre"] !== undefined && d["Major Genre"] !== "" ); // --- Roll the raw rows up into one {genre, count} record per genre --- // d3.rollups returns [[key, value], ...]; mapping it to named fields keeps the // rest of the code readable. const p3_counts = d3.rollups(p3_clean, v => v.length, d => d["Major Genre"]) .map(([genre, count]) => ({ genre, count })) .sort((a, b) => d3.descending(a.count, b.count)); const p3_total = d3.sum(p3_counts, d => d.count); // --- Canvas --- const p3_w = 920; const p3_h = 580; const p3_r = 210; // pie radius const p3_cx = 280; // pie center, left half of the canvas const p3_cy = 320; const movies_svg = d3.create("svg") .attr("width", p3_w) .attr("height", p3_h); // --- Ordinal scale: categories -> colors --- // schemePaired is a 12-class qualitative ColorBrewer scheme, which exactly // covers the 12 genres. Tableau10 would have run out after 10 and silently // recycled colors, giving two genres the same fill. const p3_color = d3.scaleOrdinal() .domain(p3_counts.map(d => d.genre)) .range(d3.schemePaired); // --- Pie layout + arc generator --- // .sort(null) preserves the descending order already applied above, so slices // run largest-to-smallest clockwise instead of being re-sorted internally. const p3_pie = d3.pie() .value(d => d.count) .sort(null); const p3_segments = p3_pie(p3_counts); const p3_arc = d3.arc() .innerRadius(0) .outerRadius(p3_r); // A slightly larger arc used only to position the percentage labels const p3_labelArc = d3.arc() .innerRadius(p3_r * 0.62) .outerRadius(p3_r * 0.62); // --- Slices --- movies_svg.append("g") .attr("transform", `translate(${p3_cx}, ${p3_cy})`) .selectAll("path") .data(p3_segments) .enter() .append("path") .attr("d", p3_arc) .attr("fill", d => p3_color(d.data.genre)) .attr("stroke", "#ffffff") .style("stroke-width", 1.5); // --- Percentage labels, but ONLY on slices with room for them --- // Anything under 5% produces a wedge too narrow to hold legible text; those // genres are read off the legend instead. movies_svg.append("g") .attr("transform", `translate(${p3_cx}, ${p3_cy})`) .selectAll("text") .data(p3_segments.filter(d => (d.endAngle - d.startAngle) > 0.05 * 2 * Math.PI)) .enter() .append("text") .attr("transform", d => `translate(${p3_labelArc.centroid(d)})`) .attr("text-anchor", "middle") .attr("dy", "0.35em") .attr("font-size", 12) .attr("font-weight", "bold") .attr("fill", "#ffffff") .text(d => d3.format(".0%")(d.data.count / p3_total)); // --- Title --- movies_svg.append("text") .attr("x", p3_w / 2) .attr("y", 34) .attr("text-anchor", "middle") .attr("font-size", 18) .attr("font-weight", "bold") .text("Number of Movies by Genre"); // --- Legend: carries the genre name AND the raw count, which is the only // place the exact numbers appear (5% of the grade asks for both) --- const p3_legend = movies_svg.append("g") .attr("transform", `translate(${p3_cx + p3_r + 70}, ${p3_cy - (p3_counts.length * 24) / 2})`); const p3_rows = p3_legend.selectAll("g") .data(p3_counts) .enter() .append("g") .attr("transform", (d, i) => `translate(0, ${i * 24})`); p3_rows.append("rect") .attr("width", 14) .attr("height", 14) .attr("fill", d => p3_color(d.genre)); p3_rows.append("text") .attr("x", 22) .attr("y", 12) .attr("font-size", 13) .text(d => `${d.genre} (${d.count.toLocaleString()})`); // --- Footnote on excluded rows: an honest chart says what it left out --- movies_svg.append("text") .attr("x", p3_w / 2) .attr("y", p3_h - 14) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("fill", "#666") .text(`n = ${p3_total.toLocaleString()} movies with a recorded genre (${(movies.length - p3_total).toLocaleString()} excluded)`); display(movies_svg.node()); /* ============== === END TO-DO === ============== */ 58:T767, # Used AI for write up My pie chart does one thing well: it communicates that the movie industry in this dataset is dominated by two genres, with Drama (789) and Comedy (675) together taking up roughly half the circle, and it lets a viewer see that proportion instantly without reading a single number. Where it fails is everything below the top four. Twelve categories is well past the point where a pie stays readable Western (36), Black Comedy (36), and Documentary (43) produce wedges of about four degrees that are visually indistinguishable from one another, and Concert/Performance (5) is a sliver under one degree. I had to compensate by printing percentages only on slices above 5% and pushing the exact counts into the legend, which is itself an admission that the encoding isn't carrying the information: if viewers have to read a table beside the chart to answer basic questions, the chart has been reduced to decoration. I think a horizontal bar chart sorted descending would communicate genre counts more effectively here. Cleveland and McGill's work on graphical perception ranks position along a common scale above angle and area for judgment accuracy, and the practical difference is obvious in this dataset: on a bar chart the gap between Documentary and Western is a clearly visible difference in bar length, while on the pie it is two near-identical slivers. Horizontal bars also solve the label problem for free, since genre names like "Thriller/Suspense" sit comfortably at the end of each bar instead of needing a separate legend. The pie would be the better choice only if the question were "what share of all films are dramas?"a part-to-whole question about two or three categories, which is the narrow case pie charts are actually good at. 59:[{"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}] 43:{"id":"38584fa63d5af744","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-14T17:55:35.747Z","update_time":"$D2026-10-15T12:14:16.113Z","view_time":null,"first_public_time":"$D2026-10-15T12:17:32.063Z","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":"228f91e0b55c41b6","login":"simranjeet-singh","name":"Simranjeet Singh","avatar_url":"https://avatars-next.observableusercontent.com/d58a259fbae2a8ccfde0f1b92afaafbaccb5706e866e3ac06b91e01a0db4142b","tier":"starter_2024","bio":""},"version":1569,"publish_version":1569,"role":null,"authored":false,"authors":[{"type":"individual","id":"eab21e992bb35bff","login":"simranjeet-singh","name":"Simranjeet Singh","avatar_url":"https://avatars-next.observableusercontent.com/d58a259fbae2a8ccfde0f1b92afaafbaccb5706e866e3ac06b91e01a0db4142b","tier":null,"bio":""}],"members":[{"type":"team","id":"228f91e0b55c41b6","login":"simranjeet-singh","name":"Simranjeet Singh","avatar_url":"https://avatars-next.observableusercontent.com/d58a259fbae2a8ccfde0f1b92afaafbaccb5706e866e3ac06b91e01a0db4142b","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":"$45","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 = \"Simranjeet Singh\";\nconst student_netid = \"xs2797\";","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":"$46","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":"$47","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":"$48","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":"$49","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":"$4a","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":"$4b","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":"$4e","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":"$4f","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":"$50","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":"$51","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":"$52","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%)

[NOTE]

Do not touch anything beyond this point.