31:T453,md` One potential limitaiton I see in this study design is the somewhat biased way they chose experimentation groups. For the position-length experiment, they described one group as > a group of females, mostly housewives, with- out substantial technical experience. I feel as though if one is looking to create an unbiased group of people without technical experience, you should include both men and women, and not describe the women as "housewives", as if that explains their lack of technical experience. Perhaphs I'm reading too much into that line, but it left a bad taste in my mouth and cast a bit of doubt on the study. Another could be the fact that this study outlines a theory that the authors admit is just a first step. While they demonstrate that their theory is backed up by evidence and their own experiments, they also show that their theory needs revisions even after just their own experiments. By this point it's likely that their theory has undergone many more revisions, so basing my visualizations off of these results may be basing them off of slightly out of date information.`32:T460,encoding_types = md`## Encoding Types In this section, you will visualize the same set of numbers from a dataset of your choice using four different encodings. For practice, **you must write the D3 code yourself** (though you can import from other notebooks _you_ have written). For each of the following encodings, you must do the following: > _Position, Length, Angle, Color_ - Create a visualization using the selected encoding. This includes appropriate axes, labels, and legends (if appropriate). - Describe **which encoding** the chart uses - Describe **how accurate** the encoding is (relative to other encodings), and note particular comparisons that are more or less visibly apparent in this encoding. If you want to get fancy, you can add your observations _about_ each to the chart itself through [annotations](https://d3-annotation.susielu.com/). Or, to practice your programming skills, you can make a single chart and **add a dropdown menu** to change the encoding of the data! Also feel free to organize your notebook as you see fit (e.g., putting the data loading section in the appendix, etc.)`33:T46b,positionChart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // All that axis stuff svg.append("g").call(positionXAxis); svg.append("g").call(positionYAxis); // title! svg .append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "22px") .style("text-decoration", "underline") .text("Seattle Max Daily Temperature"); // x-axis label svg .append("text") .attr("x", width / 2) .attr("y", height) .style("font-size", "16px") .style("text-anchor", "middle") .text("Date"); //Create Y axis label svg .append("text") .attr("x", (height / 2) * -1) .attr("y", margin.left - 27) .style("text-anchor", "middle") .style("font-size", "16px") .attr("transform", "rotate(-90)") .text("Temperature (°F)"); svg .append("g") .selectAll("circle") .data(data) .join("circle") .attr("cx", d => positionX(d.date)) // apply that good good scale .attr("cy", d => positionY(d.y)) // apply that good good scale .attr("r", 5); return svg.node(); }34:T46a,lengthChart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // All that axis stuff svg.append("g").call(lengthXAxis); svg.append("g").call(lengthYAxis); // title! svg .append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "22px") .style("text-decoration", "underline") .text("Seattle Max Daily Temperature"); // x-axis label svg .append("text") .attr("x", width / 2) .attr("y", height) .style("font-size", "16px") .style("text-anchor", "middle") .text("Date"); //Create Y axis label svg .append("text") .attr("x", (height / 2) * -1) .attr("y", margin.left - 27) .style("text-anchor", "middle") .style("font-size", "16px") .attr("transform", "rotate(-90)") .text("Temperature (°F)"); svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", d => lengthX(d.date)) .attr("y", d => lengthY(d.y)) .attr("height", d => lengthY(positionYDomain[0]) - lengthY(d.y)) .attr("width", "1"); return svg.node(); }35:T566,angleChart = { const pieData = d3 .pie() .sort(null) .value(d => d.y); const svg = d3 .create("svg") .attr("viewBox", [-width / 2, (-height * 1.5) / 2, width, height * 1.5]); // Title! svg .append("text") .attr("x", width / 3333) // No centering things is hard af .attr("y", -height / 1.5) .attr("text-anchor", "middle") .style("font-size", "22px") .style("text-decoration", "underline") .text("Seattle Average Max Daily Temperature by Month"); // Data! svg .append("g") .attr("stroke", "white") .selectAll("path") .data(pieData(angleData)) .join("path") .attr("d", arc); svg .append("g") .attr("font-family", "serif") .attr("font-size", 20) .attr("text-anchor", "middle") .selectAll("text") .data(pieData(angleData)) .join("text") .attr("transform", d => `translate(${arcLabel.centroid(d)})`) .call(text => text .append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .style('fill', 'white') .text(d => d.date) ) .call(text => text .filter(d => d.endAngle - d.startAngle > 0.25) .append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .style('fill', 'white') .text(d => d.y) ); return svg.node(); }36:Td0e,redToBlue = [ "#67001f", "#6a011f", "#6d0220", "#700320", "#730421", "#760521", "#790622", "#7b0722", "#7e0823", "#810923", "#840a24", "#870b24", "#8a0c25", "#8c0d26", "#8f0f26", "#921027", "#941127", "#971228", "#9a1429", "#9c1529", "#9f172a", "#a1182b", "#a41a2c", "#a61c2d", "#a81d2d", "#aa1f2e", "#ad212f", "#af2330", "#b12531", "#b32732", "#b52933", "#b72b34", "#b82e35", "#ba3036", "#bc3238", "#be3539", "#bf373a", "#c13a3b", "#c33c3d", "#c43f3e", "#c6413f", "#c74441", "#c94742", "#ca4943", "#cc4c45", "#cd4f46", "#ce5248", "#d0544a", "#d1574b", "#d25a4d", "#d45d4e", "#d56050", "#d66252", "#d86554", "#d96855", "#da6b57", "#db6d59", "#dd705b", "#de735d", "#df755f", "#e07861", "#e17b63", "#e27d65", "#e48067", "#e58369", "#e6856b", "#e7886d", "#e88b6f", "#e98d71", "#ea9073", "#eb9276", "#ec9578", "#ed977a", "#ee9a7c", "#ee9c7f", "#ef9f81", "#f0a183", "#f1a486", "#f2a688", "#f2a88b", "#f3ab8d", "#f4ad90", "#f4af92", "#f5b295", "#f5b497", "#f6b69a", "#f6b89c", "#f7ba9f", "#f7bda1", "#f8bfa4", "#f8c1a6", "#f8c3a9", "#f9c5ab", "#f9c7ae", "#f9c9b0", "#facab3", "#faccb5", "#faceb8", "#fad0ba", "#fad2bc", "#fad3bf", "#fad5c1", "#fbd7c4", "#fbd8c6", "#fbdac8", "#fbdbca", "#fbddcc", "#fadecf", "#fae0d1", "#fae1d3", "#fae2d5", "#fae3d7", "#fae5d8", "#fae6da", "#f9e7dc", "#f9e8de", "#f9e9e0", "#f8eae1", "#f8eae3", "#f7ebe4", "#f7ece6", "#f6ede7", "#f6ede8", "#f5eee9", "#f4eeeb", "#f4efec", "#f3efed", "#f2efed", "#f1efee", "#f0f0ef", "#eff0f0", "#eef0f0", "#edf0f1", "#eceff1", "#ebeff1", "#eaeff2", "#e9eff2", "#e7eef2", "#e6eef2", "#e5edf2", "#e3edf2", "#e2ecf2", "#e0ecf2", "#dfebf2", "#ddeaf2", "#dbeaf1", "#dae9f1", "#d8e8f1", "#d6e7f0", "#d4e6f0", "#d3e6f0", "#d1e5ef", "#cfe4ef", "#cde3ee", "#cbe2ee", "#c9e1ed", "#c7e0ed", "#c5dfec", "#c2ddec", "#c0dceb", "#bedbea", "#bcdaea", "#bad9e9", "#b7d8e8", "#b5d7e8", "#b2d5e7", "#b0d4e6", "#aed3e6", "#abd1e5", "#a9d0e4", "#a6cfe3", "#a3cde3", "#a1cce2", "#9ecae1", "#9cc9e0", "#99c7e0", "#96c6df", "#93c4de", "#91c3dd", "#8ec1dc", "#8bc0db", "#88beda", "#85bcd9", "#83bbd8", "#80b9d7", "#7db7d7", "#7ab5d6", "#77b3d5", "#74b2d4", "#71b0d3", "#6faed2", "#6cacd1", "#69aad0", "#66a8cf", "#64a7ce", "#61a5cd", "#5ea3cc", "#5ba1cb", "#599fca", "#569dc9", "#549bc8", "#5199c7", "#4f98c6", "#4d96c5", "#4b94c4", "#4892c3", "#4690c2", "#448ec1", "#428cc0", "#408bbf", "#3e89be", "#3d87bd", "#3b85bc", "#3983bb", "#3781ba", "#3680b9", "#347eb7", "#337cb6", "#317ab5", "#3078b4", "#2e76b2", "#2d75b1", "#2c73b0", "#2a71ae", "#296fad", "#286dab", "#266baa", "#2569a8", "#2467a6", "#2365a4", "#2164a2", "#2062a0", "#1f609e", "#1e5e9c", "#1d5c9a", "#1b5a98", "#1a5895", "#195693", "#185490", "#17528e", "#164f8b", "#154d89", "#134b86", "#124983", "#114781", "#10457e", "#0f437b", "#0e4178", "#0d3f75", "#0c3d73", "#0a3b70", "#09386d", "#08366a", "#073467", "#063264", "#053061" ]37:T4a5,curveChart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // All that axis stuff svg.append("g").call(positionXAxis); svg.append("g").call(curveYAxis); // title! svg .append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "22px") .style("text-decoration", "underline") .text("Seattle Daily Temperature Range"); // x-axis label svg .append("text") .attr("x", width / 2) .attr("y", height) .style("font-size", "16px") .style("text-anchor", "middle") .text("Date"); //Create Y axis label svg .append("text") .attr("x", (height / 2) * -1) .attr("y", margin.left - 27) .style("text-anchor", "middle") .style("font-size", "16px") .attr("transform", "rotate(-90)") .text("Temperature (°F)"); // Min svg .append('path') .datum(data) .attr('d', lineGeneratorMin(curvyData)) .attr('stroke', 'blue') .attr('fill', 'none'); // Max svg .append('path') .datum(data) .attr('d', lineGeneratorMax(curvyData)) .attr('stroke', 'red') .attr('fill', 'none'); return svg.node(); }38:T410,curveDifferenceAlt = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // All that axis stuff svg.append("g").call(positionXAxis); svg.append("g").call(curveYAxisAlt); // title! svg .append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "22px") .style("text-decoration", "underline") .text("Seattle Daily Temperature Range"); // x-axis label svg .append("text") .attr("x", width / 2) .attr("y", height) .style("font-size", "16px") .style("text-anchor", "middle") .text("Date"); //Create Y axis label svg .append("text") .attr("x", (height / 2) * -1) .attr("y", margin.left - 27) .style("text-anchor", "middle") .style("font-size", "16px") .attr("transform", "rotate(-90)") .text("Temperature (°F)"); svg .append('path') .datum(data) .attr('d', lineGeneratorAlt(curvyData)) .attr('stroke', 'blue') .attr('fill', 'none'); return svg.node(); }39:[{"id":"74aef2dc4ca9f68ca81a66c30b141a1969711185d4aebe69b5b6d39fe04b8a7a300e6e771138657b054fdc90dae3fbbbb7f54b6b4e078c401677e95141645844","href":"https://static.observableusercontent.com/files/74aef2dc4ca9f68ca81a66c30b141a1969711185d4aebe69b5b6d39fe04b8a7a300e6e771138657b054fdc90dae3fbbbb7f54b6b4e078c401677e95141645844","name":"seattle-weather.csv","type":"text/csv","lastModified":1587949057327.871,"size":48219}] 2f:{"title":"Graphical Encodings - Avalani","cells":[{"id":0,"value":"md`# Graphical Encodings - Avalani`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"summary = md`In this notebook, you will learn about best practices for **graphically encoding** your data through the following steps: \n1. Carefully reading the seminal Cleveland and McGill Paper _Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods_, which you need to access through [Canvas](https://canvas.uw.edu/courses/1370850/files/folder/papers)\n2. Demonstrating your understanding of the theories by creating graphics and explaining the perceptual accuracy of the selected encodings (using dataset(s) of your choice).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"set_up = md`## Set up `","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"displayCaution(\n \"Make sure you fork and rename this notebook before continuing!\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`To create a notebook for your assignment, please do the following (see [this notebook](https://observablehq.com/@info474/creating-assignments?collection=@info474/teaching-process) for more details on each step):\n

