2b:null 2c:["$","title",null,{"children":"Introduction to D3: Course Assignment -Mayuka | Mayuka's personal workspace | Observable"}] 31:T7f0,{ const width = 200; const height = 320; const radius = 20; // Yield ranges from bottom to top const yieldLabels = [ "60<= y < 70", "50<= y < 60", "40<= y < 50", "30<= y < 40", "20<= y < 30", "10<= y < 20", "yield <10", ]; const circleData = [ { color: "orange", x: width / 2, y: 50 }, { color: "yellow", x: width / 2 + 20, y: 90 }, { color: "yellow", x: width / 2 - 20, y: 120 }, { color: "green", x: width / 2 + 20, y: 150 }, { color: "green", x: width / 2 - 20, y: 180 }, { color: "blue", x: width / 2 + 20, y: 210 }, { color: "blue", x: width / 2 - 20, y: 240 } ]; // Function to decide how many circles to show const n = numCircle(value); // assume `value` is defined const circlesToDraw = circleData.slice(-n); const labelsToDraw = yieldLabels.slice(-n); // Create SVG container const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("overflow", "visible"); // Add title svg.append("text") .attr("x", width / 2) .attr("y", 20) .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("font-weight", "bold") .text("Barley yield legend"); // Add vertical line svg.append("line") .attr("x1", width / 2) .attr("x2", width / 2) .attr("y1", 40) .attr("y2", 300) .attr("stroke", "black") .attr("stroke-width", 3); // Draw circles svg.selectAll("circle") .data(circlesToDraw) .enter() .append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", radius) .attr("fill", d => d.color); // Add overlay text svg.selectAll("text.label") .data(circlesToDraw) .enter() .append("text") .attr("class", "label") .attr("x", d => d.x) .attr("y", d => d.y + 5) // vertically center text .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "bold") .attr("fill", "black") .text((d, i) => labelsToDraw[i]); return svg.node(); } 32:T8d9,{ const width = 1400; const height = 800; const marginTop = 20; const marginRight = 20; const marginBottom = 50; const marginLeft = 80; const spacing = 12; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("overflow", "visible"); const x = d3.scaleBand() .domain(Array.from(new Set(barley.map((d) => d.variety)))) .range([0, width - 400]) .padding(0.3); const y = d3.scaleBand() .domain(Array.from(new Set(barley.map((d) => d.site)))) .range([height - 100, 0]) .padding(0.3); const g = svg .append("g") .attr("transform", `translate(${marginLeft}, ${marginBottom})`); // Axes g.append("g") .attr("transform", `translate(0,${height - 100})`) .call(d3.axisBottom(x)); g.append("g") .call(d3.axisLeft(y)); // Container for barley marks const barleyLayer = g.append("g").attr("class", "barley-layer"); const grouped = d3.group(barley, d => d.variety, d => d.site); const updateFunctions = []; for (const [variety, siteMap] of grouped) { for (const [site, records] of siteMap) { const record1931 = records.find(d => d.year === "1931") ; const record1932 = records.find(d => d.year === "1932") ; const cx = x(variety) + x.bandwidth() / 2; const cy = y(site) + y.bandwidth() / 2; const group = barleyLayer.append("g") .attr("transform", `translate(${cx}, ${cy})`); group.append("line") .attr("x1", 0) .attr("x2", 0) .attr("y1", -spacing * 3.5) .attr("y2", spacing * 4) .attr("stroke", "black") .attr("stroke-width", 1.5); const updater = drawBarleyMark(group, record1931.yield, record1932.yield, 0, 0); updateFunctions.push(updater); } } // return svg.node(); const container = htl.html`

`; // Append buttons to container ...refer to Introduction to D3 Course: Lesson 4 - const buttons = d3.select(container) .selectAll("button") .data(["1931", "1932"]) .join("button") .text(d => ` ${d}`) .style("margin-right", "8px") .on("click", (event, year) => { updateFunctions.forEach(fn => fn(year)); }); // Append the generated SVG to the same container d3.select(container).append(() => svg.node()); return container; }33:T645,function drawBarleyMark(group, value1931, value1932, centerX, centerY) { const radius = 7; const spacing = 12; const barleyData = [ { color: "orange", dx: 0, dy: -3 * spacing }, { color: "green", dx: 8, dy: -2 * spacing }, { color: "green", dx: -8, dy: -1 * spacing }, { color: "blue", dx: 8, dy: 0 }, { color: "blue", dx: -8, dy: 1 * spacing }, { color: "navy", dx: 8, dy: 2 * spacing }, { color: "navy", dx: -8, dy: 3 * spacing } ]; const n = numCircle(value1931); const initial = barleyData.slice(-n); const g = group.append("g") .attr("transform", `translate(${centerX}, ${centerY})`); g.selectAll("circle") .data(initial) .enter() .append("circle") .attr("cx", d => d.dx) .attr("cy", d => d.dy) .attr("r", radius) .attr("fill", d => d.color); function update(year) { const n = numCircle(year === "1931" ? value1931 : value1932); const newData = barleyData.slice(-n); g.selectAll("circle") .data(newData, d => d.dy) .join( enter => enter.append("circle") .attr("cx", d => d.dx) .attr("cy", d => d.dy) .attr("r", 0) .attr("fill", d => d.color) .transition().duration(800) .attr("r", radius), update => update.transition().duration(800) .attr("cx", d => d.dx) .attr("cy", d => d.dy) .attr("fill", d => d.color), exit => exit.transition().duration(800) .attr("r", 0) .remove() ); } return update; } 34:[{"id":"759d288798701613d62ad600e0c7eecd2455cd97e078a031c3b877e1ad745ce490a7c69fc3cef50789df54ac6b8e5f5c75ae798508ee76f621c6460e50defedb","href":"https://static.observableusercontent.com/files/759d288798701613d62ad600e0c7eecd2455cd97e078a031c3b877e1ad745ce490a7c69fc3cef50789df54ac6b8e5f5c75ae798508ee76f621c6460e50defedb","name":"barley.json","type":"application/json","lastModified":1769877976122.067,"size":8487}] 2f:{"id":"7f2993bd215121fc","slug":null,"title":"Introduction to D3: Course Assignment -Mayuka","thumbnail":"99c0f5a8dcac9b2ed0fd4090d37dc2c8cb0a809a1b1ff2a00446ccbae1efad03","access_level":"public","create_time":"$D2026-01-31T16:46:16.122Z","update_time":"$D2026-01-31T16:46:16.122Z","view_time":null,"first_public_time":"$D2026-01-31T16:46:16.122Z","has_unpublished_edits":null,"fork":{"id":"4467f51d0c914ffc","slug":"introduction-to-d3-course-assignment-mayuka","title":"Introduction to D3: Course Assignment -Mayuka","owner":{"id":"caa1f4ddba1048c5","login":"dv-develop-2025s","name":"🪦 dv develop 2025 spring"}},"stars":1,"starred":false,"owner":{"type":"team","id":"11f7218f4b7ba86d","login":"mayukaotsuki","name":"Mayuka's personal workspace","avatar_url":"https://avatars-next.observableusercontent.com/58d3be4f70349139b34297e45db1da100e61d1bb056bf44e674d2f06eaaab209","tier":"starter_2024"},"version":277,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"443421c90ce1977e","login":"mayuka-otsuki","name":"Mayuka Otsuki","avatar_url":"https://avatars-next.observableusercontent.com/9e021cba8d155f759d3d0c72f986543d09f416342254158d97f74f8c60ccef35","tier":null}],"members":[{"type":"team","id":"11f7218f4b7ba86d","login":"mayukaotsuki","name":"Mayuka's personal workspace","avatar_url":"https://avatars-next.observableusercontent.com/58d3be4f70349139b34297e45db1da100e61d1bb056bf44e674d2f06eaaab209","tier":"starter_2024","role":"editor"},{"type":"individual","id":"443421c90ce1977e","login":"mayuka-otsuki","name":"Mayuka Otsuki","avatar_url":"https://avatars-next.observableusercontent.com/9e021cba8d155f759d3d0c72f986543d09f416342254158d97f74f8c60ccef35","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Introduction to D3: Course Assignment -Mayuka","cells":[{"id":0,"value":"# Introduction to D3: Course Assignment -Mayuka\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":57,"value":"barley","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"Plot.plot({\n marks: [\n Plot.auto(barley, {x: \"year\", y: \"yield\", fx: \"site\", fy: \"variety\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":262,"value":"viewof value = Inputs.range([0,70], {\n step: 1,\n width: width,\n value: 0.95,\n label: \"Value 1\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"function numCircle(value){\n let num = 0;\n if (value < 10) num = 1;\n else if (value < 20) num = 2;\n else if (value < 30) num = 3;\n else if (value < 40) num = 4;\n else if (value < 50) num = 5;\n else if (value < 60) num = 6;\n else if (value < 70) num = 7;\n return num;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"