29:null 2a:["$","title",null,{"children":"MN Barley Yields | Data Visualization Portfolio | Observable"}] 2f:Te08,barchart = { // chart dimensions const width = 928; const marginTop = 30; const marginRight = 10; const marginBottom = 0; const marginLeft = 100; // sum yields for each site and year const aggregated = Array.from( d3.rollup(data, v => d3.sum(v, d => d.yield), d => d.site, d => d.year), ([site, years]) => { const obj = { site }; for (const [year, yieldValue] of years) obj[year] = yieldValue; return obj; } ); // determine the series that need to be stacked. const years = [...new Set(data.map(d => d.year))]; const series = d3.stack() .keys(years) // distinct series keys .value((d, key) => d[key] || 0) // get value for each series key, default 0 (aggregated); // stack the aggregated data // compute height from the number of stacks. const height = series[0].length * 25 + marginTop + marginBottom; // prepare the scales for positional and color encodings. const x = d3.scaleLinear() .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]) .range([marginLeft, width - marginRight]); const y = d3.scaleBand() .domain(d3.groupSort(aggregated, D => -d3.sum(years, year => D[year] || 0), d => d.site)) .range([marginTop, height - marginBottom]) .padding(0.08); const color = d3.scaleOrdinal() .domain(years) .range(d3.schemeSpectral[years.length] || d3.quantize(d3.interpolateSpectral, years.length)) .unknown("#ccc"); // formats value in the tooltip. const formatValue = x => isNaN(x) ? "N/A" : x.toLocaleString("en"); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // tooltip div const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("background", "rgba(255, 255, 255, 0.9)") .style("border", "1px solid #ccc") .style("padding", "6px 10px") .style("pointer-events", "none") .style("font", "12px Inter, sans-serif") .style("display", "none"); // append group for each series, and a rect for each element in the series. svg.append("g") .selectAll() .data(series) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d.map(v => (v.key = d.key, v))) .join("rect") .attr("x", d => x(d[0])) .attr("y", d => y(d.data.site)) .attr("height", y.bandwidth()) .attr("width", d => x(d[1]) - x(d[0])) // tooltip events .on("mouseover", (event, d) => { tooltip.style("display", "block") .html(`Site: ${d.data.site}
Year: ${d.key}
Yield: ${formatValue(d.data[d.key])}`); }) .on("mousemove", (event) => { tooltip.style("left", (event.pageX + 10) + "px") .style("top", (event.pageY + 10) + "px"); }) .on("mouseout", () => tooltip.style("display", "none")); // append the horizontal axis. svg.append("g") .attr("transform", `translate(0,${marginTop})`) .call(d3.axisTop(x).ticks(width / 100, "s")) .call(g => g.selectAll(".domain").remove()); // append the vertical axis. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) .call(g => g.selectAll(".domain").remove()); // return the chart with the color scale as a property return Object.assign(svg.node(), { scales: { color } }); } 30:T9b9,chart = { // data groupings const sites = d3.group(data, d => d.site); const years = new Set(data.map(d => d.year)); // dimensions const width = 900; const height = sites.size * 48; const padding = 1 const marginAmount = 30; const marginTop = marginAmount; const marginRight = marginAmount; const marginBottom = marginAmount; const marginLeft = marginAmount; // scales for yield (x) and site (y) const x = d3.scaleLinear() .domain([0, d3.max(data, d => d.yield)]) .rangeRound([marginLeft, width - marginRight]); const y = d3.scalePoint() .domain(d3.sort(sites.keys())) .rangeRound([marginTop, height - marginBottom]) .padding(padding); // color for years const color = d3.scaleOrdinal() .domain(years) .range(d3.quantize(d3.interpolateSpectral, years.size)); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); //add x-axis to svg svg.append("g") .attr("transform", `translate(0,${marginTop})`) .call(d3.axisTop(x).ticks(5)) .call(g => g.append("text") .text("Yield →") .attr("fill", "currentColor") .attr("transform", `translate(${width - marginRight},0)`) .attr("text-anchor", "end") .attr("dy", -22)) .call(g => g.selectAll(".tick line").clone().attr("stroke-opacity", 0.1).attr("y2", height - marginBottom)) .call(g => g.selectAll(".domain").remove()); //text const g = svg.append("g") .attr("text-anchor", "end") .style("font", "12px Inter, sans-serif") .selectAll() .data(sites) .join("g") .attr("transform", ([site]) => `translate(0,${y(site)})`); g.append("line") .attr("stroke", "#aaa") .attr("x1", ([, values]) => x(d3.min(values, d => d.yield))) .attr("x2", ([, values]) => x(d3.max(values, d => d.yield))); g.append("g") .selectAll() .data(([, values]) => values) .join("circle") .attr("cx", d => x(d.yield)) .attr("fill", d => color(d.year)) .attr("r", 3.5); g.append("text") .attr("dy", "0.35em") .attr("x", ([, values]) => x(d3.min(values, d => d.yield)) - 6) .text(([site]) => site); return Object.assign(svg.node(), { scales: {color}, update(names) { y.domain(names); g.transition() .delay((d, i) => i * 10) .attr("transform", ([site]) => `translate(0,${y(site)})`); } }); }31:T505,update = { const siteStats = Array.from( d3.group(data, d => d.site), ([site, values]) => ({ site, avgYield: d3.mean(values, v => v.yield), maxYield: d3.max(values, v => v.yield), minYield: d3.min(values, v => v.yield), years: new Set(values.map(v => v.year)), varieties: new Set(values.map(v => v.variety)) }) ); let idx = d3.range(siteStats.length).sort((i, j) => { switch(order){ case "site": return d3.ascending(siteStats[i].site, siteStats[j].site); case "avgYield": return d3.descending(siteStats[i].avgYield, siteStats[j].avgYield); case "maxYield": return d3.descending(siteStats[i].maxYield, siteStats[j].maxYield); case "minYield": return d3.ascending(siteStats[i].minYield, siteStats[j].minYield); case "year": return d3.ascending( Math.min(...siteStats[i].years), Math.min(...siteStats[j].years) ); case "varietyCount": return d3.descending( siteStats[i].varieties.size, siteStats[j].varieties.size ); default: return 0; } }); const sortedSites = d3.permute( siteStats.map(d => d.site), idx ); chart.update(sortedSites); }32:Tfc8,scatterplot = { const width = 1000; const height = 600; const margin = 30; const marginTop = margin; const marginRight = margin; const marginBottom = margin; const marginLeft = margin + 70; // positional scaling const x = d3.scaleLinear() .domain(d3.extent(data, d => d.yield)).nice() .range([marginLeft, width - marginRight]); const y = d3.scaleBand() .domain([...new Set(data.map(d => d.site))]) .range([marginTop, height - marginBottom]); // color scale const color = d3.scaleOrdinal([...new Set(data.map(d => d.year))], d3.schemeCategory10); // first 6 varieties const varieties = [...new Set(data.map(d => d.variety))].slice(0, 6); const shape = d3.scaleOrdinal(varieties, d3.symbols.slice(0, varieties.length).map(s => d3.symbol().type(s).size(100)())); // svg const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; font-family: 'Inter', sans-serif;"); // axes svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", width) .attr("y", marginBottom - 4) .attr("fill", "currentColor") .attr("text-anchor", "end") .text("Yield")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("Site")); // grid svg.append("g") .attr("stroke", "currentColor") .attr("stroke-opacity", 0.1) .call(g => g.append("g") .selectAll("line") .data(x.ticks()) .join("line") .attr("x1", d => 0.5 + x(d)) .attr("x2", d => 0.5 + x(d)) .attr("y1", marginTop) .attr("y2", height - marginBottom)) .call(g => g.append("g") .selectAll("line") .data(y.domain()) .join("line") .attr("y1", d => 0.5 + y(d) + y.bandwidth()/2) .attr("y2", d => 0.5 + y(d) + y.bandwidth()/2) .attr("x1", marginLeft) .attr("x2", width - marginRight)); // tooltip const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("pointer-events", "none") .style("padding", "6px 10px") .style("background", "rgba(0,0,0,0.7)") .style("color", "white") .style("font-size", "12px") .style("font-family", "'Inter', sans-serif") .style("border-radius", "4px") .style("opacity", 0); // symbols with stroke and tooltip svg.append("g") .attr("stroke-width", 0.75) .attr("stroke", "black") .attr("font-family", "Inter, sans-serif") .attr("font-size", 10) .selectAll("path") .data(data.filter(d => varieties.includes(d.variety))) .join("path") .attr("transform", d => `translate(${x(d.yield)},${y(d.site) + y.bandwidth()/2})`) .attr("fill", d => color(d.year)) .attr("stroke", "black") .attr("stroke-width", 0.75) .attr("d", d => shape(d.variety)) .on("mouseover", function(event, d) { tooltip.style("opacity", 1) .html(`Site: ${d.site}
Year: ${d.year}
Variety: ${d.variety}
Yield: ${d.yield}`); d3.select(this).attr("stroke-width", 2); }) .on("mousemove", function(event) { tooltip.style("left", (event.pageX + 10) + "px") .style("top", (event.pageY + 10) + "px"); }) .on("mouseout", function() { tooltip.style("opacity", 0); d3.select(this).attr("stroke-width", 0.75); }); return Object.assign(svg.node(), {scales: {color, shape}}); } 33:[{"id":"759d288798701613d62ad600e0c7eecd2455cd97e078a031c3b877e1ad745ce490a7c69fc3cef50789df54ac6b8e5f5c75ae798508ee76f621c6460e50defedb","href":"https://static.observableusercontent.com/files/759d288798701613d62ad600e0c7eecd2455cd97e078a031c3b877e1ad745ce490a7c69fc3cef50789df54ac6b8e5f5c75ae798508ee76f621c6460e50defedb","name":"barley.json","type":"application/json","lastModified":1764963772143.489,"size":8487}] 2d:{"id":"944e3cb0e59248a3","slug":"barley-yields","title":"MN Barley Yields","thumbnail":"e8ef429bde0931da1b8c845d0905c226747cff7828235ae051e370b0d9051e51","access_level":"unlisted","create_time":"$D2025-12-05T19:42:52.143Z","update_time":"$D2026-01-04T04:53:03.679Z","view_time":null,"first_public_time":null,"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":"283f694de02a4039","login":"mmanley-portfolio","name":"Data Visualization Portfolio","avatar_url":"https://avatars-next.observableusercontent.com/5c1e2d22ad9157d50d7be7e64fcbeb1ca95766c911b36e2ae3208f103522f449","tier":"starter_2024"},"version":210,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cae4e9df0ea20218","login":"moyartu-manley","name":"Moyartu Manley","avatar_url":"https://avatars-next.observableusercontent.com/40431a6c6808c10d448cd6c380d1aff03424aaccf1990dca864f9737bc02f3fa","tier":null}],"members":[{"type":"individual","id":"cae4e9df0ea20218","login":"moyartu-manley","name":"Moyartu Manley","avatar_url":"https://avatars-next.observableusercontent.com/40431a6c6808c10d448cd6c380d1aff03424aaccf1990dca864f9737bc02f3fa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"MN Barley Yields","cells":[{"id":0,"value":"# MN Barley Yields\n\nThe dataset 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.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"data = await FileAttachment(\"barley.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"data","database":"$undefined"},{"id":81,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"import {Legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"---\n# Comparing Yield Amounts\n## Barchart\nBasic comparison of aggregate yields between sites. Yields are color-coded by year: 1931 - red, 1932 - purple.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"bar_legend = Legend(barchart.scales.color, {title: \"year\", tickSize: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"## Dotplot\nProvides an easier way to compare across sites, barley varieties and harvest years. I also wanted to add interactivity to the chart. Overall, the plot shows the spread of yields within each site and the differences between sites. Similar to the barchart above, yields are coded by year: 1931 - red, 1932 - purple.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"viewof order = {\n const options = [\n \"site\",\n \"avgYield\",\n \"maxYield\",\n \"minYield\"\n ];\n const view = Inputs.select(options, { label: \"Order sites by\" });\n\n const input = view.input;\n\n const interval = setInterval(() => {\n input.selectedIndex = (input.selectedIndex + 1) % input.length;\n input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n }, 4000);\n\n const clear = () => clearInterval(interval);\n input.addEventListener(\"change\", clear, { once: true });\n\n invalidation.then(() => {\n clear();\n input.removeEventListener(\"change\", clear);\n });\n\n return view;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"dot_legend = Legend(chart.scales.color, {title: \"year\", tickSize: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"# Considering barley species","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"## Scatterplot with shapes\nMarks are limited to the first 6 varieties of Barley since d3 only has six shapes. Adding shapes adds another level of encoding where the viewer can now see the species of barley and its associated yield.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"shape_legend = {\n const id = DOM.uid().id;\n const { color, shape } = scatterplot.scales;\n\n return html`\n

\n ${color.domain().map(year => html`\n

\n \n ${year}\n

\n `)}\n ${shape.domain().map(variety => html`\n

\n \n ${variety}\n

\n `)}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"