**Fork Assignment**: You should fork this assignment (make sure to fork it _within_ the Team). _Do not_ edit this notebook before forking it

**Rename Assignment**: Add your last name to the assignment name by changing the header cell value (e.g., to _Graphical Encodings Freeman_)

**Add Assignment to Collection**: add the assignment to the [appropriate collection](https://observablehq.com/collection/@info474/graphical-encoding-assignments)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"reading_responses = md`## Reading Responses\nAfter **carefully** reading the academic paper linked above, answer the following questions (please use Markdown to provide a clear structure to your answers -- feel free to edit the question cells themselves, or create new cells as you see fit):\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"md`- In your own words, describe _what they did_ in the study to assess the perceptual accuracy of different encodings (e.g., what did they ask, and of whom?)?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"md`In order to study the perceptual accuracy of different encodings the authors of this study conducted a few different experiments, in which they took different groups of people with varying levels of technical experience (which they determined from the results made no substantial difference) and presented them with packets of graphs, and asked them to choose which one represented the larger amount of data. They split these into several different experiments based off of the different types of _elementary perctual tasks_ they were looking to study. For example, they had one experiment to try and ascertain which task, position or length, was more effective.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`- Do you see any limitations to this study design (i.e., do you have any concerns about basing your visualizations on the results of the study)?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"md`- The paper argues that cartesian graphs (scatter plots) are powerful for reasons beyond the fact that they allow us to encode two variables (e.g., \\`x\\` and \\`y\\`) using a position encoding. What additional information are we able to extract from a scatter plot, and which _elementary perceptual task_ enables us to do this?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"md`A great quote from the paper I think helps summarize the power of graphs nicely: \n> The power of a graph is its ability to enable one to take in the quantitative information, or- ganize it, and see patterns and structure not readily re- vealed by other means of studying the data.\n\nSpecifically for cartesian graphs, we get to see this relationship between X and Y quite nicely, due to the helpful assistance of the elementary perceptual task of _position_.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"md`### Position Graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"positionXDomain = [d3.min(data, d => d.date), d3.max(data, d => d.date)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"positionYDomain = [d3.min(data, d => d.y), d3.max(data, d => d.y)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"positionX = d3\n .scaleTime()\n .domain(positionXDomain)\n .range([margin.left, width - margin.right])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"positionY = d3\n .scaleLinear()\n .domain(positionYDomain)\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"positionXAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(positionX))","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"positionYAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(positionY))","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"md`### Length Graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"lengthX = d3\n .scaleTime()\n .domain(positionXDomain)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"lengthXAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(lengthX))","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"lengthY = d3\n .scaleLinear()\n .domain(positionYDomain)\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"lengthYAxis = g =>\n g.attr(\"transform\", `translate(${margin.left},0)`).call(d3.axisLeft(lengthY))","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"md`### Angle Graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"arc = d3\n .arc()\n .innerRadius(0)\n .outerRadius(Math.min(width, height) / 2 - 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"nestedData = d3\n .nest()\n .key(d => d.date.slice(5, 7)) // Group by month\n .entries(rawData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"angleData = nestedData.map(d => {\n return {\n x: Number(d.key),\n y: d3.mean(d.values, x => x.temp_max * 1.8 + 32)\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"arcLabel = {\n const radius = (Math.min(width, height) / 2) * 0.8;\n return d3\n .arc()\n .innerRadius(radius)\n .outerRadius(radius);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"md`_(I cannot get stupid labels on this pie chart for the life of me. Just pretend it's there pls)_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"md`### Color Graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"colorScale = d3\n .scaleLinear()\n .domain(data.map(d => d.y))\n .range(redToBlue)","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"colorX = d3\n .scaleLinear()\n .domain(positionYDomain)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"legend({\n color: d3.scaleSequential(positionYDomain, d3.interpolateRdBu),\n title: \"Daily Max Temperature in °F\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"colorChart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n // title!\n svg\n .append(\"text\")\n .attr(\"x\", width / 2)\n .attr(\"y\", 30)\n .attr(\"text-anchor\", \"middle\")\n .style(\"font-size\", \"22px\")\n .style(\"text-decoration\", \"underline\")\n .text(\"Seattle Max Daily Temperature Spread\");\n\n svg\n .append(\"g\")\n .selectAll(\"circle\")\n .data(data.slice(0, 300))\n .join(\"circle\")\n .attr(\"cx\", d => colorX(d.y)) // apply that good good scale\n .attr(\"cy\", height / 2)\n .attr(\"r\", 5)\n .style(\"opacity\", \"0.5\")\n\n .style(\"fill\", d => colorScale(d.y)); // color according to color var\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"curve_difference = md`## Curve Difference Charts\nThe paper introduces curve difference charts as a way of evaluating differences over time. However, there are many perceptual limitations to estimating the underlying values of the chart. In the section below, you should:\n- Describe limitations to the curve difference chart\n- Build a curve difference chart using D3 and a dataset of your choice (you may need to use different data than the example above, or a different subset of your data)\n- Build a D3 _alternative_ to your curve difference chart, and describe any differences you observe (_hint: the paper proposes some alternatives!_)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"md`### Limitations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"md`They're not great it seems. The paper talks about how it's super difficult to accurately judge length when viewing a curve-difference chart. They say it's even more difficult than judging length in a divided bar chart and their experiments show it's not great.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"curvyData = rawData.map(d => {\n return {\n date: new Date(d.date),\n max: Number(d.temp_max * 1.8 + 32), // Convert from celcius back into freedom units\n min: Number(d.temp_min * 1.8 + 32),\n dif: Number(d.temp_max * 1.8 + 32) - Number(d.temp_min * 1.8 + 32)\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"md`### Curve-Difference Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"curveYDomain = [d3.min(curvyData, d => d.min), d3.max(curvyData, d => d.max)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"curveY = d3\n .scaleLinear()\n .domain(curveYDomain)\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"curveYAxis = g =>\n g.attr(\"transform\", `translate(${margin.left},0)`).call(d3.axisLeft(curveY))","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"lineGeneratorMin = d3\n .line()\n .x(d => positionX(d.date)) // .x -> x values to use for line\n .y(d => curveY(d.min)) // .y -> y values to use for line","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"lineGeneratorMax = d3\n .line()\n .x(d => positionX(d.date)) // .x -> x values to use for line\n .y(d => curveY(d.max)) // .y -> y values to use for line","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"md`### Curve-Difference Alternative`","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"curveYDomainAlt = [d3.min(curvyData, d => d.dif), d3.max(curvyData, d => d.dif)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"curveYAxisAlt = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(curveYAlt))","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"curveYAlt = d3\n .scaleLinear()\n .domain(curveYDomainAlt)\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"lineGeneratorAlt = d3\n .line()\n .x(d => positionX(d.date)) // .x -> x values to use for line\n .y(d => curveYAlt(d.dif)) // .y -> y values to use for line","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"md`### Differences`","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"md`The alternative proposed by the authors was just a cartesian graph, the one they presented being just a simple line graph. I think this is a lot easier to read, even if it's a lot less exciting to look at. I feel like if you're trying to get real information, this is the better way to go.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"feedback = md`## Feedback\nIn the cell below, please let us know which pieces of the assignment you found particularly challenging, and if you had any issues specific to working with the Observable platform.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"import { displayCaution } from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"rawData = d3.csvParse(await FileAttachment(\"seattle-weather.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"data = rawData.map(d => {\n return {\n date: new Date(d.date),\n y: Number(d.temp_max * 1.8 + 32) // Convert from celcius back into freedom units\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"margin = ({ top: 50, right: 30, bottom: 30, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}