3e:null 3f:["$","title",null,{"children":"Week 6 Exercise: Chart Types Review (Due Oct. 15) | Dheeraj Pakala | 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:T57f,// Do not modify // GRADING_HASH=single-line /* ================ === BEGIN TO-DO === ================ */ const msft = stocks_data.filter(d => d.symbol === "MSFT"); const msft_svg = d3.create("svg") .attr("width", 800) .attr("height", 450); // Scales (50px margin on every side) const msft_x = d3.scaleTime() .domain(d3.extent(msft, d => d.date)) .range([50, 750]); const msft_y = d3.scaleLinear() .domain([0, d3.max(msft, d => d.price)]) .range([400, 50]); // Axes msft_svg.append("g") .attr("transform", "translate(0,400)") .call(d3.axisBottom(msft_x)); msft_svg.append("g") .attr("transform", "translate(50,0)") .call(d3.axisLeft(msft_y)); // Axis titles 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"); // The line 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); // Chart title msft_svg.append("text") .attr("x", 400) .attr("y", 25) .attr("text-anchor", "middle") .style("font-size", "18px") .style("font-weight", "bold") .text("Microsoft Stock Prices"); /* ============== === 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:T994,// Do not modify // GRADING_HASH=multi-line /* ================ === BEGIN TO-DO === ================ */ // Group the data by symbol -> [[symbol, rows], ...] const stk_grouped = d3.groups(stocks_data, d => d.symbol); const stk_symbols = stk_grouped.map(d => d[0]); const stocks_svg = d3.create("svg") .attr("width", 800) .attr("height", 450); // Scales: time on x, linear on y (exact max, no .nice()) const stk_x = d3.scaleTime() .domain(d3.extent(stocks_data, d => d.date)) .range([50, 650]); const stk_y = d3.scaleLinear() .domain([0, d3.max(stocks_data, d => d.price)]) .range([375, 50]); // Ordinal scale: company -> color const stk_color = d3.scaleOrdinal() .domain(stk_symbols) .range(d3.schemeTableau10); // Axes (y ticks every 50) stocks_svg.append("g") .attr("transform", "translate(0,375)") .call(d3.axisBottom(stk_x)); stocks_svg.append("g") .attr("transform", "translate(50,0)") .call(d3.axisLeft(stk_y).tickValues(d3.range(0, 701, 50))); // Line generator const stk_line = d3.line() .x(item => stk_x(item.date)) .y(item => stk_y(item.price)); // One per company using selectAll().data().enter().append() stocks_svg.selectAll("path.stock-line") .data(stk_grouped) .enter() .append("path") .attr("class", "stock-line") .attr("d", d => stk_line(d[1])) .attr("fill", "none") .attr("stroke", d => stk_color(d[0])) .attr("stroke-width", 2); // Legend: short line keys + labels const stk_legend = stocks_svg.append("g") .attr("transform", "translate(665, 45)"); const stk_items = stk_legend.selectAll("g") .data(stk_symbols) .enter() .append("g") .attr("transform", (d, i) => `translate(0, ${i * 25})`); stk_items.append("line") .attr("x1", 0).attr("x2", 20) .attr("y1", 5).attr("y2", 5) .attr("stroke", d => stk_color(d)) .attr("stroke-width", 2); stk_items.append("text") .attr("x", 28).attr("y", 9) .attr("font-size", 11) .text(d => d); // Titles stocks_svg.append("text") .attr("x", 400).attr("y", 22) .attr("text-anchor", "middle") .attr("font-weight", "bold").attr("font-size", 16) .text("Stock Prices by Company"); stocks_svg.append("text") .attr("x", 350).attr("y", 412) .attr("text-anchor", "middle") .text("Years"); stocks_svg.append("text") .attr("transform", "translate(14, 212) rotate(-90)") .attr("text-anchor", "middle") .text("Stock Prices"); /* ============== === END TO-DO === ============== */ 4c:T41e, I used D3's Tableau10 categorical palette through an ordinal color scale, because its colors are distinct and easy to tell apart, so each company's line can be identified quickly. The legend sits to the right of the plot so it never covers any lines, and each entry uses a short line in the same color and thickness as the data line it labels. Both axes use shared scales (time on the x-axis, linear from 0 on the y-axis), so all five companies are directly comparable and no line is distorted. The chart shows that GOOG clearly stands out: it enters in 2004 and climbs far above every other stock, peaking near $700 in late 2007 and then dropping sharply during the 2008-2009 financial crisis. AAPL grows steadily from 2005 onward, while IBM, AMZN and MSFT stay in a much lower range, with MSFT staying nearly flat at about $20-30 for the whole decade. Nearly every stock dips around 2008-2009, which reflects the market crash. 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:T75a,// Do not modify // GRADING_HASH=penguins /* ================ === BEGIN TO-DO === ================ */ // Remove rows where body mass is "NA" const pg_data = penguins.filter(d => Number.isFinite(d.body_mass_g)); const penguins_svg = d3.create("svg") .attr("width", 800) .attr("height", 400); // X scale: exact data extent, inside a 50px margin const pg_x = d3.scaleLinear() .domain(d3.extent(pg_data, d => d.body_mass_g)) .range([50, 750]); // Histogram: thresholds at the scale's "nice" tick values (~20 bins) const pg_histogram = d3.histogram() .value(d => d.body_mass_g) .domain(pg_x.domain()) .thresholds(pg_x.ticks(20)); const pg_bins = pg_histogram(pg_data); // Y scale: counts const pg_y = d3.scaleLinear() .domain([0, d3.max(pg_bins, d => d.length)]) .range([350, 50]); // Axes penguins_svg.append("g") .attr("transform", "translate(0,350)") .call(d3.axisBottom(pg_x).tickFormat(d3.format(","))); penguins_svg.append("g") .attr("transform", "translate(50,0)") .call(d3.axisLeft(pg_y)); // Bars (white outline separates them) penguins_svg.selectAll("rect") .data(pg_bins) .enter() .append("rect") .attr("x", d => pg_x(d.x0)) .attr("y", d => pg_y(d.length)) .attr("width", d => pg_x(d.x1) - pg_x(d.x0)) .attr("height", d => 350 - pg_y(d.length)) .attr("fill", "steelblue") .attr("stroke", "white"); // Titles penguins_svg.append("text") .attr("x", 400).attr("y", 25) .attr("text-anchor", "middle") .attr("font-weight", "bold").attr("font-size", 16) .text("Penguin's Body Mass"); penguins_svg.append("text") .attr("x", 400).attr("y", 387) .attr("text-anchor", "middle") .text("Body Mass (g)"); penguins_svg.append("text") .attr("transform", "translate(14, 200) rotate(-90)") .attr("text-anchor", "middle") .text("Counts"); /* ============== === 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:Tc6e,// Do not modify // GRADING_HASH=penguins-multi-stacked /* ================ === BEGIN TO-DO === ================ */ // Stack order matches the expected image: Adelie (bottom), Gentoo, Chinstrap (top) const st_species = ["Adelie", "Gentoo", "Chinstrap"]; const st_data = penguins.filter(d => Number.isFinite(d.body_mass_g)); const penguins_multi_stacked = d3.create("svg") .attr("width", 800) .attr("height", 450); // X scale: exact data extent, inside a 50px margin const st_x = d3.scaleLinear() .domain(d3.extent(st_data, d => d.body_mass_g)) .range([50, 750]); // Shared bins for all species (thresholds at the scale's tick values) const st_histogram = d3.histogram() .value(d => d.body_mass_g) .domain(st_x.domain()) .thresholds(st_x.ticks(20)); // One row per bin with a count for each species const st_rows = st_histogram(st_data).map(bin => { const row = {x0: bin.x0, x1: bin.x1}; st_species.forEach(s => row[s] = bin.filter(d => d.species === s).length); return row; }); const st_stacked = d3.stack().keys(st_species)(st_rows); // Y scale: the tallest stacked total const st_y = d3.scaleLinear() .domain([0, d3.max(st_stacked[st_stacked.length - 1], d => d[1])]) .range([400, 50]); // Color scale (ordinal: categories -> colors) const st_color = d3.scaleOrdinal() .domain(st_species) .range(["steelblue", "orange", "seagreen"]); // Axes penguins_multi_stacked.append("g") .attr("transform", "translate(0,400)") .call(d3.axisBottom(st_x).tickFormat(d3.format(","))); penguins_multi_stacked.append("g") .attr("transform", "translate(50,0)") .call(d3.axisLeft(st_y)); // Stacked bars: one per species, one per bin penguins_multi_stacked.selectAll("g.layer") .data(st_stacked) .enter() .append("g") .attr("class", "layer") .attr("fill", d => st_color(d.key)) .selectAll("rect") .data(d => d) .enter() .append("rect") .attr("x", d => st_x(d.data.x0)) .attr("y", d => st_y(d[1])) .attr("width", d => st_x(d.data.x1) - st_x(d.data.x0)) .attr("height", d => st_y(d[0]) - st_y(d[1])) .attr("stroke", "white"); // Legend (top right, inside the plot area) const st_legend = penguins_multi_stacked.append("g") .attr("transform", "translate(650, 60)"); const st_items = st_legend.selectAll("g") .data(st_species) .enter() .append("g") .attr("transform", (d, i) => `translate(0, ${i * 20})`); st_items.append("rect") .attr("width", 14).attr("height", 14) .attr("fill", d => st_color(d)); st_items.append("text") .attr("x", 20).attr("y", 12) .attr("font-size", 12) .text(d => d); // Titles penguins_multi_stacked.append("text") .attr("x", 400).attr("y", 25) .attr("text-anchor", "middle") .attr("font-weight", "bold").attr("font-size", 16) .text("Penguin Body Mass by Species (Stacked)"); penguins_multi_stacked.append("text") .attr("x", 400).attr("y", 438) .attr("text-anchor", "middle") .text("Body Mass (g)"); penguins_multi_stacked.append("text") .attr("transform", "translate(14, 225) rotate(-90)") .attr("text-anchor", "middle") .text("Counts"); /* ============== === 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:Tc1a,// Do not modify // GRADING_HASH=penguins-multi-layered /* ================ === BEGIN TO-DO === ================ */ // Order matches the expected image: Adelie, Chinstrap, Gentoo (Gentoo drawn on top) const ly_species = ["Adelie", "Chinstrap", "Gentoo"]; const ly_data = penguins.filter(d => Number.isFinite(d.body_mass_g)); const penguins_multi_layered =d3.create("svg") .attr("width", 800) .attr("height", 450); // X scale: exact data extent, inside a 50px margin const ly_x = d3.scaleLinear() .domain(d3.extent(ly_data, d => d.body_mass_g)) .range([50, 750]); // Same bins for every species (thresholds at the scale's tick values) const ly_histogram = d3.histogram() .value(d => d.body_mass_g) .domain(ly_x.domain()) .thresholds(ly_x.ticks(20)); // One set of bins per species const ly_layers = ly_species.map(s => ({ species: s, bins: ly_histogram(ly_data.filter(d => d.species === s)) })); // Y scale: the tallest single bin of any species const ly_y = d3.scaleLinear() .domain([0, d3.max(ly_layers, l => d3.max(l.bins, b => b.length))]) .range([400, 50]); // Color scale (ordinal: categories -> colors) const ly_color = d3.scaleOrdinal() .domain(ly_species) .range(["steelblue", "orange", "seagreen"]); // Axes penguins_multi_layered.append("g") .attr("transform", "translate(0,400)") .call(d3.axisBottom(ly_x).tickFormat(d3.format(","))); penguins_multi_layered.append("g") .attr("transform", "translate(50,0)") .call(d3.axisLeft(ly_y).ticks(14)); // Overlapping semi-transparent bars penguins_multi_layered.selectAll("g.layer") .data(ly_layers) .enter() .append("g") .attr("class", "layer") .attr("fill", d => ly_color(d.species)) .attr("fill-opacity", 0.5) .selectAll("rect") .data(d => d.bins) .enter() .append("rect") .attr("x", d => ly_x(d.x0)) .attr("y", d => ly_y(d.length)) .attr("width", d => ly_x(d.x1) - ly_x(d.x0)) .attr("height", d => 400 - ly_y(d.length)) .attr("stroke", "white"); // Legend (top right, inside the plot area) const ly_legend = penguins_multi_layered.append("g") .attr("transform", "translate(650, 60)"); const ly_items = ly_legend.selectAll("g") .data(ly_species) .enter() .append("g") .attr("transform", (d, i) => `translate(0, ${i * 20})`); ly_items.append("rect") .attr("width", 14).attr("height", 14) .attr("fill", d => ly_color(d)) .attr("fill-opacity", 0.7); ly_items.append("text") .attr("x", 20).attr("y", 12) .attr("font-size", 12) .text(d => d); // Titles penguins_multi_layered.append("text") .attr("x", 400).attr("y", 25) .attr("text-anchor", "middle") .attr("font-weight", "bold").attr("font-size", 16) .text("Penguin Body Mass by Species (Layered)"); penguins_multi_layered.append("text") .attr("x", 400).attr("y", 438) .attr("text-anchor", "middle") .text("Body Mass (g)"); penguins_multi_layered.append("text") .attr("transform", "translate(14, 225) rotate(-90)") .attr("text-anchor", "middle") .text("Counts"); /* ============== === END TO-DO === ============== */ 53:T4cb, I used steelblue for Adelie in both charts and a categorical orange/green pair for Gentoo and Chinstrap (Gentoo orange and Chinstrap green in the stacked chart, swapped in the layered chart). I picked these because they are distinct from one another and easy to tell apart, and I used an ordinal color scale since species are categories. Both charts share the same x-scale, the same 200 g bins on round values, and a legend placed in the empty top-right corner so it never covers the bars. In the layered chart I used semi-transparent bars with white outlines so overlapping species stay visible, and its y-axis is scaled to the tallest single bin rather than a stacked total. The layered histogram works better, because every species sits on the same baseline, so you can compare their shapes directly: Gentoo is clearly heavier (about 4,500-6,300 g) while Adelie and Chinstrap overlap heavily at 3,000-4,500 g. In the stacked chart only the bottom species (Adelie) shares a baseline, so Gentoo and Chinstrap are hard to compare, and the combined silhouette hides each species' own distribution. 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:T7d6,// Do not modify // GRADING_HASH=movies-pie /* ================ === BEGIN TO-DO === ================ */ const mv_counts = d3.rollups( movies.filter(d => d["Major Genre"]), v => v.length, d => d["Major Genre"] ) .map(([category, count]) => ({category, count})) .sort((a, b) => b.count - a.count); // Ordinal scale: genre -> distinct color (22 colors, so none repeat) const mv_color = d3.scaleOrdinal() .domain(mv_counts.map(d => d.category)) .range([...d3.schemeTableau10, ...d3.schemeSet3]); const movies_svg = d3.create("svg") .attr("width", 850) .attr("height", 560); // Pie layout: keep the sorted order, start at 12 o'clock, go clockwise const mv_pie = d3.pie() .value(d => d.count) .sort(null); const mv_segments = mv_pie(mv_counts); const mv_radius = 220; // Pie on the left const mv_g = movies_svg.append("g") .attr("transform", "translate(260, 300)"); mv_g.selectAll("path.arc") .data(mv_segments) .enter() .append("path") .attr("class", "arc") .attr("d", d3.arc() .innerRadius(0) .outerRadius(mv_radius) ) .attr("fill", d => mv_color(d.data.category)) .attr("stroke", "white") .style("stroke-width", "1.5px") .style("opacity", 1); // Legend: color key + "Genre (count)" const mv_legend = movies_svg.append("g") .attr("transform", "translate(515, 80)"); const mv_items = mv_legend.selectAll("g") .data(mv_counts) .enter() .append("g") .attr("transform", (d, i) => `translate(0, ${i * 36})`); mv_items.append("rect") .attr("width", 16).attr("height", 16) .attr("fill", d => mv_color(d.category)); mv_items.append("text") .attr("x", 25).attr("y", 13) .attr("font-size", 13) .text(d => `${d.category} (${d.count})`); // Title movies_svg.append("text") .attr("x", 425).attr("y", 30) .attr("text-anchor", "middle") .attr("font-weight", "bold").attr("font-size", 18) .text("Number of Movies by Genre"); /* ============== === END TO-DO === ============== */ 58:[{"id":"9689d64204babc4dacf1b8405f56c0ff2d5e2fdf1e667d8121b866671986a432723a23cd0c1fdff27f47f26373252047f7321bbfb6c2a04ee27c56f55de94510","href":"https://static.observableusercontent.com/files/9689d64204babc4dacf1b8405f56c0ff2d5e2fdf1e667d8121b866671986a432723a23cd0c1fdff27f47f26373252047f7321bbfb6c2a04ee27c56f55de94510","name":"e6-1b.png","type":"image/png","lastModified":1791735463648,"size":54173},{"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":"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":"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":"93c16b0dd2ea0055","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-15T19:18:10.527Z","update_time":"$D2026-10-15T22:26:11.221Z","view_time":null,"first_public_time":"$D2026-10-15T21:30:37.969Z","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":"c7b9449253b32926","login":"dheeraj-pakala","name":"Dheeraj Pakala","avatar_url":"https://avatars-next.observableusercontent.com/8d828baefb1c8f578c6814fc98231b6688ce51e026b42e3d63d6d00b7bd91c68","tier":"starter_2024","bio":""},"version":1608,"publish_version":1608,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c5b74a2ca519b75","login":"dheeraj-pakala","name":"Dheeraj Pakala","avatar_url":"https://avatars-next.observableusercontent.com/8d828baefb1c8f578c6814fc98231b6688ce51e026b42e3d63d6d00b7bd91c68","tier":null,"bio":""}],"members":[{"type":"team","id":"c7b9449253b32926","login":"dheeraj-pakala","name":"Dheeraj Pakala","avatar_url":"https://avatars-next.observableusercontent.com/8d828baefb1c8f578c6814fc98231b6688ce51e026b42e3d63d6d00b7bd91c68","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"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 = \"dheeraj pakala\";\nconst student_netid = \"dp4086\";","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%)

","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 does a good job of showing the overall composition at a glance: Drama and Comedy clearly take up the largest shares, and the legend with counts, such as Drama (789), gives exact values that the slices alone could not. It does not work well for the many small genres, because slices like Western (36), Black Comedy (36) and Concert/Performance (5) are thin slivers that are hard to compare, and with 12 categories the reader has to keep looking back and forth between the legend and the chart to match colors. I think a horizontal bar chart, sorted by count, would communicate genre counts more effectively. Bars share a common baseline, so people can compare lengths much more accurately than angles and areas, small differences between genres stay visible, and the genre names can sit right next to the bars with no color legend needed.\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.