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:Tebf,chart = { const svg = d3 .create('svg') .attr('width', width) .attr('height', 800); const yScale = d3 .scaleLinear() .domain([700, 0]) // random domain .range([30, 770]); // leave a margin of 30 on top and bottom const yAxis = d3.axisLeft().scale(yScale); // append y-axis svg .append('g') .call(jump_axis) .attr('transform', 'translate(80,0)'); // shift y-axis left 80 svg .append('text') .text('Year') .call(xLabel); svg .append('text') .text('Jump Count') .call(yLabel); svg .append('g') .call(year_axis) .attr('transform', 'translate(0, 750)'); if(chosen == "Bar Chart") { svg.selectAll('*').remove(); svg .append('text') .text('Year') .call(xLabel); svg .append('text') .text('Jump Count') .call(yLabel); // append y-axis svg .append('g') .call(jump_axis) .attr('transform', 'translate(80,0)'); // shift y-axis left 80 scaleBand.range([30, 770]); // update range for scaleBand to match our svg dimensions scaleBand.paddingInner(0.2); svg .append('g') .call(year_axis) .attr('transform', 'translate(0, 750)'); svg .selectAll('.bar') .data(Movies_data) // .join(enter => enter.append("rect")) .join("rect") .attr('x', d => year_scale(d.Year)) .attr('y', d => jump_scale(d.JumpCount)) .attr('width', scaleBand.bandwidth()) .attr('height', d =>jump_scale(0) - jump_scale(d.JumpCount)) // .attr('transform', 'translate(0,-700)') .attr('fill', 'green'); } else if (chosen == "Pie Chart") { svg.selectAll('*').remove(); svg.append('g').attr('stroke','pink') .attr("stroke-width", .1) .selectAll('path').data(pieData) .join('path') .attr('fill', d=> color(d.data.Year)) .attr('d', arc) .attr('transform', 'translate(400,400)') svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .attr('transform', 'translate(400,400)') .selectAll("text") .data(pieData) .join("text") .attr("transform", d => `translate(${arcLabel.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > .5).append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data[0])) .call(text => text.filter(d => (d.endAngle - d.startAngle) > .5).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(d => d.data[1])); } else if(chosen=="Triple Scatterplot") { svg.selectAll('*').remove(); svg .append('g') .call(jump_axis) .attr('transform', 'translate(80,0)'); // shift y-axis left 30 svg .append('text') .text('Year') .call(xLabel); svg .append('text') .text('Jump Count') .call(yLabel); svg .append('g') .call(year_axis) .attr('transform', 'translate(0, 750)'); const selection = svg.selectAll('circle'); const circles = selection.data(Movies_data); circles.join(enter => enter .append('circle') .attr('fill', d => color(d.MovieName)) .style('opacity', 0.5) .attr('r', 5) .attr('cx', d => year_scale(d.Year)) .attr('cy', d => jump_scale(d.JumpCount))); } else { const selection = svg.selectAll('circle'); const circles = selection.data(Movies_data); circles.join(enter => enter .append('circle') .attr('fill', 'red') .style('opacity', 0.5) .attr('r', 5) .attr('cx', d => year_scale(d.Year)) .attr('cy', d => jump_scale(d.JumpCount)) ); } return svg.node(); }33:T73a,html`

Chart	Encoding
Triple Scatterplot	This chart displays number of jump scares in a given year. The Year is encoded in position along the x-axis, jump scare count are encoded in position along the y-axis, and number of movies are encoded in their color. This encoding is fairly accurate: position along a common scale is the easiest perceptual task. However, direction and color are more difficult to interpret, and accuracy is likely lower for these tasks.
Bar Chart	This chart also display jump scares in a given year. The Year is encoded in position along the x-axis through "buckets". The jump scare counts are encoded in position along the y-axis as well as length of the bar. This encoding is less accurate -- however it is easy to interpret position along common scales. Since these are aggregates, it is more difficult to see any relationship between the variables.
Pie Chart	This chart is only able to display number of jump scares. The number of jump scares per year compared to the total number of jump scares is encoded in the angle of the slice, and the year 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.
Scatterplot	This chart displays jump scares in a given year. 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.

`34:T5df,chart2 = { const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]); svg.append('g').call(year_axis); svg.append('g').call(rate_axis); svg .append('text') .text('Date') .call(xLabel); svg .append('text') .text('Number of movies') .call(yLabel); let rating1_scale = d3.scaleLinear() .domain(d3.extent(rating1_rollup, d => d.length)) .range([height - margin.bottom, margin.top]); let rating1_axis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(rating1_scale)) let rating2_scale = d3.scaleLinear() .domain(d3.extent(rating2_rollup, d => d.length)) .range([height - margin.bottom, margin.top]); let rating2_axis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(rating2_scale)) let generateLine1 = d3 .line() .x(d => year_scale(d.Year)) .y(d => rating1_scale(d.MPAA_Rating)); let generateLine2 = d3 .line() .x(d => year_scale(d.Year)) .y(d => rating2_scale(d.MPAA_Rating)); let chosenrating1 = diff.filter(d => d.MPAA_Rating == c1); svg .append('path') .datum(rating1_rollup) .attr('d', generateLine1(rating1_rollup)) .attr('stroke', 'red') .style('fill', 'none'); let chosenrating2 = diff.filter(d => d.MPAA_Rating == c2); svg .append('path') .datum(rating2_rollup) .attr('d', generateLine2(rating2_rollup)) .attr('stroke', 'teal') .style('fill', 'none'); return svg.node(); }35:[] 2f:{"title":"Graphical Encodings Jack","cells":[{"id":0,"value":"md`# Graphical Encodings Jack`","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":129,"value":"md`In order to access the perceptual accuracy of different encodings, the researchers conducted two different experiments. In the first experiment, they asked 55 subjects to look at 5 types of grouped or divded bar charts. They had to make a judgement on which divisions or bars on how much smaller the smaller was of the two. The second experiment was with 54 subjects who judged pie charts against bar charts.`","pinned":true,"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":132,"value":"md`In the article, the researchers mentioned that they used their own intuition with some tasks that seemed very obvious. I believe they should have conducted more experiments to make sure. Because they were using their own intuitions, it could introduce bias and distort the results of the study. `","pinned":true,"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":134,"value":"md`The additional element is a third x variable from a scatter plot, which can be encoded through area. The elementary perceptual task used in this example is the perception of area.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"Movies_data = data.map(d => {\n return {\n MovieName: d.Movie_Name,\n Year: d.Year,\n JumpCount: d.Jump_Count\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"scaleBand = {\n return d3\n .scaleBand()\n .domain(categories)\n .range([0, 60]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"categories = ['Triple Scatterplot', 'Bar Chart', 'Pie Chart', 'Scatterplot']\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"viewof chosen = DOM.select(categories)","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"scaleBand(chosen)","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"chosen_data = [\n {\n category: \"Triple Scatterplot\"\n },\n {\n category: \"Bar Chart\"\n },\n {\n category: \"Pie Chart\"\n },\n {\n category:\"Scatterplot\"\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":438,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"function getYear(item) {\n var justyear = [item.Year].join(\" \");\n return justyear;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"onlyyears = Movies_data.map(getYear)","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"md`## Scales`","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":" movies_scale = d3\n .scaleLog()\n .domain(d3.extent(Movies_data, d => d.MovieName))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"d3.extent(Movies_data, d => d.JumpCount)","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"jump_scale = d3.scaleLinear()\n .domain(d3.extent(Movies_data, d => d.JumpCount))\n .range([height - margin.bottom, margin.top]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"rating_scale = d3.scaleLinear()\n .domain(d3.extent(rating_groups, d => d.MPAA_Rating))\n .range([height - margin.bottom, margin.top]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"y_from_d3 = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":473,"value":"jump_scale.range()","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"d3.extent(Movies_data, d => d.JumpCount)","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"year_scale = {\n return d3\n .scaleLinear()\n .domain(d3.extent(Movies_data, d => d.Year))\n .range([margin.left, width - margin.right]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"md`## Axes`","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"movies_axis = g =>\ng \n.attr('transform',`translate(0,${height - margin.bottom})`)\n.call(d3.axisBottom(movies_scale))","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"jump_axis = g =>\ng\n.attr(\"transform\", `translate(${margin.left},0)`)\n.call(d3.axisLeft(jump_scale))","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"year_axis = g =>\ng \n.attr('transform',`translate(0,${height - margin.bottom})`)\n.call(d3.axisBottom(year_scale))","pinned":true,"hidden":false,"mode":"ojs"},{"id":537,"value":"rate_axis = g =>\ng\n.attr(\"transform\", `translate(${margin.left},0)`)\n.call(d3.axisLeft(rating_scale))","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`## Labels`","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"xLabel = ele => ele.attr('x', width / 2).attr('y', height - margin.bottom + 40)","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"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":true,"hidden":false,"mode":"ojs"},{"id":430,"value":"arcLabel = {\n const radius = Math.min(width, height) / 2 * 0.8;\n return d3.arc().innerRadius(radius).outerRadius(radius);\n}","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":444,"value":"viewof c1 = select(_.uniqBy(data, d => d.MPAA_Rating).map(d => d.MPAA_Rating))","pinned":true,"hidden":false,"mode":"ojs"},{"id":446,"value":"viewof c2 = select(_.uniqBy(data, d => d.MPAA_Rating).map(d => d.MPAA_Rating))","pinned":true,"hidden":false,"mode":"ojs"},{"id":540,"value":"rating1 = data.filter(d => d.MPAA_Rating == c1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":546,"value":"rating2 = data.filter(d => d.MPAA_Rating == c2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":548,"value":"rating1_rollup = d3.rollups(rating1, v => v.length, d => d.Year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"rating2_rollup = d3.rollups(rating2, v => v.length, d => d.Year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":636,"value":"formattedData = rating1_rollup.map(d => {\n const formatTime = d3.timeParse(\"%Y\");\n\n return {\n year: formatTime(d[0]),\n count: d[1]\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":648,"value":"sorter = (a, b) => {\n if(a.year !== b.year)\n return a.year - b.year;\n};\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":589,"value":"chart3 = {\n const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]);\n //Add X axis\n const rating1_xScale = d3.scaleTime()\n .domain(d3.extent(formattedData, function(d) { return d.year; }))\n .range([ 0, width ]); \n svg.append(\"g\")\n .attr(\"transform\", \"translate(0,\" + height + \")\")\n .call(d3.axisBottom(rating1_xScale));\n\n // Add Y axis\n const rating1_yScale = d3.scaleLinear()\n .domain([0, d3.max(formattedData, function(d) { return +d.count; })])\n .range([ height, 0 ]); \n svg.append(\"g\")\n .call(d3.axisLeft(rating1_yScale));\n \n formattedData.sort(sorter);\n // Add the line\n svg.append(\"path\")\n .datum(formattedData)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"d\", d3.line()\n .x(function(d) { return rating1_xScale(d.year) })\n .y(function(d) { return rating1_yScale(d.count) })\n )\n return svg.node();\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":449,"value":"$34","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":458,"value":"md`Everything was so challenging. Finding an appropriate dataset, all of the visualizations and Observable. Observable not having some sort of parser was really difficult for me to disern what was wrong with my code.`","pinned":true,"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":140,"value":"import { autoSelect, select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"data = d3.csv(\"https://www.sfu.ca/~nimtiaz/horrormovies.csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"data_jump = d3.csv(\"https://www.sfu.ca/~nimtiaz/jumpscares.csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"dfjs = require('https://bundle.run/dataframe-js@1.3.2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"margin = ({ top: 20, right: 30, bottom: 50, left: 80 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"pie = d3\n .pie()\n .sort(null)\n .value(d => {\n console.log(d)\n return d[1]\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"grouped = d3.rollup(Movies_data, v => v.length, d => d.Year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":511,"value":"rating_groups = d3.group(data, d => d.MPAA_Rating, f => f.Year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"pieData = pie(grouped)","pinned":true,"hidden":false,"mode":"ojs"},{"id":418,"value":"arc = d3.arc()\n .innerRadius(0)\n .outerRadius(Math.min(width, height) / 2 - 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"color = d3.scaleOrdinal()\n .domain(Movies_data.map(d => d.name))\n .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse())","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"diff = Movies_data.filter(d => d.MovieName == c1 || d.MovieName == c2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}