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:T4c0,position_encoding = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); //Calls Axes const x_axis = d3.axisBottom().scale(x_scale); let x_axisNames = svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`); x_axisNames.call(x_axis); const y_axis = d3.axisLeft().scale(y_scale); let y_axisValues = svg .append("g") .attr("transform", `translate(${margin.left}, 0)`); y_axisValues.call(y_axis); //X-Label svg .append("text") .attr("x", width / 2) .attr("y", height - 10) .attr("font-size", 20) .attr("text-anchor", "middle") .text("Cereal Brands"); //Y-Label svg .append("text") .attr("x", 0) .attr("y", height / 2 - margin.bottom) .attr("text-anchor", "middle") .attr("font-size", 20) .attr("transform", `rotate(270 20, ${height / 2 - margin.bottom})`) .text("Calorie Count"); //Circles svg .selectAll("#positions") .data(chart_data) .join( enter => enter.append("circle"), update => update, exit => exit.remove() ) .attr("cx", d => x_scale(d.x) + margin.right) .attr("cy", d => y_scale(d.y)) .attr("r", 10); return svg.node(); }33:T4f8,length_encoding = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); //Calls Axes const x_axis = d3.axisBottom().scale(x_scale); let x_axisNames = svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`); x_axisNames.call(x_axis); const y_axis = d3.axisLeft().scale(y_scale); let y_axisValues = svg .append("g") .attr("transform", `translate(${margin.left}, 0)`); y_axisValues.call(y_axis); //X-Label svg .append("text") .attr("x", width / 2) .attr("y", height - 10) .attr("font-size", 20) .attr("text-anchor", "middle") .text("Cereal Brands"); //Y-Label svg .append("text") .attr("x", 0) .attr("y", height / 2 - margin.bottom) .attr("text-anchor", "middle") .attr("font-size", 20) .attr("transform", `rotate(270 20, ${height / 2 - margin.bottom})`) .text("Calorie Count"); //Bars svg .selectAll("#bars") .data(chart_data) .join( enter => enter.append("rect"), update => update, exit => exit.remove() ) .attr("x", d => x_scale(d.x)) .attr("y", d => y_scale(d.y)) .attr("width", x_scale.bandwidth()) .attr("height", d => height - margin.bottom - y_scale(d.y)); return svg.node(); }34:T55a,color_encoding = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); //Calls Axes const x_axis = d3.axisBottom().scale(x_scale); let x_axisNames = svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`); x_axisNames.call(x_axis); const y_axis = d3.axisLeft().scale(y_scale); let y_axisValues = svg .append("g") .attr("transform", `translate(${margin.left}, 0)`); y_axisValues.call(y_axis); //X-Label svg .append("text") .attr("x", width / 2) .attr("y", height - 10) .attr("font-size", 20) .attr("text-anchor", "middle") .text("Cereal Brands"); //Y-Label svg .append("text") .attr("x", 0) .attr("y", height / 2 - margin.bottom) .attr("text-anchor", "middle") .attr("font-size", 20) .attr("transform", `rotate(270 20, ${height / 2 - margin.bottom})`) .text("Calorie Count"); //Bars svg .selectAll("#bars") .data(chart_data) .join( enter => enter.append("rect"), update => update, exit => exit.remove() ) .attr("x", d => x_scale(d.x)) .attr("y", d => y_scale(d.y)) .attr("width", x_scale.bandwidth()) .attr("fill", d => colors(d.x)) .attr("stroke", "black") .style("stroke-width", "1px") .attr("height", d => height - margin.bottom - y_scale(d.y)); return svg.node(); }35:T64f,chartAngle = { const svg = d3 .create("svg") .attr("width", width) .attr("height", height); var radius = Math.min(width, height) / 2 - margin.bottom; var pie = d3.pie().value(d => d.value); var pie_data = pie(d3.entries(lengthData)); //Title svg .append("text") .attr("x", 325) .attr("y", 30) .attr("font-size", 20) .attr("text-anchor", "middle") .text("Calorie Content of Cereal Brands"); //Legend Colors svg .selectAll(".colorLegend") .data(pie_data) .join( enter => enter.append("rect"), update => update, exit => exit.remove() ) .attr("x", width - margin.right - 200) .attr("y", (d, gap) => height - margin.bottom - gap * 15) .attr("width", 10) .attr("height", 10) .attr("fill", d => colors(d.data.key)); //Legend Text svg .selectAll(".colorLegend") .data(pie_data) .join( enter => enter.append("text"), update => update, exit => exit.remove() ) .attr("x", width - margin.right - 175) .attr("y", (d, count) => height - margin.bottom + 7 - count * 15) .attr("font-size", 8) .text(d => d.data.key + " - " + d.data.value + " Calories"); //Render Pie Chart svg .selectAll("#angles") .data(pie_data) .enter() .append("path") .attr( "d", d3 .arc() .innerRadius(0) .outerRadius(radius) ) .attr("fill", d => colors(d.data.key)) .attr("stroke", "black") .style("stroke-width", "0.5px") .attr("transform", "translate(" + width / 3 + "," + height / 2 + ")"); return svg.node(); }36:T9a4,chartCurveDifference = { const svg = d3 .create("svg") .attr("width", width) .attr("height", height); //Calls Axes const x_axis = d3.axisBottom().scale(year_scale); let x_axisNames = svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`); x_axisNames.call(x_axis); const y_axis = d3.axisLeft().scale(income_scale); let y_axisValues = svg .append("g") .attr("transform", `translate(${margin.left}, 0)`); y_axisValues.call(y_axis); //Title svg .append("text") .attr("x", width / 2) .attr("y", 40) .attr("font-size", 20) .attr("text-anchor", "middle") .text("Comparison of Brand Annual Income Over 5 Years"); //X-Label svg .append("text") .attr("x", width / 2) .attr("y", height - 10) .attr("font-size", 20) .attr("text-anchor", "middle") .text("Years"); //Y-Label svg .append("text") .attr("x", 0) .attr("y", height / 2 - margin.bottom - 10) .attr("text-anchor", "middle") .attr("font-size", 20) .attr("transform", `rotate(270 20, ${height / 2 - margin.bottom})`) .text("Annual Income"); //Brand A svg .selectAll(".branda") .data(yearlyIncomeBrandA) .join( enter => enter.append("path"), update => update, exit => exit.remove() ) .attr("d", line_formula(yearlyIncomeBrandA)) .attr("stroke", "steelblue") .attr("stroke-width", "2px") .attr("fill", "none"); //Brand B svg .selectAll(".brandb") .data(yearlyIncomeBrandB) .join( enter => enter.append("path"), update => update, exit => exit.remove() ) .attr("d", line_formula(yearlyIncomeBrandB)) .attr("stroke", "red") .attr("stroke-width", "2px") .attr("fill", "none"); //Brand A Color Box svg .append("rect") .attr("x", width - 150) .attr("y", height - 100) .attr("width", 10) .attr("height", 10) .attr("fill", "steelblue"); //Brand B Color Box svg .append("rect") .attr("x", width - 150) .attr("y", height - 80) .attr("width", 10) .attr("height", 10) .attr("fill", "red"); //Brand A Text svg .append("text") .attr("x", width - 125) .attr("y", height - 92) .attr("font-size", "10px") .text("Brand A"); //Brand B Text svg .append("text") .attr("x", width - 125) .attr("y", height - 72) .attr("font-size", "10px") .text("Brand B"); return svg.node(); }37:Tbf0,chartAlternative = { const svg = d3 .create("svg") .attr("width", width) .attr("height", height); //Calls Axes const x_axis = d3.axisBottom().scale(year_scale); let x_axisNames = svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`); x_axisNames.call(x_axis); const y_axis = d3.axisLeft().scale(income_scale); let y_axisValues = svg .append("g") .attr("transform", `translate(${margin.left}, 0)`); y_axisValues.call(y_axis); //Title svg .append("text") .attr("x", width / 2 - 20) .attr("y", 20) .attr("font-size", 20) .attr("text-anchor", "middle") .text("Comparison of Brand Annual Income Over 5 Years"); //X-Label svg .append("text") .attr("x", width / 2) .attr("y", height - 10) .attr("font-size", 20) .attr("text-anchor", "middle") .text("Years"); //Y-Label svg .append("text") .attr("x", 0) .attr("y", height / 2 - margin.bottom - 10) .attr("text-anchor", "middle") .attr("font-size", 20) .attr("transform", `rotate(270 20, ${height / 2 - margin.bottom})`) .text("Annual Income"); //Brand A svg .selectAll(".branda") .data(yearlyIncomeBrandA) .join( enter => enter.append("rect"), update => update, exit => exit.remove() ) .attr("x", d => year_scale(d.year)) .attr("y", d => income_scale(d.income)) .attr("width", year_scale.bandwidth() / 2) .attr("height", d => height - margin.bottom - income_scale(d.income)) .attr("fill", "steelblue"); //Brand B svg .selectAll(".brandb") .data(yearlyIncomeBrandB) .join( enter => enter.append("rect"), update => update, exit => exit.remove() ) .attr("x", d => year_scale(d.year) + year_scale.bandwidth() / 2) .attr("y", d => income_scale(d.income)) .attr("width", year_scale.bandwidth() / 2) .attr("height", d => height - margin.bottom - income_scale(d.income)) .attr("fill", "red"); //Divider Lines svg .selectAll(".dividerlines") .data(yearlyIncomeBrandA) .join( enter => enter.append("rect"), update => update, exit => exit.remove() ) .attr("x", d => year_scale(d.year)) .attr("y", 0 + margin.top) .attr("width", 1) .attr("height", height - margin.bottom - margin.top) .attr("fill", "black"); //Brand A Color Box svg .append("rect") .attr("x", width - 150) .attr("y", height - 30) .attr("width", 10) .attr("height", 10) .attr("fill", "steelblue"); //Brand B Color Box svg .append("rect") .attr("x", width - 150) .attr("y", height - 20) .attr("width", 10) .attr("height", 10) .attr("fill", "red"); //Brand A Text svg .append("text") .attr("x", width - 125) .attr("y", height - 22) .attr("font-size", "10px") .text("Brand A"); //Brand B Text svg .append("text") .attr("x", width - 125) .attr("y", height - 12) .attr("font-size", "10px") .text("Brand B"); return svg.node(); }38:[{"id":"02208aa148b90fb73755b9ae8e6ac0c4a856ae0ceeb5c16d272557ee6edfeb99efcfd74d6898df35a067606c27d2f03e625ffc1e7fd741eeba00e0d620199eaf","href":"https://static.observableusercontent.com/files/02208aa148b90fb73755b9ae8e6ac0c4a856ae0ceeb5c16d272557ee6edfeb99efcfd74d6898df35a067606c27d2f03e625ffc1e7fd741eeba00e0d620199eaf","name":"cereal.csv","type":"text/csv","lastModified":1588047827457.176,"size":228},{"id":"5073490ee58f774b87e5842614c29111c890ffbf35b5aeadd3995188d1c5cfe7068bf657436717d7dc988fd1a616efd49e4a98a09525b718b45b220a3413a4db","href":"https://static.observableusercontent.com/files/5073490ee58f774b87e5842614c29111c890ffbf35b5aeadd3995188d1c5cfe7068bf657436717d7dc988fd1a616efd49e4a98a09525b718b45b220a3413a4db","name":"brand_data.csv","type":"text/csv","lastModified":1588058392017.945,"size":129}] 2f:{"title":"Graphical Encodings - Banusing","cells":[{"id":0,"value":"md`# Graphical Encodings - Banusing`","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 - The paper discussed how the accuracy of varying graphical encodings was percieved. They did this by running two experiments with bar charts and pie chart respectively with two sample groups -- one being housewives and the other being a diverse group of people in the tech industry. Whereas the first experiment was about looking at how effective lengths were against positions, the second one looked at angles in the place of positions.`","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 - The study definitely has some great insights, but one concern is that it could very well be outdated. There have been many advancements in the field of visualization since then, and I'd love to read more about current standards before basing my work off it. In addition, I think that technological and statistical literacy has increased across the globe since the paper was published, which may change the insights it gives if it was done today (i.e the housewives may give differing thoughts).`","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 - From a scatter plot, we can determine the relationship between the two variables. It's percieving direction that allows us to do this.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"data = Object.assign(d3.csvParse(await FileAttachment(\"cereal.csv\").text()))","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"x_variable = \"name\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"y_variable = \"calories\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"color_variable = \"name\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"chart_data = {\n const data_for_chart = [];\n data.map(d => {\n data_for_chart.push({\n x: d.name,\n y: parseFloat(d[y_variable]),\n color: d.name\n });\n });\n return data_for_chart;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"x_domain = _.uniqBy(chart_data, d => d.x).map(d => d.x)","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"x_scale = d3\n .scaleBand()\n .domain(chart_data.map(d => d.x))\n .range([margin.left, width - margin.right])\n .padding(0.5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"y_domain = [d3.min(chart_data, d => d.y) - 5, d3.max(chart_data, d => d.y)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"y_scale = d3\n .scaleLinear()\n .domain(y_domain)\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":" md`### Position Encoding`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"md` This visualiztion uses position encoding. To me, it's probably the most accurate model because it shows the data without much fuss. It's kind of hard to see how far each point is compared to the other if they're close, but it otherwise looks to be the most straightforward one.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":" md`### Length Encoding`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"md` This visualiztion uses length encoding. It clearly shows how much each brand fares in comparison to the others, but it may be miscontrued compared to the raw values that the position encoding shows because of perception of scale.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"md`### Color Encoding`","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"colors = d3.scaleOrdinal(\n _.uniqBy(chart_data.map(d => d.x)),\n d3.schemeCategory10\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"swatches({\n color: colors\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"md` This visualization uses color encoding, which I paired with the length encoding. It adds a little bit more visual clarity to the existign visualization.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"md`### Angle Encoding`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"lengthData = {\n let lenData = {};\n for (let a = 0; a < chart_data.length; a++) {\n lenData[chart_data[a].x] = chart_data[a].y;\n }\n return lenData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"md` This visualization uses angle encoding alongside color encoding. Given the nature of the data, it doesn't really make sense.`","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":469,"value":"md` One limitation to a curve difference chart would be a perception issue in that that very close or very far apart line points could confuse the audience. In addition, having too many marks on the x axis could prove to be overwhelming`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"brand_data = d3.csvParse(\n await FileAttachment(\"brand_data.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"year_domain = _.uniqBy(brand_data, d => d.year).map(d => d.year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"year_scale = d3\n .scaleBand()\n .domain(year_domain)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"income_domain = [\n d3.min(brand_data, d => d.annual_income) - 1000,\n d3.max(brand_data, d => d.annual_income)\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"income_scale = d3\n .scaleLinear()\n .domain(income_domain)\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"yearlyIncomeBrandA = {\n let avgIncome = [];\n let brand_a = _.filter(brand_data, { brand: \"a\" });\n for (let i = 1; i <= 5; i++) {\n let incomeData = { year: i };\n let incomeDataPerYear = _.filter(brand_a, { year: i });\n incomeData.income = _.meanBy(incomeDataPerYear, d => d.annual_income);\n avgIncome.push(incomeData);\n }\n return avgIncome;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"yearlyIncomeBrandB = {\n let avgIncome = [];\n let brand_b = _.filter(brand_data, { brand: \"b\" });\n for (let i = 1; i <= 5; i++) {\n let incomeData = { year: i };\n let incomeDataPerYear = _.filter(brand_b, { year: i });\n incomeData.income = _.meanBy(incomeDataPerYear, d => d.annual_income);\n avgIncome.push(incomeData);\n }\n return avgIncome;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"line_formula = d3\n .line()\n .x(d => year_scale(d.year) + margin.left + margin.right + 17)\n .y(d => income_scale(d.income))","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"$37","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":181,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"import { displayCaution } from \"@info474/utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"margin = ({ top: 40, right: 20, bottom: 50, left: 50 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"import { swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}