31: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.)`32:T4d7,ScatterPlot2 = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("g") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("fill", "none") .selectAll("circle") .data(Letters) .join("circle") .attr("cx", d => x2(d.Number)) .attr("cy", d => y(d.Amount)) .attr("r", 3); svg .append("path") .datum(Letters) .attr("fill", "none") .attr('stroke-opacity', 0.3) .attr("stroke", "#568203") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg .append("g") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("fill", "none") .selectAll("circle") .data(Letters2) .join("circle") .attr("cx", d => x2(d.Number)) .attr("cy", d => y(d.Amount)) .attr("r", 3); svg .append("path") .datum(Letters2) .attr("fill", "none") .attr('stroke-opacity', 0.3) .attr("stroke", "#568203") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg.append("g").call(x2Axis); svg.append("g").call(yAxis); return svg.node(); }33:[{"id":"175724e62faa917692bba3b1a1ad453a31d7e4470de72d5169fca7b3108ba2679cef4f28b19fb894a94aab2139b9ee2a98a84b4257452d7def40ca8f36b462bc","href":"https://static.observableusercontent.com/files/175724e62faa917692bba3b1a1ad453a31d7e4470de72d5169fca7b3108ba2679cef4f28b19fb894a94aab2139b9ee2a98a84b4257452d7def40ca8f36b462bc","name":"GlobalFirePower.csv","type":"text/csv","lastModified":1589218913449.265,"size":30094}] 2f:{"title":"Graphical Encodings Vo","cells":[{"id":0,"value":"md`# Graphical Encodings Vo`","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?)? \n \n People were shown many different types of graphs and were asked simple questions such as \"which bar is bigger?\", but got more difficult as the instructions switched to things like making \"on-the-fly\" measurements.`","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)? \n \n For me personally, I felt as though the results of the experiment fell on deaf ears. I have never felt a need to go this deep into a theory I may never touch in my visualization-making.`","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? \n \n The understanding of how x and y relate to one another is able to be extracted from a scatterplot, due the the task of judging directions.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"Letters = [\n new Object({ Letter: \"A\", Number: 1, Amount: 456932 }),\n new Object({ Letter: \"E\", Number: 5, Amount: 567811 }),\n new Object({ Letter: \"I\", Number: 9, Amount: 356120 }),\n new Object({ Letter: \"O\", Number: 15, Amount: 594100 }),\n new Object({ Letter: \"U\", Number: 21, Amount: 398007 })\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"Letters2 = [\n new Object({ Letter: \"A\", Number: 1, Amount: 355781 }),\n new Object({ Letter: \"E\", Number: 5, Amount: 459870 }),\n new Object({ Letter: \"I\", Number: 9, Amount: 256127 }),\n new Object({ Letter: \"O\", Number: 15, Amount: 459001 }),\n new Object({ Letter: \"U\", Number: 21, Amount: 297041 })\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"Letters3 = [\n new Object({\n Letter: \"A\",\n Number: 1,\n Amount: Letters[0].Amount - Letters2[0].Amount\n }),\n new Object({\n Letter: \"E\",\n Number: 5,\n Amount: Letters[1].Amount - Letters2[1].Amount\n }),\n new Object({\n Letter: \"I\",\n Number: 9,\n Amount: Letters[2].Amount - Letters2[2].Amount\n }),\n new Object({\n Letter: \"O\",\n Number: 15,\n Amount: Letters[3].Amount - Letters2[3].Amount\n }),\n new Object({\n Letter: \"U\",\n Number: 21,\n Amount: Letters[4].Amount - Letters2[4].Amount\n })\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"BarChart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .attr(\"fill\", color)\n .selectAll(\"rect\")\n .data(Letters)\n .join(\"rect\")\n .attr(\"x\", (d, i) => x(i))\n .attr(\"y\", d => y(d.Amount))\n .attr(\"height\", d => y(0) - y(d.Amount))\n .attr(\"width\", x.bandwidth());\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n svg\n .append(\"text\")\n .text(\"Letter\")\n .attr(\"transform\", `translate(${width / 2}, +325)`);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"md`This is a bar chart of vowels with random frequencies assigned to them. Miniscule comparisons if the numbers are really close to another are hard to differentiate in this example. However, large differences in numbers are easily visible.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"ScatterPlot = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", \"none\")\n .selectAll(\"circle\")\n .data(Letters)\n .join(\"circle\")\n .attr(\"cx\", d => x2(d.Number))\n .attr(\"cy\", d => y(d.Amount))\n .attr(\"r\", 3);\n\n svg.append(\"g\").call(x2Axis);\n\n svg.append(\"g\").call(yAxis);\n\n svg\n .append(\"path\")\n .datum(Letters)\n .attr(\"fill\", \"none\")\n .attr('stroke-opacity', 0.3)\n .attr(\"stroke\", \"#568203\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"md`This shows what position the letter is in the alphabet relative to the number in the array above. The positions might give a correlation of if the higher the letter's positions, the more it's used or the opposite.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"line(Letters)","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"line(Letters2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"line = d3\n .line()\n .defined(d => !isNaN(d.Amount))\n .x(d => x2(d.Number))\n .y(d => y(d.Amount))","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"x2 = d3\n .scaleLinear()\n .domain([0, 26])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"yAxis = g =>\n g.attr(\"transform\", `translate(${margin.left},0)`).call(d3.axisLeft(y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"xAxis = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(x)\n .tickFormat(i => Letters[i].Letter)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"x2Axis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"x = d3\n .scaleBand()\n .domain(d3.range(Letters.length))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(Letters, d => d.Amount)])\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"y2Axis = g =>\n g.attr(\"transform\", `translate(${margin.left},0)`).call(d3.axisLeft(y2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":480,"value":"y2 = d3\n .scaleLinear()\n .domain([0, d3.max(Letters3, d => d.Amount)])\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"color = 'Purple'","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"gamesLegend","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"md`For this one I am combining both color and angle, due to the duality of this pie chart. This pie chart shows the top 16 games, based on number of copies shipped, along with its critic score. The color encoding does not seem as easily readable due to the fact that people's eyes have to shift back and forth from the legend and the chart. However, each game's piece of the pie is easy to read as the number of copies on the chart makes it easier for the viewer to tell the difference between sizes.`","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 \n The differences of the curves are being interpreted as the distance of the curves between different regions of the curves and not the vertical distance between them. Also, if the two lines are close to each other, it is hard to see any difference between the two. My alternative was the make a grpah containing a line that was the difference between the 2.\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\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":460,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"ScatterPlot3 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", \"none\")\n .selectAll(\"circle\")\n .data(Letters3)\n .join(\"circle\")\n .attr(\"cx\", d => x2(d.Number))\n .attr(\"cy\", d => y2(d.Amount))\n .attr(\"r\", 3);\n\n svg.append(\"g\").call(x2Axis);\n\n svg.append(\"g\").call(y2Axis);\n\n svg\n .append(\"path\")\n .datum(Letters3)\n .attr(\"fill\", \"none\")\n .attr('stroke-opacity', 0.3)\n .attr(\"stroke\", \"#568203\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line2);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"line2 = d3\n .line()\n .defined(d => !isNaN(d.Amount))\n .x(d => x2(d.Number))\n .y(d => y2(d.Amount))","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":222,"value":"csv = d3.csvParse(await FileAttachment(\"GlobalFirePower.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"import { displayCaution } from \"@info474/utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"import { chart } from \"@info474/d3-foundations-vo\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"import { gamesLegend } from \"@info474/d3-foundations-vo\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"import { y_arrayTop10 } from \"@info474/d3-foundations-vo\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"boxWidth = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"width = 400 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"height = 400 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"center = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"margin = ({ top: 25, right: 20, bottom: 40, left: 60 })","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}