31:T159d,chart = { const containerWidth = width; // total width including margins const containerHeight = 500; // total height including margins const margin = { top: 50, right: 50, bottom: 50, left: 50 }; const chartWidth = containerWidth - margin.left - margin.right; // chart width after margin-left and margin-right const chartHeight = containerHeight - margin.top - margin.bottom; // chart height after margin-top and margin-bottom // create and configure svg element const svg = d3 .create("svg") .attr("viewBox", [0, 0, containerWidth, containerHeight]) .attr("width", containerWidth) .attr("height", containerHeight) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); // create a group within the svg element to apply margins const chartGroup = svg .append("g") .attr( "transform", `translate(${chartWidth / 3 - margin.left},${margin.top})` ); // creating a deep clone of the current chartData from barley dataset for use. let chartData = [...barley]; // choosing barley yield by site over the years if (year === "year_1931") { chartData = d3.filter(barley, (d) => d.year === "1931"); } else if (year === "year_1932") { chartData = d3.filter(barley, (d) => d.year === "1932"); } // configure data according to circular packing const groupedData = d3.group(chartData, (d) => d.variety); const hierarchyData = { name: "varieties", children: Array.from(groupedData, ([key, values]) => ({ name: key, children: d3.map(values, (d) => ({ name: d.site, size: d.yield })) })) }; // create circular packing chart const diameter = chartWidth / 3; const pack = d3.pack().size([diameter, diameter]).padding(20); // create root const root = d3 .hierarchy(hierarchyData) .sum((d) => { return d.size; }) .sort((a, b) => { return b.value - a.value; }); // create node const node = chartGroup .selectAll(".node") .data(pack(root).descendants()) .join("g") .attr("id", (d) => { return d.data.name; }) .attr("class", (d) => { return d.children ? "node" : "leaf node"; }) .attr("transform", (d) => { return "translate(" + d.x + "," + d.y + ")"; }); // craete color array const colorGrid = [ "#4e79a7", "#f28e2c", "#e15759", "#76b7b2", "#59a14f", "#edc949", "#af7aa1", "#ff9da7", "#9c755f", "#bab0ab" ]; // craete color scale for (variety) const colorScale = d3 .scaleOrdinal() .domain(d3.map(chartData, (d) => d.site)) .range(colorGrid); // add circle const circle = node .append("circle") .attr("r", (d) => d.r) .attr("opacity", (d, i) => (i === 0 ? 0.2 : !d?.children ? 1 : 0.5)) .attr("fill", (d) => !d?.children ? colorScale(d?.parent.data.name) : colorScale(d.data.name) ) .attr("site", (d) => !d.children && d.data.name) .attr("yield", (d) => !d.children && d.data.size) .attr("stroke", "black") .attr("stroke-width", 1.2); // add click to circle to highlight same site accross all variety circle.on("click", (e, d, i) => { // do nothing if there is children insite circle if (d?.children) { return; } }); // create tooltip container const tooltipContainer = d3 .select("body") .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .style("padding", "10px") .style("font", "14px sans-serif") .style("background", "lightsteelblue") .style("border-radius", "4px") .style("color", "#444"); // add tooltip on mousemove circle.on("mouseover", function (e, d, i) { // do nothing if there is children insite circle if (d?.children) { return; } // get value from DOM const site = d3.select(this).attr("site"); const yieldSize = d3.select(this).attr("yield"); tooltipContainer .html(`${site}
Yield: ${yieldSize}`) .style("visibility", "visible"); }); circle.on("mousemove", function (event) { tooltipContainer .style("left", event.pageX + 10 + "px") .style("top", event.pageY + 10 + "px"); }); // hide tooltip in mouseout circle.on("mouseout", function () { tooltipContainer.html(``).style("visibility", "hidden"); }); // get unique variety const uniqueVariety = [...new Set(d3.map(chartData, (d) => d.variety))]; // create legend (variety) const legendRectWidth = 60; const legendRectHeight = 15; // create legend scale const legendScale = d3 .scaleBand() .domain(uniqueVariety) .range([0, legendRectWidth * uniqueVariety.length]); // create legend axis svg .append("g") .attr( "transform", (d, i) => `translate(${ chartWidth / 2 - legendScale.range()[1] / 2 + legendRectWidth * i },${chartHeight + legendRectHeight + margin.bottom / 2})` ) .call(d3.axisBottom(legendScale).tickSizeOuter(0)); svg .append("g") .attr("id", "legend") .selectAll("rect") .data(colorScale.range()) .join("rect") .attr("class", "legend-item") .attr("width", legendRectWidth) .attr("height", legendRectHeight) .style("fill", (d) => d) .attr( "transform", (d, i) => `translate(${ chartWidth / 2 - legendScale.range()[1] / 2 + legendRectWidth * i },${chartHeight + margin.bottom / 2})` ); return svg.node(); }32: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.33:[{"id":"759d288798701613d62ad600e0c7eecd2455cd97e078a031c3b877e1ad745ce490a7c69fc3cef50789df54ac6b8e5f5c75ae798508ee76f621c6460e50defedb","href":"https://static.observableusercontent.com/files/759d288798701613d62ad600e0c7eecd2455cd97e078a031c3b877e1ad745ce490a7c69fc3cef50789df54ac6b8e5f5c75ae798508ee76f621c6460e50defedb","name":"barley.json","type":"application/json","lastModified":1697779069453.259,"size":8487}] 2f:{"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"},{"id":12,"value":"barley = await FileAttachment(\"barley.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"viewof year = radio({\n title: \"Choosing Barley Yield by Site Over the Years\",\n options: [\n { label: \"1931\", value: \"year_1931\" },\n { label: \"1932\", value: \"year_1932\" }\n ],\n value: \"year_1931\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"** Explanation: ** ","pinned":false,"hidden":false,"mode":"md"},{"id":294,"value":"**Circular Packing Charts** are a type of data visualization that represents hierarchical data using concentric circles or rings. They are often used to show the hierarchical structure and relationships within a dataset.","pinned":false,"hidden":false,"mode":"md"},{"id":300,"value":"

Chart Elements :

\n The Outermost Circle represents the Year (e.g. 1931 and 1932)
\n The Central Circle represents the Variety (e.g., Manchuria, Glabron, Svansota, Velvet, Trebi, No. 457, No. 462, Peatland, No. 475, Wisconsin No. 38), with different Color Codes to distinguish them.
\n The Innermost Circle represents the Site corresponding to the Variety(e.g. University Farm, Waseca, Morris, Grand Rapids, Crookston), with different sizes of circles based on yield value to distinguish them.
\n On mouse hover over each innermost circle, the value of sites and their corresponding yield is displayed.\n

","pinned":false,"hidden":false,"mode":"md"},{"id":71,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"md"}],"files":"$W33","stdlib":"1","titling":"auto"}