2b:null 2c:["$","title",null,{"children":"Introduction to D3: Course Assignment | 🪦 dis-2025-fall | Observable"}] 31:T440,### Certificate The D3 course **assignment is due by October 20th**! Once you have completed your assignment, use the **[form linked here](https://forms.gle/8ri7VVziyBn6Feyd8)** to submit. Once we have received your submission, we'll review it and give you feedback. Also, since we've gotten some questions about pro vs. free user accounts: you do not need a pro account to complete and submit the assignment. We do need you to make the notebook visible to us, though, so check your [Sharing permissions](https://observablehq.com/@observablehq/sharing?collection=@observablehq/editing-publishing-collaborating) before submission. If you're a free user, the default sharing is public, so shouldn't have to do anything. ### Videos and course materials If you missed any of the lectures, you can watch (or re-watch) all the lesson recordings here. All of the course materials can be found in this collection.32:T1c3f,{ const filtered = barley.filter(d => d.year === year); const keys = Array.from(new Set(filtered.map(d => d.site))); const stackedData = Array.from( d3.group(filtered, d => d.variety), ([variety, values]) => { const entry = { name: variety }; for (const k of keys) { const match = values.find(d => d.site === k); entry[k] = match ? match.yield : 0; } return entry; } ); const stackLayout = d3.stack().keys(keys)(stackedData); const width = 900; const height = 300; const marginTop = 60; const marginRight = 150; const marginBottom = 60; const marginLeft = 60; const x = d3.scaleBand() .domain(stackedData.map(d => d.name)) .range([0, width]) .padding(0.2); const y = d3.scaleLinear() .domain([0, d3.max(stackLayout, d => d3.max(d, d => d[1]))]) .nice() .range([height, 0]); const color = d3.scaleOrdinal() .domain(keys) .range(d3.schemeSpectral[keys.length] || d3.schemeCategory10); const svg = d3.create("svg") .attr("width", width + marginLeft + marginRight) .attr("height", height + marginTop + marginBottom); const g = svg.append("g") .attr("transform", `translate(${marginLeft},${marginTop})`); // Hover const tooltip = DOM.element("div"); tooltip.style.position = "absolute"; tooltip.style.padding = "6px 10px"; tooltip.style.background = "rgba(0,0,0,0.7)"; tooltip.style.color = "white"; tooltip.style.borderRadius = "4px"; tooltip.style.fontSize = "12px"; tooltip.style.pointerEvents = "none"; tooltip.style.visibility = "hidden"; document.body.appendChild(tooltip); //from here const series = g.append("g") // appends a new SVG group .selectAll(".bucket") // creates an empty selection that will hold a group for each layer .data(stackLayout) // binds the array stackLayout to that selection, loops through that array and binds each layer (each site) to 1 group, stackLayout is an array of layers, there is 1 layer per site, each item in the layer looks like [y0,y1,data] and corresponds to a variety // [ // [ [y0,y1,data], [y0,y1,data], ... ], // layer for site 1 // [ [y0,y1,data], [y0,y1,data], ... ], // layer for site 2 // [ ... ] // more layers // ] .join("g") // for each layer (site) in stackLayout, create a new group .attr("class", "bucket") // names each group .attr("fill", (d,i) => color(keys[i])); // assign each layer (site) its own color, sets a fill color for the whole group, d is the layer array, i is the layer index series.selectAll("rect") // inside each group, make an empty selection of rectangles .data(d => d) // d is 1 layer from stackLayout (an array), loops over all the segments in that layer and binds 1 piece of data to each rectangle, each item of the layer looks like [y0,y1,data] // y0 = start height of segment, where the segment begins (top of previous segments), 0 if it’s the bottom-most segment // y1 = end height of segment, y1 = y0 + segment height, segment height = y(d[0]) - y(d[1]) // data = the corresponding variety .join("rect") // for each segment in layer (site), create a rectangle // now set the rectangle attributes .attr("x", d => x(d.data.name)) // d.data.name = variety, x(…) = gives the left position of the bar so it places the rectangle horizontally, all segments for the same variety have the same x so they stack vertically on top of each other .attr("y", d => y(d[1])) // d[1] = top of the rectangle, y(...) = converts to SVG so it sets top of the rectangle .attr("height", d => y(d[0]) - y(d[1])) // d[0] = bottom of rectangle, d[1] = top of rectangle, segment height = bottom - top .attr("width", x.bandwidth()) // set width of the rectangle to the bandwidth //to here .on("mouseenter", function(event, d) { const site = d3.select(this.parentNode).datum().key; const variety = d.data.name; tooltip.innerHTML = `Variety: ${variety}
Site: ${site}
Yield: ${(d[1]-d[0]).toFixed(2)}`; tooltip.style.visibility = "visible"; }) .on("mousemove", event => { tooltip.style.left = (event.pageX + 12) + "px"; tooltip.style.top = (event.pageY - 28) + "px"; }) .on("mouseleave", () => { tooltip.style.visibility = "hidden"; }); // Total yield const totalYieldPerVariety = stackedData.map(d => ({ variety: d.name, total: keys.reduce((sum, k) => sum + d[k], 0) })); const line = d3.line() .x(d => x(d.variety) + x.bandwidth()/2) .y(d => y(d.total)); g.append("path") .datum(totalYieldPerVariety) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2) .attr("d", line); g.selectAll(".total-point") .data(totalYieldPerVariety) .join("circle") .attr("class", "total-point") .attr("cx", d => x(d.variety) + x.bandwidth()/2) .attr("cy", d => y(d.total)) .attr("r", 5) .attr("fill", "black") .on("mouseenter", function(event, d) { tooltip.innerHTML = `Variety: ${d.variety}
Total Yield: ${d.total.toFixed(2)}`; tooltip.style.visibility = "visible"; }) .on("mousemove", event => { tooltip.style.left = (event.pageX + 12) + "px"; tooltip.style.top = (event.pageY - 28) + "px"; }) .on("mouseleave", () => { tooltip.style.visibility = "hidden"; }); // Axes g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("transform", "rotate(-25)") .style("text-anchor", "end"); g.append("g").call(d3.axisLeft(y)); // Title svg.append("text") .attr("x", marginLeft + width / 2) .attr("y", marginTop / 2) .attr("text-anchor", "middle") .style("font-size", "20px") .style("font-weight", "600") .text("Stacked Barley Yields by Variety and Site"); // X-axis label svg.append("text") .attr("x", marginLeft + width / 2) .attr("y", height + marginTop + marginBottom - 10) .attr("text-anchor", "middle") .style("font-size", "14px") .text("Variety"); // Y-axis label svg.append("text") .attr("transform", `rotate(-90)`) .attr("x", -(marginTop + height / 2)) .attr("y", 20) .attr("text-anchor", "middle") .style("font-size", "14px") .text("Yield"); // Legend const legend = svg.append("g") .attr("transform", `translate(${width + marginLeft + 10}, ${marginTop})`); legend.selectAll("legend-item") .data(keys) .join("g") .attr("transform", (d, i) => `translate(0, ${i * 25})`) .each(function(d){ d3.select(this) .append("rect") .attr("width", 18) .attr("height", 18) .attr("fill", color(d)); d3.select(this) .append("text") .attr("x", 25) .attr("y", 13) .style("font-size", "14px") .text(d); }); return svg.node(); } 33:[{"id":"759d288798701613d62ad600e0c7eecd2455cd97e078a031c3b877e1ad745ce490a7c69fc3cef50789df54ac6b8e5f5c75ae798508ee76f621c6460e50defedb","href":"https://static.observableusercontent.com/files/759d288798701613d62ad600e0c7eecd2455cd97e078a031c3b877e1ad745ce490a7c69fc3cef50789df54ac6b8e5f5c75ae798508ee76f621c6460e50defedb","name":"barley.json","type":"application/json","lastModified":1764033390671.833,"size":8487}] 2f:{"id":"e22c5277a2117b86","slug":null,"title":"Introduction to D3: Course Assignment","thumbnail":"3d6ea627580b9aabcf5f63428973011387f84a7331aa6d9c38675eb209198f71","access_level":"public","create_time":"$D2025-11-25T01:16:30.671Z","update_time":"$D2025-12-11T12:09:49.187Z","view_time":null,"first_public_time":"$D2025-11-25T01:16:30.671Z","has_unpublished_edits":null,"fork":{"id":"ec8b8d25c3c93a87","slug":"introduction-to-d3-course-assignment","title":"Introduction to D3: Course Assignment","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e9b2f7fde85a5f53","login":"dis-2025-fall","name":"🪦 dis-2025-fall","avatar_url":"https://avatars-next.observableusercontent.com/a95179728f7a208605a8a434afc1723fb8e19b4266664a0a24602d1c54817cd7","tier":"pro_2024"},"version":51,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d118dd89de768fc2","login":"chelsea-yang","name":"Chelsea Yang","avatar_url":"https://avatars-next.observableusercontent.com/ac7142eaf79ca23fa704e73ae2a51a2797c180f577afb5f0649dbd5d1c78bd2f","tier":null}],"members":[{"type":"individual","id":"d118dd89de768fc2","login":"chelsea-yang","name":"Chelsea Yang","avatar_url":"https://avatars-next.observableusercontent.com/ac7142eaf79ca23fa704e73ae2a51a2797c180f577afb5f0649dbd5d1c78bd2f","tier":null,"role":"editor"},{"type":"team","id":"e9b2f7fde85a5f53","login":"dis-2025-fall","name":"🪦 dis-2025-fall","avatar_url":"https://avatars-next.observableusercontent.com/a95179728f7a208605a8a434afc1723fb8e19b4266664a0a24602d1c54817cd7","tier":"pro_2024","role":"editor"}],"comments":[{"id":"69dd585cb8453fa2","reply_to_id":null,"content":"is it 1931 or 1932? let's add explanation or better yet, interactive element to switch between the two","create_time":"$D2025-12-01T07:17:53.516Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"1245953aabb247aa","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Introduction to D3: Course Assignment","cells":[{"id":0,"value":"# Introduction to D3: Course Assignment\n\nThe goal of this assignment is to assess your ability to find D3 examples and repurpose them for another dataset. The dataset we'll use for this assignment is from Bill Cleveland's book [Visualizing Data](https://www.amazon.com/Visualizing-Data-William-S-Cleveland/dp/0963488406), on barley yields in Minnesota. The dataset includes the yield from six different sites in Minnesota for 1931 and 1932. There is an interesting trend for one of the sites that I hope your visualization can identify. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"barley = await FileAttachment(\"barley.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"barley","database":"$undefined"},{"id":18,"value":"\n\n__To complete the assignment, we're looking for the following__:\n1. Create a new visualization either from scratch or using an existing example with the barley data.\n2. Make meaningful changes to the visualization to make it your own. This could be:\n - changing dimensions and styling\n - changing the types of marks used, i.e. circles, rectangles, lines\n - changing the data to derive new values\n - adding interaction or animation to elements\n4. Write 1-2 paragraphs about why you created this visualization form, what you changed to get it to work with the barley data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"To create your visualization, you're welcome to start from scratch in a new JavaScript cell or to repurpose [an existing example from the D3 gallery](https://observablehq.com/@d3/gallery). The [workshop activities](https://observablehq.com/collection/@observablehq/introduction-to-d3-course) from the course should also provide you with plenty of code to get up and running. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"The barley data is provided here as a [file attachment](https://observablehq.com/@observablehq/file-attachments), which you can download, [import into a new notebook](https://observablehq.com/@observablehq/learning-observable-importing-and-remixing-cells-and-note?collection=@observablehq/intro-to-observable#cell-20), or you can [fork](https://observablehq.com/@observablehq/learning-observable-importing-and-remixing-cells-and-note?collection=@observablehq/intro-to-observable#cell-18) this notebook itself to get started. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"viewof year = Inputs.radio([\"1931\", \"1932\"], {\n label: \"Select Year\",\n value: \"1931\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"I created a stacked bar chart showing barley yields by variety across different sites with a line showing the total yield for each variety. You can see how much each site contributed to the total yield of each variety, and the line shows the trend of total yield of each variety across all sites. I first grouped the data by variety to structure it for stacking by site. Then, I found the total yield for each variety across sites and connected them with a line. Then, I added tooltips for hovering that display various information. Then, I added axes, labels, and legend.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"