3e:null 3f:["$","title",null,{"children":"Week 6 Exercise: Chart Types Review (Due Oct. 15) | Mitran Ramesh kumar | 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:T665,// Do not modify // GRADING_HASH=single-line /* ================ === BEGIN TO-DO === ================ */ // Keep only MSFT rows const msft = stocks_data.filter(d => d.symbol === "MSFT"); // Margin and inner chart size const msft_margin = 50; const msft_w = 800 - 2 * msft_margin; const msft_h = 450 - 2 * msft_margin; const msft_svg = d3.create("svg") .attr("width", 800) .attr("height", 450); // Inner group shifted by margin const msft_chart = msft_svg.append("g") .attr("transform", `translate(${msft_margin},${msft_margin})`); // Time scale for x const msft_x = d3.scaleTime() .domain(d3.extent(msft, d => d.date)).nice() .range([0, msft_w]); // Linear scale for y const msft_y = d3.scaleLinear() .domain([0, d3.max(msft, d => d.price)]).nice() .range([msft_h, 0]); msft_chart.append("g") .attr("transform", `translate(0,${msft_h})`) .call(d3.axisBottom(msft_x)); msft_chart.append("g").call(d3.axisLeft(msft_y)); msft_chart.append("path") .datum(msft) .attr("fill", "none") .attr("stroke", "#002FFF") .attr("stroke-width", 2) .attr("d", d3.line().x(d => msft_x(d.date)).y(d => msft_y(d.price))); msft_svg.append("text") .attr("x", 400).attr("y", 25) .attr("text-anchor", "middle") .style("font-weight", "bold") .text("Microsoft Stock Price"); msft_chart.append("text") .attr("x", msft_w / 2).attr("y", msft_h + 40) .attr("text-anchor", "middle") .text("Year"); msft_chart.append("text") .attr("transform", "rotate(-90)") .attr("x", -msft_h / 2).attr("y", -38) .attr("text-anchor", "middle") .text("Price (USD)"); /* ============== === 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:T971,// Do not modify // GRADING_HASH=multi-line /* ================ === BEGIN TO-DO === ================ */ const stocks_svg = d3.create("svg").attr("width", 800).attr("height", 450); // Margins and inner chart size const st_m = {top: 50, right: 130, bottom: 50, left: 60}; const st_w = 800 - st_m.left - st_m.right; const st_h = 450 - st_m.top - st_m.bottom; // Group rows by symbol const st_groups = Array.from(d3.group(stocks_data, d => d.symbol), ([symbol, values]) => ({symbol, values})); // One color per symbol const st_color = d3.scaleOrdinal() .domain(st_groups.map(d => d.symbol)) .range(d3.schemeCategory10); // Time scale x const st_x = d3.scaleTime().domain(d3.extent(stocks_data, d => d.date)).range([0, st_w]); // Linear scal y const st_y = d3.scaleLinear().domain([0, d3.max(stocks_data, d => d.price)]).nice().range([st_h, 0]); // Inner group shifted by margin const st_chart = stocks_svg.append("g").attr("transform", `translate(${st_m.left},${st_m.top})`); st_chart.append("g").attr("transform", `translate(0,${st_h})`).call(d3.axisBottom(st_x)); st_chart.append("g").call(d3.axisLeft(st_y)); // Line generator for prices const st_line = d3.line().x(d => st_x(d.date)).y(d => st_y(d.price)); // One path per symbol st_chart.selectAll("path.stock-line") .data(st_groups) .enter() .append("path") .attr("class", "stock-line") .attr("fill", "none") .attr("stroke", d => st_color(d.symbol)) .attr("stroke-width", 2) .attr("d", d => st_line(d.values)); const st_legend = stocks_svg.append("g") .attr("transform", `translate(${st_m.left + st_w + 20},${st_m.top})`); st_groups.forEach((g, i) => { const row = st_legend.append("g").attr("transform", `translate(0,${i * 22})`); row.append("rect").attr("width", 14).attr("height", 14).attr("fill", st_color(g.symbol)); row.append("text").attr("x", 20).attr("y", 12).style("font-size", "13px").text(g.symbol); }); stocks_svg.append("text") .attr("x", 400).attr("y", 25) .attr("text-anchor", "middle") .style("font-weight", "bold") .text("Stock Prices by company"); st_chart.append("text") .attr("x", st_w / 2).attr("y", st_h + 40) .attr("text-anchor", "middle") .text("Years"); st_chart.append("text") .attr("transform", "rotate(-90)") .attr("x", -st_h / 2).attr("y", -45) .attr("text-anchor", "middle") .text("Stock Prices"); /* ============== === END TO-DO === ============== */ 4c: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.4d:T6db,// Do not modify // GRADING_HASH=penguins /* ================ === BEGIN TO-DO === ================ */ const pg = penguins.filter(d => typeof d.body_mass_g === "number"); // Margins const pg_m = {top: 50, right: 130, bottom: 55, left: 65}; const pg_w = 800 - pg_m.left - pg_m.right, pg_h = 450 - pg_m.top - pg_m.bottom; // Linear x-scale - mass const pg_x = d3.scaleLinear().domain(d3.extent(pg, d => d.body_mass_g)).range([0, pg_w]); const pg_bins = d3.histogram().value(d => d.body_mass_g) .domain(pg_x.domain()).thresholds(pg_x.ticks(20))(pg); // Linear y-scale for counts const pg_y = d3.scaleLinear().domain([0, d3.max(pg_bins, d => d.length)]).range([pg_h, 0]).nice(); const penguins_svg = d3.create("svg").attr("width", 800).attr("height", 450); const pg_chart = penguins_svg.append("g").attr("transform", `translate(${pg_m.left},${pg_m.top})`); pg_chart.append("g").attr("transform", `translate(0,${pg_h})`).call(d3.axisBottom(pg_x)); pg_chart.append("g").call(d3.axisLeft(pg_y)); // One bar per bin pg_chart.selectAll("rect").data(pg_bins).enter().append("rect") .attr("x", d => pg_x(d.x0) + 1).attr("y", d => pg_y(d.length)) .attr("width", d => pg_x(d.x1) - pg_x(d.x0) - 1) .attr("height", d => pg_h - pg_y(d.length)) .attr("fill", "#4682B4"); penguins_svg.append("text").attr("x", 400).attr("y", 25).attr("text-anchor", "middle") .style("font-weight", "bold").text("Penguin's Body Mass"); penguins_svg.append("text").attr("x", pg_m.left + pg_w / 2).attr("y", 445) .attr("text-anchor", "middle").text("Body Mass (g)"); penguins_svg.append("text").attr("transform", `translate(18,${pg_m.top + pg_h / 2}) rotate(-90)`) .attr("text-anchor", "middle").text("Counts"); /* ============== === END TO-DO === ============== */ 4e: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})}

4f:T8a5,// Do not modify // GRADING_HASH=penguins-multi-stacked /* ================ === BEGIN TO-DO === ================ */ const pg_species = ["Adelie", "Gentoo", "Chinstrap"]; const pg_color = d3.scaleOrdinal().domain(pg_species).range(["#4682B4", "#FFA500", "#2E8B57"]); // Species counts per bin const pg_series = d3.stack().keys(pg_species)(pg_bins.map(b => ({ x0: b.x0, x1: b.x1, ...Object.fromEntries(pg_species.map(s => [s, b.filter(d => d.species === s).length])) }))); // Linear y-scale for totals const stk_y = d3.scaleLinear().domain([0, d3.max(pg_series.at(-1), d => d[1])]).range([pg_h, 0]).nice(); const penguins_multi_stacked = d3.create("svg").attr("width", 800).attr("height", 450); const stk_chart = penguins_multi_stacked.append("g").attr("transform", `translate(${pg_m.left},${pg_m.top})`); stk_chart.append("g").attr("transform", `translate(0,${pg_h})`).call(d3.axisBottom(pg_x)); stk_chart.append("g").call(d3.axisLeft(stk_y)); // One colored layer per species stk_chart.selectAll("g.layer").data(pg_series).enter().append("g") .attr("class", "layer").attr("fill", d => pg_color(d.key)) .selectAll("rect").data(d => d).enter().append("rect") .attr("x", d => pg_x(d.data.x0) + 1).attr("y", d => stk_y(d[1])) .attr("width", d => pg_x(d.data.x1) - pg_x(d.data.x0) - 1) .attr("height", d => stk_y(d[0]) - stk_y(d[1])); pg_species.forEach((s, i) => { penguins_multi_stacked.append("rect").attr("x", pg_m.left + pg_w + 20).attr("y", pg_m.top + i * 22) .attr("width", 14).attr("height", 14).attr("fill", pg_color(s)); penguins_multi_stacked.append("text").attr("x", pg_m.left + pg_w + 40).attr("y", pg_m.top + i * 22 + 12).text(s); }); penguins_multi_stacked.append("text").attr("x", 400).attr("y", 25).attr("text-anchor", "middle") .style("font-weight", "bold").text("Penguin Body Mass by Species (Stacked)"); penguins_multi_stacked.append("text").attr("x", pg_m.left + pg_w / 2).attr("y", 445) .attr("text-anchor", "middle").text("Body Mass (g)"); penguins_multi_stacked.append("text").attr("transform", `translate(18,${pg_m.top + pg_h / 2}) rotate(-90)`) .attr("text-anchor", "middle").text("Counts"); /* ============== === END TO-DO === ============== */ 50: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})}

51:T8fb,// Do not modify // GRADING_HASH=penguins-multi-layered /* ================ === BEGIN TO-DO === ================ */ const lay_species = ["Adelie", "Chinstrap", "Gentoo"]; const lay_color = d3.scaleOrdinal().domain(lay_species).range(["#4682B4", "#FFA500", "#2E8B57"]); // Bins for each species const pg_layers = lay_species.map(s => ({ species: s, bins: d3.histogram().value(d => d.body_mass_g).domain(pg_x.domain()) .thresholds(pg_x.ticks(20))(pg.filter(d => d.species === s)) })); // Linear y-scale for counts const lay_y = d3.scaleLinear().domain([0, d3.max(pg_layers, l => d3.max(l.bins, b => b.length))]).range([pg_h, 0]).nice(); const penguins_multi_layered = d3.create("svg").attr("width", 800).attr("height", 450); const lay_chart = penguins_multi_layered.append("g").attr("transform", `translate(${pg_m.left},${pg_m.top})`); lay_chart.append("g").attr("transform", `translate(0,${pg_h})`).call(d3.axisBottom(pg_x)); lay_chart.append("g").call(d3.axisLeft(lay_y)); // Overlapping translucent layers lay_chart.selectAll("g.layer").data(pg_layers).enter().append("g") .attr("class", "layer").attr("fill", d => lay_color(d.species)).attr("fill-opacity", 0.6) .selectAll("rect").data(d => d.bins).enter().append("rect") .attr("x", d => pg_x(d.x0) + 1).attr("y", d => lay_y(d.length)) .attr("width", d => pg_x(d.x1) - pg_x(d.x0) - 1) .attr("height", d => pg_h - lay_y(d.length)); lay_species.forEach((s, i) => { penguins_multi_layered.append("rect").attr("x", pg_m.left + pg_w + 20).attr("y", pg_m.top + i * 22) .attr("width", 14).attr("height", 14).attr("fill", lay_color(s)).attr("fill-opacity", 0.6); penguins_multi_layered.append("text").attr("x", pg_m.left + pg_w + 40).attr("y", pg_m.top + i * 22 + 12).text(s); }); penguins_multi_layered.append("text").attr("x", 400).attr("y", 25).attr("text-anchor", "middle") .style("font-weight", "bold").text("Penguin Body Mass by Species (Layered)"); penguins_multi_layered.append("text").attr("x", pg_m.left + pg_w / 2).attr("y", 445) .attr("text-anchor", "middle").text("Body Mass (g)"); penguins_multi_layered.append("text").attr("transform", `translate(18,${pg_m.top + pg_h / 2}) rotate(-90)`) .attr("text-anchor", "middle").text("Counts"); /* ============== === END TO-DO === ============== */ 52:T494, 1. I used three different colors (blue, orange, and green) to make it easy to identify each species. I placed the legend on the right so it doesn't overlap the charts. Both charts use the same x-scale and bins for a fair comparison. In the layered chart, I used 60% opacity so the overlapping bars are still visible. The y-axis starts at 0. The orange and green colors are switched between the two charts to match the given examples. 2. I think the layered histogram is better for comparing the species because all the bars start from 0. We can easily see that Gentoo penguins are mostly between 4,500 and 6,000 g, while Adelie and Chinstrap are mostly between 3,000 and 4,000 g. The stacked histogram is useful for seeing the total number of penguins in each bin, but it's harder to compare individual species since the bars are stacked on top of each other. Used AI in 2B to understand how d3.stack() works with the histogram bins. I learned I had to count each species per bin first, then pass those counts to d3.stack().keys(species). 53: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.54: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.55: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})}

56:T5a1,// 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(([genre, count]) => ({genre, count})) .sort((a, b) => b.count - a.count); // Ordinal color per genre const mv_color = d3.scaleOrdinal().domain(mv_counts.map(d => d.genre)) .range(d3.schemeTableau10.concat(["#bab0ac", "#d7b5a6"])); const mv_segments = d3.pie().value(d => d.count).sort(null)(mv_counts); const movies_svg = d3.create("svg").attr("width", 800).attr("height", 450); // One slice per genre movies_svg.append("g").attr("transform", "translate(220,235)") .selectAll("path.arc").data(mv_segments).enter().append("path") .attr("class", "arc") .attr("d", d3.arc().innerRadius(0).outerRadius(150)) .attr("fill", d => mv_color(d.data.genre)) .attr("stroke", "white") .style("stroke-width", "1.5px"); mv_counts.forEach((d, i) => { movies_svg.append("rect").attr("x", 450).attr("y", 70 + i * 25) .attr("width", 14).attr("height", 14).attr("fill", mv_color(d.genre)); movies_svg.append("text").attr("x", 472).attr("y", 82 + i * 25) .text(`${d.genre} (${d.count})`); }); movies_svg.append("text").attr("x", 400).attr("y", 28).attr("text-anchor", "middle") .style("font-weight", "bold").text("Number of Movies by Genre"); /* ============== === END TO-DO === ============== */ 57:T430, 1. The pie chart makes it easy to see how much each genre contributes to the total number of movies. 2. We can see that Drama and Comedy together make up about half of the movies. The legend also shows the exact count for each genre. 3. Some genres like Documentary, Western, Black Comedy, and Concert/Performance have very small slices, so it's hard to compare them. 4. Western and Black Comedy both have 36 movies, but it's difficult to tell that just by looking at the pie chart. Also, matching all 12 colors with the legend takes some effort. 5. I think a horizontal bar chart sorted by count would be better because it's easier to compare bar lengths than pie slices. We can also show the genre names directly next to the bars, making even the smaller genres easy to read. Used AI in 3A to understand how to count movies per genre with d3.rollups(). It also helped me with d3.pie() and d3.arc(), which turn the counts into slices. 58:[{"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":"c4fd10aeb7ae7982","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-15T18:29:03.676Z","update_time":"$D2026-10-15T19:46:18.678Z","view_time":null,"first_public_time":"$D2026-10-15T19:35:32.976Z","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":"992958b3c9c14128","login":"mitranrameshkumar","name":"Mitran Ramesh kumar","avatar_url":null,"tier":"starter_2024","bio":""},"version":1588,"publish_version":1588,"role":null,"authored":false,"authors":[{"type":"individual","id":"ed38ba31ccd0f13a","login":"mitranrameshkumar","name":"Mitran Ramesh kumar","avatar_url":null,"tier":null,"bio":""}],"members":[{"type":"team","id":"992958b3c9c14128","login":"mitranrameshkumar","name":"Mitran Ramesh kumar","avatar_url":null,"tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Week 6 Exercise: Chart Types Review (Due Oct. 15)","cells":[{"id":0,"value":"# Week 6 Exercise: Chart Types Review (Due Oct. 15)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":834,"value":"In this week's exercise, we will review how to generate the common chart types in D3 as a wrap-up. D3.js provides a summary of implementations via their own online documentation, and we're going to replicate some of those charts here for practice.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":744,"value":"$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 = \"Mitran Ramesh kumar\";\nconst student_netid = \"MR8237\";","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":"$4d","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":"$4e","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":"$4f","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":"$50","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":"$51","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.