31:T4e9,md`1. *To assess the perceptual accuract of different encodings, the researchers conducted two different experiments. In the first experiment, they asked each of the 55 subjects to look at 5 types of divided or grouped bar charts. They were specifically tasked with looking at two divisions or bars on each graph and making a judgement about how much smaller the smaller was of the larger (in percentage). The second experiment was similar, conducted with 54 subjects, who judged pie charts against bar charts.* 2. *It seems like the experiments they conducted did not cover the entire range of elementary perceptual tasks they proposed, so I would be curious as to how they extrapolated rankings for those. The article did mention that they used their own intuition with some if they seemed very obvious, but I would believe it more if they conducted experiments just to make sure. Additionally, their proposal of framed rectangle charts was not any easier for me to interpret than the basic rectangle -- I could not tell just by looking at it that the frames were the same size.* 3. *We are also able to extract a third, x variable from a scatter plot which can be encoded through area. The elementary perceptual task used in this is perception of area.*`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:Td9e,chart = { const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]); svg.append('g').call(population_axis); svg.append('g').call(cases_axis); svg .append('text') .text('Date') .call(xLabel); svg .append('text') .text('Cases') .call(yLabel); if (chartType == 'triple scatterplot') { svg.selectAll('*').remove(); svg.append('g').call(population_axis); svg.append('g').call(cases_axis); svg .append('text') .text('Population') .call(xLabel); svg .append('text') .text('Cases') .call(yLabel); const selection = svg.selectAll('circle'); const circles = selection.data(cd1); circles.join(enter => enter .append('circle') .attr('fill', d => deaths_scale2(d.deaths)) .style('opacity', 0.3) .attr('r', d => Math.log(d.deaths)) .attr('cx', d => population_scale(d.population)) .attr('cy', d => cases_scale(d.cases)) ); } else if (chartType == 'bar chart') { svg.selectAll('*').remove(); svg.append('g').call(population_avg); svg.append('g').call(cases_axis); svg .append('text') .text('Population') .call(xLabel); svg .append('text') .text('Cases') .call(yLabel); const selection = svg.selectAll('.bar'); const bars = selection.data(avgs); bars.join(enter => enter .append('rect') .attr('fill', d => deaths_scale(d.avgdeaths)) .attr('x', d => scaleBand2(d.pop)) .attr('y', d => cases_scale(d.avgcases)) .attr('width', scaleBand2.bandwidth()) .attr('height', d => cases_scale(1) - cases_scale(d.avgcases)) ); } else if (chartType == 'pie chart') { svg.selectAll('*').remove(); const arcs = pie(cd1); const slices = svg .append('g') .selectAll('path') .data(arcs) .join('path') .attr('transform', `translate(${width / 2}, ${height / 2})`) .attr('fill', d => pop_colors(d.data.population)) .attr('d', arc) .append('title') .text(d => `${d.data.country}: ${d.data.cases.toLocaleString()}`); svg .append('g') .attr('text-anchor', 'middle') .selectAll('text') .data(arcs) .join('text') .attr('transform', d => `translate(${arcLabel.centroid(d)})`) .call(text => text .filter(d => d.endAngle - d.startAngle > 0.25) .append('tspan') .attr('x', width / 2) .attr('y', height / 2) .text(d => d.data.country) ) .call(text => text .filter(d => d.endAngle - d.startAngle > 0.25) .append('tspan') .attr('x', width / 2) .attr('y', height / 2 + 20) .text(d => d.data.cases.toLocaleString() + ' cases') ); } else { svg.selectAll('*').remove(); svg.append('g').call(population_axis); svg.append('g').call(cases_axis); svg .append('text') .text('Population') .call(xLabel); svg .append('text') .text('Cases') .call(yLabel); const selection = svg.selectAll('circle'); const circles = selection.data(cd1); circles.join(enter => enter .append('circle') .attr('fill', 'red') .style('opacity', 0.5) .attr('r', 5) .attr('cx', d => population_scale(d.population)) .attr('cy', d => cases_scale(d.cases)) ); } return svg.node(); }34:T9d7,html`

Chart	Encoding
Triple Scatterplot	This chart displays population, cases, and deaths. Population is encoded in position along the x-axis, cases are encoded in position along the y-axis, and deaths are encoded in the area of the circles as well as their color. Additionally, a relationship between population and cases is indicated by the direction of the circles, as is a weak relationship betweem population, cases, and deaths. This encoding is fairly accurate: position along a common scale is the easiest perceptual task. However, direction and area are more difficult to interpret, and accuracy is likely lower for these tasks.
Bar Chart	This chart also display population, cases, and deaths. Population is encoded in position along the x-axis through "buckets". However, it is likely some data was lost in the aggregation. Cases are encoded in position along the y-axis as well as length of the bar, and deaths are encoded in the color of the bars. This encoding is less accurate -- although it is easy to interpret position along common scales, it is very difficult to see the differences in color between the bars. Additionally, since these are aggregates, it is more difficult to see any relationship betwene the variables.
Pie Chart	This chart is only able to display number of cases and population. The number of cases per country compared to the total number of cases is encoded in the angle of the slice, and the population is encoded in the color of the slices. This encoding is not very accurate -- it is quite difficult to interpret the angles of various slices and compare them to each other, especially with smaller slices. Additionally, we can tell that the brighter colored slices have a relatively larger population, but we don't know anything about the values without the lables. It is almost impossible to see any relationships here, especially since some of the smallest slices seem to be brightly colored as well.
Scatterplot	This chart displays only population and cases as well. The values of both are encoded in their position along their respective axes, and this is arguably the easiest graph to read. A general idea of the values is easily available from the position and axis labels, and a weak positive relationship is evident between population and cases.

`35:T467,chart3 = { const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]); let x_domain = d3.extent(date.map(d => d.date)); let x = d3 .scaleTime() .domain(x_domain) .range([margin.left, width - margin.right]); let xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x)); let y_domain = d3.extent(date.map(d => d.diff)); let y = d3 .scaleLinear() .domain(y_domain) .range([height - margin.bottom, margin.top]); let yAxis = g => g.attr('transform', `translate(${margin.left}, 0)`).call(d3.axisLeft(y)); svg.append('g').call(xAxis); svg.append('g').call(yAxis); svg .append('text') .text('Date') .call(xLabel); svg .append('text') .text(`Difference in Cases (${c1} - ${c2})`) .call(yLabel); // let country1 = diff.filter(d => d.country == c1); let generateLine = d3 .line() .x(d => x(d.date)) .y(d => y(d.diff)); svg .append('path') .datum(date) .attr('d', generateLine(date)) .attr('stroke', 'red') .style('fill', 'none'); return svg.node(); }36:[{"id":"c86b799ccf81b821aaa81aa0d0b8ad6ef13feef02173b67008d5e5729b65369c4753ca8af132d07d127e6f56cac9a29c33eee1f4682d7e4ea13ab5ac6366e8e4","href":"https://static.observableusercontent.com/files/c86b799ccf81b821aaa81aa0d0b8ad6ef13feef02173b67008d5e5729b65369c4753ca8af132d07d127e6f56cac9a29c33eee1f4682d7e4ea13ab5ac6366e8e4","name":"current-data-on-the-geographic-distribution-of-covid-19-cases-worldwide.csv","type":"text/csv","lastModified":1587845489317.503,"size":447986}] 2f:{"title":"Graphical Encodings Kota","cells":[{"id":0,"value":"md`# Graphical Encodings Kota`","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":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":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":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":762,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"md`**This data contains information about coronavirus cases and deaths in various countries**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"html`Please choose a graph type to get started`","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"viewof chartType = autoSelect({\n options: ['triple scatterplot', 'bar chart', 'pie chart', 'scatterplot'],\n placeholder: \"Select a graph type...\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"$34","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":787,"value":"md`**The following graphs display the difference in coronavirus case numbers over time for two different countries**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"html`Please select your first country`","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"viewof c1 = select(_.uniqBy(cd, d => d.country).map(d => d.country))","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"html`Please select your second country. Make sure it is different from your first country.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"viewof c2 = select(_.uniqBy(cd, d => d.country).map(d => d.country))","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"md`### Curve-Difference Graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"chart2 = {\n const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]);\n svg.append('g').call(date_axis);\n svg.append('g').call(cases_axis2);\n\n svg\n .append('text')\n .text('Date')\n .call(xLabel);\n svg\n .append('text')\n .text('Cases')\n .call(yLabel);\n\n let country1 = diff.filter(d => d.country == c1);\n let generateLine = d3\n .line()\n .x(d => date_scale(d.date))\n .y(d => cases_scale2(d.cases));\n\n svg\n .append('path')\n .datum(country1)\n .attr('d', generateLine(country1))\n .attr('stroke', 'red')\n .style('fill', 'none');\n\n let country2 = diff.filter(d => d.country == c2);\n\n svg\n .append('path')\n .datum(country2)\n .attr('d', generateLine(country2))\n .attr('stroke', 'orange')\n .style('fill', 'none');\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"md`*The above graph is an example of a curve-difference graph. The limitations of this graph is that judging the vertical distance between the curves in any meaningful way is quite difficult, and we are more inclined to look at the minimum distance in various regions. It is hard to see any sort of overall relationship in the differences of case numbers.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"md`### Cartesian Difference Graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":795,"value":"md`*In looking at this graph versus the curve-differences graph, it is much easier to see the net difference and how it changes over time. We can clearly see when the first country has more or less cases than the second country and how that relationship quantitatively changes over time.*`","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":743,"value":"md`*I think the hardest part of the assignment was the amount of content we haven't learned yet. We've really only learned how to make 3 types of graphs (scatter plot, line, and bar), and yet the assignment expected us to make 5 different graphs. Additionally, we only learned how to plot one line on a line graph, so it was quite difficult to figure out how to plot multiple lines. Making the graphs also required a good deal of data wrangling including things that weren't covered in the data wrangling notebooks/lessons, like aggregation. Overall, I feel that we weren't taught the necessary skills to build the graphs asked for in this assignment. In addition, Observable is difficult to use as a platform since d3 seems to have some unique behaviors here as opposed to in plain javascript, because of which it is very hard to find online resources to help (ex. StackOverflow). We are really limited to what exists in Observable documentation which isn't a lot.*`","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":132,"value":"import { autoSelect, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"margin = ({ top: 20, right: 30, bottom: 50, left: 80 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"linedata = d3\n .nest()\n .key(d => d.country)\n .rollup(v => v.sort((a, b) => a.date - b.date))\n .entries(diff)","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"diff = cd.filter(d => d.country == c1 || d.country == c2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"date = d3\n .nest()\n .key(d => d.date)\n .entries(diff)\n .map(d => {\n var event = new Date(d.key);\n\n let da = JSON.stringify(event);\n da = da.slice(1, 11);\n let difference;\n if (d.values[1]) {\n difference = d.values[0].cases - d.values[1].cases;\n } else {\n difference = d.values[0].cases;\n }\n return {\n date: d3.timeParse('%Y-%m-%d')(da),\n diff: difference\n };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"data = d3.csvParse(\n await FileAttachment(\n \"current-data-on-the-geographic-distribution-of-covid-19-cases-worldwide.csv\"\n ).text()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"cd = data.map(d => {\n return {\n date: d3.timeParse('%Y-%m-%d')(d.daterep),\n cases: parseInt(d.cases),\n deaths: parseInt(d.deaths),\n country: d.countriesandterritories,\n population: parseInt(d.popdata2018)\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"cd1 = d3\n .nest()\n .key(d => d.country)\n .rollup(d => {\n return {\n deaths: d3.sum(d, dd => dd.deaths),\n cases: d3.sum(d, dd => dd.cases),\n population: d3.mean(d, dd => dd.population)\n };\n })\n .entries(cd)\n .map(d => {\n return {\n country: d.key,\n deaths: d.value.deaths,\n cases: d.value.cases,\n population: d.value.population\n };\n })\n .filter(d => !isNaN(d.population))","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"countries = _.uniqBy(cd.map(d => d.country))","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"avgs = d3\n .nest()\n .key(d => d.bucket)\n .rollup(d => {\n return {\n avgcases: d3.mean(d, dd => dd.cases),\n avgdeaths: d3.mean(d, dd => dd.deaths)\n };\n })\n .entries(\n cd1.map(d => {\n let bucket;\n for (let i = 0; i < buckets.length; i++) {\n if (d.population < buckets[i]) {\n bucket = buckets[i - 1];\n break;\n }\n }\n return {\n bucket: bucket,\n deaths: d.deaths,\n cases: d.cases\n };\n })\n )\n .map(d => {\n return {\n pop: parseInt(d.key),\n avgcases: parseInt(d.value.avgcases),\n avgdeaths: parseInt(d.value.avgdeaths)\n };\n })\n .filter(d => !isNaN(d.pop))","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`### Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"cases_scale = d3\n .scaleLog()\n .domain(d3.extent(cd1, d => d.cases))\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"cases_scale2 = {\n return d3\n .scaleLinear()\n .domain([d3.min(cd.map(d => d.cases)) + 10, d3.max(cd.map(d => d.cases))])\n .range([height - margin.bottom, margin.top]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"population_scale = d3\n .scaleLog()\n .domain(d3.extent(cd1, d => d.population))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"date_scale = {\n return d3\n .scaleTime()\n .domain(d3.extent(cd, d => d.date))\n .range([margin.left, width - margin.right]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"deaths_scale = d3\n .scaleSequential()\n .domain(d3.extent(avgs, d => d.avgdeaths))\n .interpolator(d3.interpolateRainbow)","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"deaths_scale2 = d3\n .scaleSequential()\n .domain(d3.extent(cd1, d => d.deaths))\n .interpolator(d3.interpolatePlasma)","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"pop_colors = d3\n .scaleSequential()\n .domain(d3.extent(cd1, d => d.population))\n .interpolator(d3.interpolateRainbow)","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"pie = d3\n .pie()\n .sort(null)\n .value(d => d.cases)","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"arc = d3\n .arc()\n .innerRadius(0)\n .outerRadius(Math.min(width, height) / 2 - 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"scaleBand2 = d3\n .scaleBand()\n .domain(buckets)\n .range([margin.left, width - margin.right])\n .paddingInner(0.2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"md`### Axes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"population_axis = g =>\n g\n .attr('transform', `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(population_scale))","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"cases_axis = g =>\n g\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(cases_scale))","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"cases_axis2 = g =>\n g\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(cases_scale2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"population_avg = g =>\n g\n .attr('transform', `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(scaleBand2).tickFormat(d3.format('.1e')))","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"date_axis = g =>\n g\n .attr('transform', `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(date_scale).tickFormat(d3.timeFormat(\"%b %d\")))","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`### Labels`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"xLabel = ele => ele.attr('x', width / 2).attr('y', height - margin.bottom + 40)","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"yLabel = ele =>\n ele\n .attr(\n 'transform',\n `translate(${margin.left - 50}, ${height / 2}) rotate(-90)`\n )\n .style('text-anchor', 'middle')","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"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":596,"value":"md`### Miscellaneous`","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"bwidth = (d3.max(cd1, d => d.population) - d3.min(cd1, d => d.population)) / n","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"n = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"buckets = {\n let arr = [d3.min(cd1, d => d.population)];\n for (let i = 1; i < n; i++) {\n arr.push(arr[i - 1] + bwidth);\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"lineGenerator = d3\n .line()\n .x(d => date_scale(d.date))\n .y(d => cases_scale2(d.cases + 10))","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}