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:T423,chart2 = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append('text', 'label'); svg.append("text") .attr("x", width / 2) .attr("y", height) .text("Date") .style("font-size", "20px") svg.append("text") .attr("transform", "translate(10, 300) rotate(-90)") .text("Temperature") .style("font-size", "20px") svg.append("text") .attr("x", width / 3) .attr("y", 15) .text("Daily Temperatures in Seattle in 2017") .style("font-size", "20px") svg .selectAll('.rect') .data(data_array) .join(enter => enter.append("rect")) .attr("x", d => x_scale(d.x)) .attr("y", d => y_scale(d.y)) .attr("transform", "translate(10, -margin.bottom)") .attr('width', 5) .attr("height", d => y_scale(0) - y_scale(d.y) - 275) .attr('fill', "none") .attr("stroke-width", "1px") .attr("stroke", "black") .attr('opacity', 0.3) return svg.node(); } 33:[{"id":"fda6c5cef182d488eb20f3ccf859892b7d36a9858c1d6c338cf80b472f73f02e982580b9cdcdd5cfc03740fee21cea2acc125a361f86e53cfbec1138ec954a05","href":"https://static.observableusercontent.com/files/fda6c5cef182d488eb20f3ccf859892b7d36a9858c1d6c338cf80b472f73f02e982580b9cdcdd5cfc03740fee21cea2acc125a361f86e53cfbec1138ec954a05","name":"SeattleWeather2017.csv","type":"text/csv","lastModified":1588033071620.183,"size":10084}] 2f:{"title":"Graphical Encodings","cells":[{"id":0,"value":"md`# Graphical Encodings`","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\nIn this study, they defined the specific tasks which people perform when interpreting a visual graphic. They define the visual encodings by position, direction, color, height, volume, among others. They order these tasks from most to least useful, in creating a visually salient graphic.`","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\nIt seems that defining the effectiveness of different methods of visualizing quantitative information can be slightly subjective. Also, many of these encodings work in combination with one another to convey meaning in graphics.`","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\nWe are able to interpret a directional encoding. Our eyes have the ability to visually interpret slope in terms of the directional relationships between points. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"data = d3.csvParse(await FileAttachment(\"SeattleWeather2017.csv\").text(), d3.autoType)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"data_array = data.map(function(day) {\n // let color = 'red'\n // if(day.Rain = 'TRUE') {\n // color = 'blue'\n // }\n return {\n x: day.Date,\n y: day.TempMax,\n color: colorConvert(day.Rain)\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"function colorConvert(boolean) {\n if(boolean == 'TRUE') {\n return 'red'; \n }\n return 'blue';\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"date_range = [d3.min(data_array, d => d.x), d3.max(data_array, d => d.x)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"temp_range = [d3.min(data_array, d => d.y), d3.max(data_array, d => d.y)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"width = 954","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"margin = ({top: 40, right: 40, bottom: 40, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"x_scale = d3.scaleTime()\n .domain(date_range)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"y_scale = d3.scaleLinear()\n .domain(temp_range)\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"xAxis = g => g \n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x_scale))","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y_scale))","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"position_chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n svg.append(\"g\")\n .call(xAxis);\n svg.append(\"g\")\n .call(yAxis);\n \n svg.append(\"text\")\n .attr(\"x\", width / 2)\n .attr(\"y\", height)\n .text(\"Date\")\n .style(\"font-size\", \"20px\")\n \n svg.append(\"text\")\n .attr(\"transform\", \"translate(10, 300) rotate(-90)\")\n .text(\"Temperature\")\n .style(\"font-size\", \"20px\")\n \n svg.append(\"text\")\n .attr(\"x\", width / 3)\n .attr(\"y\", 15)\n .text(\"Daily Temperatures in Seattle in 2017\")\n .style(\"font-size\", \"20px\")\n \n svg\n .selectAll('circle')\n .data(data_array)\n .join(enter => enter.append(\"circle\"))\n .attr('cx', d => x_scale(d.x))\n .attr('cy', d => y_scale(d.y))\n .attr('r', 5)\n .attr('opacity', 0.3)\n\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"md `In this chart, the positional relationship between points is extremely apparent. This is a useful way to envision the raise in temperature over the course of a year, as there is a clear correlation with a distinct spike. If there was less of a correllation, and we are trying to highlight a specific point, and length encoding may be more useful.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"color_chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n svg.append(\"g\")\n .call(xAxis);\n svg.append(\"g\")\n .call(yAxis);\n svg.append(\"text\")\n .attr(\"x\", width / 2)\n .attr(\"y\", height)\n .text(\"Date\")\n .style(\"font-size\", \"20px\")\n \n svg.append(\"text\")\n .attr(\"transform\", \"translate(10, 300) rotate(-90)\")\n .text(\"Temperature\")\n .style(\"font-size\", \"20px\")\n \n svg.append(\"text\")\n .attr(\"x\", width / 3)\n .attr(\"y\", 15)\n .text(\"Daily Temperatures in Seattle in 2017\")\n .style(\"font-size\", \"20px\")\n \n svg\n .selectAll('circle')\n .data(data_array)\n .join(enter => enter.append(\"circle\"))\n .attr('cx', d => x_scale(d.x))\n .attr('cy', d => y_scale(d.y))\n .attr('r', 5)\n .attr('fill', d => d.color)\n .attr('opacity', 0.3)\n\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"md `The color encoding in this chart is useful in interpreting the presence of rain year round in Seattle. It allows us to see not only what percentage of days it rained, but how these days are distributed across the year. If we are concerned with merely the number and not the distribution, a length encoding would suffice.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":426,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"md `the length encoding in this chart allows for us to observe a clear spike in temperature. This conveys similarly in terms of effectiveness to the position graph, as they highlight the high point in the same way. However, this may be more effective to use in breaking close ties, or showing a grastive difference of one observation.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"days_rained = data.map(function(day) {\n if(day.Rain == 'TRUE') {\n return 1; \n }\n return 0;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"rainy_days = {\n let runningTotal = 0;\n for(let i=0; i d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"arc = d3.arc()\n .innerRadius(0)\n .outerRadius(Math.min(width, height) / 2 - margin.top)","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"color = d3.scaleOrdinal()\n .domain(rainy_days.map(d => d.key))\n .range([\"#98abc5\", \"#8a89a6\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"pie_chart = {\n const arcs = pie(rainy_days)\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height])\n //viewbox attr?\n \n svg\n .append('g')\n .attr('stroke', 'black')\n .selectAll(\"path\")\n .data(arcs)\n .join(\"path\")\n .attr(\"fill\", d => color(d.key))\n .attr(\"d\", arc)\n \n svg\n .selectAll('mySlices')\n .data(arcs)\n .enter()\n .append('text')\n .text(function(d){ return d.data.key})\n .attr(\"transform\", function(d) { return \"translate(\" + arc.centroid(d) + \")\"; })\n .style(\"text-anchor\", \"middle\")\n .style(\"font-size\", 17)\n \n svg\n .append(\"text\")\n .attr(\"x\", -width / 2)\n .attr(\"y\", -250)\n .text(\"Did it rain most days in Seattle during 2017?\")\n .style(\"font-size\", \"20px\")\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"md`This chart is effective in comparing the difference between two variables. If the angle is 180 degrees, they two vairables are equal. However, in comparing any higher number of observations, it becomes visually challenging.`","pinned":true,"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":388,"value":"line_data = d3.nest()\n .key(d => d.color)\n .entries(data_array)","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"lineGenerator = d3\n .line()\n .x(d => x_scale(d.x)) // .x -> x values to use for line\n .y(d => y_scale(d.y)) // .y -> y values to use for line","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"md `The limitations of a curve difference chart is that it is challenging for the viewer to actually understand which line is indicated as what in describing the difference between two factors. `","pinned":true,"hidden":false,"mode":"ojs"},{"id":393,"value":"line_chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n svg.append(\"g\")\n .call(xAxis);\n svg.append(\"g\")\n .call(yAxis);\n\n svg.selectAll(\"path\")\n .data(line_data)\n .join(\"path\")\n .attr(\"d\", d => lineGenerator(d.values))\n .attr(\"fill\", \"blue\")\n .attr(\"stroke-width\", \"1px\")\n .attr(\"stroke\", \"blue\")\n .attr(\"opacity\", 0.3)\n \n svg.append(\"text\")\n .attr(\"x\", width / 2)\n .attr(\"y\", height)\n .text(\"Date\")\n .style(\"font-size\", \"20px\")\n \n svg.append(\"text\")\n .attr(\"transform\", \"translate(10, 300) rotate(-90)\")\n .text(\"Temperature\")\n .style(\"font-size\", \"20px\")\n \n svg.append(\"text\")\n .attr(\"x\", width / 3)\n .attr(\"y\", 15)\n .text(\"Daily Temperatures in Seattle in 2017\")\n .style(\"font-size\", \"20px\")\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"line_chart2 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n svg.append(\"g\")\n .call(xAxis);\n svg.append(\"g\")\n .call(yAxis);\n\n svg.selectAll(\"path\")\n .data(line_data)\n .join(\"path\")\n .attr(\"d\", d => lineGenerator(d.values))\n .attr(\"fill\", \"none\")\n .attr(\"stroke-width\", \"1px\")\n .attr(\"stroke\", \"blue\")\n .attr(\"opacity\", 0.3)\n \n svg.append(\"text\")\n .attr(\"x\", width / 2)\n .attr(\"y\", height)\n .text(\"Date\")\n .style(\"font-size\", \"20px\")\n \n svg.append(\"text\")\n .attr(\"transform\", \"translate(10, 300) rotate(-90)\")\n .text(\"Temperature\")\n .style(\"font-size\", \"20px\")\n \n svg.append(\"text\")\n .attr(\"x\", width / 3)\n .attr(\"y\", 15)\n .text(\"Daily Temperatures in Seattle in 2017\")\n .style(\"font-size\", \"20px\")\n \n return svg.node();\n}","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}