2e:null 2f:["$","title",null,{"children":"Introduction to D3: Course Assignment Answer Sheet | Dany Laksono | Observable"}] 34:Tda1,{ const width = 1000; const height = 600; const margin = { top: 60, bottom: 0, left: 50, right: 0 }; const div = htl.html`

`; // buttons const categories = d3.groups(barley, (d) => d.year); const buttons = d3 .select(div) .selectAll("button") .data(categories) .join("button"); buttons.text((d) => d[0]); // data let filtereddata = barley.filter((d) => d.year == 1931); const svg = d3 .select(div) .attr("viewBox", [0, 0, width, height]) .append("div") .append("svg") .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); function drawChart(filtereddata, year) { svg.selectAll("*").remove(); const g = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("rect") .attr("width", width) .attr("height", height) .style("fill", "#eee"); const text = svg .append("text") .style("font", "12px sans-serif") .attr("y", 15) .text("Current year: " + year); // --- drawing chart const color = d3 .scaleOrdinal(d3.schemeCategory10) .domain(filtereddata.map((d) => d.variety)); // Compute the layout. const treemap = (data) => d3 .treemap() .round(true) .tile(d3.treemapSliceDice) .size([ width - margin.left - margin.right, height - margin.top - margin.bottom ])( d3 .hierarchy( d3.group( data, (d) => d.site, (d) => d.variety ) ) .sum((d) => d.yield) ) .each((d) => { d.x0 += margin.left; d.x1 += margin.left; d.y0 += margin.top; d.y1 += margin.top; }); const root = treemap(filtereddata); // Position the nodes. const node = svg .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", (d) => `translate(${d.x0},${d.y0})`); const format = (d) => d.toLocaleString(); // Draw column labels. const column = node.filter((d) => d.depth === 1); column .append("text") .attr("x", 3) .attr("y", "-1.7em") .style("font-weight", "bold") .text((d) => d.data[0]); column .append("text") .attr("x", 3) .attr("y", "-0.5em") .attr("fill-opacity", 0.7) .text((d) => format(d.value)); column .append("line") .attr("x1", -0.5) .attr("x2", -0.5) .attr("y1", -30) .attr("y2", (d) => d.y1 - d.y0) .attr("stroke", "#000"); // Draw leaves. const cell = node.filter((d) => d.depth === 2); cell .append("rect") .attr("fill", (d) => color(d.data[0])) .attr("fill-opacity", (d, i) => d.yield / d.parent.yield) .attr("width", (d) => d.x1 - d.x0 - 1) .attr("height", (d) => d.y1 - d.y0 - 1); cell .append("text") .attr("x", 3) .attr("y", "1.1em") .text((d) => d.data[0]); cell .append("text") .attr("x", 3) .attr("y", "2.3em") .attr("fill-opacity", 0.7) .text((d) => format(d.value)); } buttons.on("click", (event, d) => { console.log(d[0]); filtereddata = barley.filter((e) => e.year == d[0]); drawChart(filtereddata, d[0]); }); drawChart(filtereddata, "1931"); return div; }35:Ta55,function plotBarley(site) { const width = 1000; const height = 200; // const site = Array.from(groupedDataBySite.keys())[0]; const data = groupedDataBySite.get(site); const margin = { top: 30, left: 110, right: 30, bottom: 35 }; const x = d3 .scaleLinear() .domain([10, 70]) .range([margin.left, width - margin.right]); // .padding(0.1); const y = d3 .scaleBand() .domain(Array.from(new Set(data.map((d) => d.variety)))) .range([height - margin.bottom, margin.top]) .padding(0.1); // Create the SVG container. const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); const colorScale = d3 .scaleOrdinal() .domain(Array.from(new Set(data.map((d) => d.year)))) .range(["red", "green"]); const colorScaleLine = d3 .scaleDiverging() .domain([-50, 0, 50]) .interpolator(d3.interpolateRdBu); const shape = d3 .scaleOrdinal() .domain(data.map((d) => d.year)) .range([d3.symbolCircle, d3.symbolDiamond2]); const line = d3 .line() .x((d) => x(d.yield)) .y((d) => y(d.variety)); svg .append("text") .attr("x", width - margin.right) .attr("y", height / 2) .attr("text-anchor", "end") .style("font-size", "16px") .text(site); // Add the x-axis and label. svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)); // Add the y-axis and label, and remove the domain line. svg .append("g") .call(d3.axisLeft(y)) .attr("transform", `translate(${margin.left},0)`); // Group the data by variety const groupedData = d3.group( data.filter((d) => d.year == 1931 || d.year == 1932), (d) => d.variety ); // Create a group for the lines const lineGroup = svg.append("g"); // Draw a line for each group groupedData.forEach((value, key) => { // console.log(value[0].yield); lineGroup .append("path") .datum(value) .attr("class", "line") .attr("stroke", () => colorScaleLine(value[1].yield - value[0].yield)) .attr("stroke-width", 2) .attr("fill", "none") .attr("d", line); }); svg .append("g") .selectAll("path") .data(data) .join("path") .attr("transform", (d) => `translate(${x(d.yield)},${y(d.variety)})`) .attr( "d", d3 .symbol() .type((d) => shape(d.year)) .size(50) ) .style("fill", (d) => colorScale(d.year)); return svg.node(); }36:[{"id":"759d288798701613d62ad600e0c7eecd2455cd97e078a031c3b877e1ad745ce490a7c69fc3cef50789df54ac6b8e5f5c75ae798508ee76f621c6460e50defedb","href":"https://static.observableusercontent.com/files/759d288798701613d62ad600e0c7eecd2455cd97e078a031c3b877e1ad745ce490a7c69fc3cef50789df54ac6b8e5f5c75ae798508ee76f621c6460e50defedb","name":"barley.json","type":"application/json","lastModified":1697741647962.196,"size":8487}] 32:{"id":"3f2f98aad9fcd4df","slug":"introduction-to-d3-course-assignment-answer-sheet","title":"Introduction to D3: Course Assignment Answer Sheet","thumbnail":"b829e54deb40d9c19064d84000c31dc4d8c6901f637895abfe7fffa92898ff18","access_level":"public","create_time":"$D2023-10-19T18:54:07.962Z","update_time":"$D2023-10-21T09:36:33.780Z","view_time":null,"first_public_time":"$D2023-10-21T09:37:44.379Z","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":"56ae77b65752301c","login":"danylaksono","name":"Dany Laksono","avatar_url":"https://avatars-next.observableusercontent.com/151e6b82114dee2de7c5f8520c765e5dab42f220fd1dc9588d67d3fb50d35c80","tier":"starter_2024"},"version":604,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2bff00548b500be1","login":"danylaksono","name":"Dany Laksono","avatar_url":"https://avatars-next.observableusercontent.com/151e6b82114dee2de7c5f8520c765e5dab42f220fd1dc9588d67d3fb50d35c80","tier":null}],"members":[{"type":"individual","id":"2bff00548b500be1","login":"danylaksono","name":"Dany Laksono","avatar_url":"https://avatars-next.observableusercontent.com/151e6b82114dee2de7c5f8520c765e5dab42f220fd1dc9588d67d3fb50d35c80","tier":null,"role":"editor"}],"comments":[{"id":"60e06984e1738668","reply_to_id":null,"content":"Great job on both of these! The Marimekko chart is a fun way to visualize the data, but I agree the scatterplot view here is more effective for highlighting these year over year differences. \n\nYour D3 code is well written for both, and I like how you wrote the scatterplot as a function, making it easier to reuse. \n\nYou've successfully completed the course assignment. Expect a certificate to come into your inbox soon.","create_time":"$D2023-10-24T21:33:34.814Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"42520cea6c99d3c8","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Introduction to D3: Course Assignment Answer Sheet","cells":[{"id":0,"value":"# Introduction to D3: Course Assignment Answer Sheet\n_Dany Laksono_\n\n\nThis is the answer sheet for the Introduction to D3: Course. I tried different approach to visualise the data and identify the trends using D3. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":492,"value":"## The Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":494,"value":"The dataset 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. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"barley = await FileAttachment(\"barley.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"barley","database":"$undefined"},{"id":496,"value":"## Attempt 1: Marimekko Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"First, I looked at some of the examples in the [D3 Gallery](https://observablehq.com/@d3/gallery), which provides an ample resources to get started. I pick up the Marimekko Chart, since I thought that it could represent the data well.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":481,"value":"However, one crucial information is missing. In this case, we can't actually see the change of trends for Barley production between 1931 and 1932. Hence, I tried to use interactivity to capitalise the changes in yields. The result is as follow: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"By pressing the button, we can change the chart to show the data for either 1931 or 1932. With this, we can see that there are certain reductions on the production between 1931 and 1932. An interesting trend is shown especially in Morris, where the production is actually increasing. This way, interactivity helps in identifying this trend.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":499,"value":"## Attempt 2: Small Multiples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":501,"value":"Using only visual memory to retain the change of yields between 1931 and 1932 is not too effective. Other problems is that the chart retains its width, so that the overall trends is too subtle. Therefore, I tried to instead use faceting to display the data. Below is the attempt of using small multiples to visualise the changes:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":567,"value":"legend = {\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"plotBarley(Array.from(groupedDataBySite.keys())[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"plotBarley(Array.from(groupedDataBySite.keys())[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"plotBarley(Array.from(groupedDataBySite.keys())[2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"plotBarley(Array.from(groupedDataBySite.keys())[3])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"plotBarley(Array.from(groupedDataBySite.keys())[4])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"plotBarley(Array.from(groupedDataBySite.keys())[5])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"The scatterplot shows barley production for each site, while highlighting the trends between 1931 and 1932. The coloured line indicates the reducing or increasing production within the RdBu color scale. Using this small multiples, we can easily identify that while most of the sites suffers from diminishing production, Morris shows increasing rate instead, showing mostly blue lines on the plot. \n\nThis is of course not the ideal way to produce a small multiples using D3, but otherwise it works well.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":561,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":565,"value":"The plotBarley function is defined in the following cells.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":313,"value":"groupedDataBySite = d3.group(barley, (d) => d.site)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"