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:T668,bar_chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const cont = d3 .scaleLinear() .domain([0, d3.max(group, d => d.value)]) .range([height - margin.bottom, margin.top]); const cat = d3 .scaleBand() .domain(d3.range(group.length)) .range([margin.left, width - margin.right]) .padding(0.3); svg .append("g") .selectAll("rect") .data(group) .join("rect") .attr("x", (d, i) => cat(i)) .attr("y", d => cont(d.value)) .attr("height", d => cont(0) - cont(d.value)) .attr("width", cat.bandwidth()); const cat_axis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(cat) .tickFormat(i => group[i].key) .tickSizeOuter(0) ); svg.append("g").call(cat_axis); const cont_axis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(cont).ticks(null, group.cont)) .call(g => g.select(".domain").remove()) .call(g => g .append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(data.y) ); svg.append("g").call(cont_axis); svg .append("text") .attr("class", "y label") .attr("text-anchor", "middle") .attr("y", 15) .attr("x", -height / 2) .attr("transform", "rotate(-90)") .text(cont_var); svg .append("text") .attr("x", width / 2) .attr("y", height - 10) .style("text-anchor", "middle") .text(cat_var); return svg.node(); }33:T6d7,float_chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const cont = d3 .scaleLinear() .domain([0, d3.max(group, d => d.value)]) .range([height - margin.bottom, margin.top]); const cat = d3 .scaleBand() .domain(d3.range(group.length)) .range([margin.left, width - margin.right]) .padding(0.3); const max = d3.max(group, d => d.value); svg .append("g") .selectAll("rect") .data(group) .join("rect") .attr("x", (d, i) => cat(i)) .attr("transform", d => `translate(0,-${cont(d.value) / 2})`) .attr("y", d => cont(d.value)) .attr("height", d => cont(0) - cont(d.value)) .attr("width", cat.bandwidth()); const cat_axis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(cat) .tickFormat(i => group[i].key) .tickSizeOuter(0) ); svg.append("g").call(cat_axis); const cont_axis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(cont).ticks(null, group.cont)) .call(g => g.select(".domain").remove()) .call(g => g .append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(data.y) ); svg.append("g").call(cont_axis); svg .append("text") .attr("class", "y label") .attr("text-anchor", "middle") .attr("y", 15) .attr("x", -height / 2) .attr("transform", "rotate(-90)") .text(cont_var); svg .append("text") .attr("x", width / 2) .attr("y", height - 10) .style("text-anchor", "middle") .text(cat_var); return svg.node(); }34:T658,// Adapted from: https://observablehq.com/@d3/pie-chart pie_chart = { const arc = d3 .arc() .innerRadius(0) .outerRadius(Math.min(width, height) / 2 - 1); const radius = (Math.min(width, height) / 2) * 0.8; const arcLabel = d3 .arc() .innerRadius(radius) .outerRadius(radius); const cat = d3 .scaleOrdinal() .domain(data.map(d => d.key)) .range( d3 .quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), group.length) .reverse() ); const pie = d3 .pie() .sort(null) .value(d => d.value); const arcs = pie(group); const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); svg .append("g") .attr("stroke", "white") .selectAll("path") .data(arcs) .join("path") .attr("fill", d => cat(d.data.key)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value}`); svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .attr("transform", d => `translate(${arcLabel.centroid(d)})`) .call(text => text .append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.key) ) .call(text => text .filter(d => d.endAngle - d.startAngle > 0.25) .append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(d => d.data.value.toLocaleString()) ); return svg.node(); }35:T66e,color_chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const color1 = d3 .scaleLinear() .domain([d3.min(group, d => d.value), d3.max(group, d => d.value)]) .range(["green", "red"]); const color2 = d3 .scaleLinear() .domain([0, d3.max(group, d => d.value)]) .range(["purple", "yellow"]); const cat = d3 .scaleBand() .domain(d3.range(group.length)) .range([margin.left, width - margin.right]) .padding(0.3); svg .append("g") .selectAll("rect") .data(group) .join("rect") .attr("x", (d, i) => cat(i)) .attr("y", margin.top) .attr("height", (height - margin.bottom - margin.top) / 2) .attr("fill", d => color1(d.value)) .attr("width", cat.bandwidth()); svg .append("g") .selectAll("rect") .data(group) .join("rect") .attr("x", (d, i) => cat(i)) .attr("y", height / 2) .attr("height", (height - margin.bottom - margin.top) / 2) .attr("fill", d => color2(d.value)) .attr("width", cat.bandwidth()); const cat_axis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(cat) .tickFormat(i => group[i].key) .tickSizeOuter(0) ); svg.append("g").call(cat_axis); svg .append("text") .attr("class", "y label") .attr("text-anchor", "middle") .attr("y", 15) .attr("x", -height / 2) .attr("transform", "rotate(-90)") .text(cont_var); svg .append("text") .attr("x", width / 2) .attr("y", height - 10) .style("text-anchor", "middle") .text(cat_var); return svg.node(); }36:T6e1,// Adapted from: https://observablehq.com/@d3/line-chart chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const x = d3 .scaleLinear() .domain([0, d3.max(data, d => d.cont)]) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, d3.max(data, d => d.cont2)]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .ticks(width / 80) .tickSizeOuter(0) ); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y) ); const line = d3 .line() .curve(d3.curveBasis) .x(d => x(d.key)) .y(d => y(d.value)); const line2 = d3 .line() .curve(d3.curveBasis) .x(d => x(d.key)) .y(d => y(d.value)); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg .append("path") .datum(group2["none"]) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg .append("path") .datum(group2["completed"]) .attr("fill", "none") .attr("stroke", "orange") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line2); return svg.node(); }37:T700,// Adapted from: https://observablehq.com/@d3/line-chart curve_difference = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const x = d3 .scaleLinear() .domain([0, d3.max(data, d => d.cont)]) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([d3.min(res, d => d.diff), d3.max(res, d => d.diff)]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .ticks(width / 80) .tickSizeOuter(0) ); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y) ); const line = d3 .line() .defined(d => !isNaN(d.diff)) .curve(d3.curveBasis) .x(d => x(d.x_val)) .y(d => y(d.diff)); const line2 = d3 .line() .x(d => x(d)) .y(d => y(0)); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg .append("path") .datum(res) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg .append("path") .datum([0, d3.max(data, d => d.cont)]) .attr("fill", "none") .attr("stroke", "orange") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line2); return svg.node(); }38:[{"id":"94186f3a898f02fd21cc12639ae2aba0cd0d0ae7ab0759072f610d7dcdaabcacad85f19b707a89362844f3e902464f240eaf56a0afab67999b1e285f1cd3d71e","href":"https://static.observableusercontent.com/files/94186f3a898f02fd21cc12639ae2aba0cd0d0ae7ab0759072f610d7dcdaabcacad85f19b707a89362844f3e902464f240eaf56a0afab67999b1e285f1cd3d71e","name":"StudentsPerformance.csv","type":"text/csv","lastModified":1588040533865.708,"size":72036}] 2f:{"title":"Graphical Encodings - Hendrickson","cells":[{"id":0,"value":"md`# Graphical Encodings - Hendrickson`","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 \nThe perceptual accuracy of different encodings was predicted using theory, where various elementary encodings were ranked based on supposed easy of differentiation. Then, the theories were tested by having test subjects judge values in various visualizations as smaller, and then estimate the percentage of difference. They checked to see if the theories successfully predicted the order of effectiveness for each visualization.\n\nThe study was conducted over two groups. One group was made up of females (who were mostly housewivess) without significant technical experience. The other group was a mixed-gender pool of people with technical training and/or working technical jobs.`","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 \nI find the method of sampling in this experiment to be unsatisfactory. Instead of a random sample, it appears that the researchers selected subjects manually, but then generalized their results to the entire population.\n\nOtherwise, I recognize the difficulty in creating a true unbiased experiment to test the perceptual accuracy of the different visual encodings. However, the test results are difficult to generalize to other visualizations, and they didn't test all of the elementary visual encodings. Thus, I would be hesitant to base my visualizations off of the result of the study, for all but the most basic of conclusions (e.g. I should avoid pie charts). `","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 can also use area perception in a scatter plot, where the size of the points represents an additional variable.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"md`## Position\n\nThis bar chart uses the position encoding (this is because we judge the difference between the bars by the position of their tops). In particular, this is in the most accurate category for graphical perceptions, as it is positioned along a common scale. It's easy to see differences in the position at the top of each bar, so direct comparisons between nearby bars are easy. However, it can be a little tricky to determine exact values for all bars beyond the first.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"md`## Length\n\nThis plot is similar to the bar graph above. However, the distance from the x axis is adjusted, so the bars are centered with each other. This means this graph uses length encoding instead of position encoding. This means that it no longer takes advantage of the accuracy granted by position along a common scale, and is instead in the third accuracy level of \"length, direction, angle\". This makes it more difficult to tell the differences between each column. There's really no upside to using an encoding like this over a bar chart.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"md`## Angle\n\nThis pie chart is angle encoded. This ranks at the same level as the length chart in terms of perceptual accuracy. It is difficult to tell the differences in sizes between each of the categories, similar to the length chart.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"md`## Color\n\nThis color chart is color encoded. The accuracy of this chart is lower than each other graph. The bottom color encoding reflects the absolue scale (from 0 to the maximum value). However, it is incredibly hard to see subtle differences in that scale, so the top color encoding reflects an adjusted scale (from the minimum value to the maximum value). Not only is this impossible for the colorblind to parse, but it's incredibly difficult for normal-sighted individuals to determine differences as well.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"legend({\n color: d3\n .scaleLinear()\n .domain([d3.min(group, d => d.value), d3.max(group, d => d.value)])\n .range([\"green\", \"red\"])\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"legend({\n color: d3\n .scaleLinear()\n .domain([0, d3.max(group, d => d.value)])\n .range([\"purple\", \"yellow\"])\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"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":528,"value":"md`Curve difference charts are difficult for humans to interpret, as they must be interpreted by comparing points with the same x value, on the same vertical line. We naturally want to compare the minimum distances between the curves in different regions, which doesn't give the right impression of the data set.\n\nAlternative: actually just graph the difference`","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"md`Pictured below: No Test Preparation Course (blue) vs Test Prep Completed (orange) \ny axis: Reading Score \nx axis: Math Score `","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"md`Pictured below: The chart of the difference between No Test Prep math scores vs Test Prep math scores \ny axis: Reading Score \nx axis: Difference in Math Score \n\nThis version of the curve difference chart lets us easily see how the math test scores compare at each reading score. You can see that for scores between 40 and 90, students with test prep perform better than students without test prep, but you can also see that above 92, students without test prep seem to perform better than students with test prep. Naturally, this isn't a strong conclusion, as no real statistical verification methods have been employed, but the difference that is present here is difficult to spot in the above data visualization.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"//Borrowed from: http://learnjsdata.com/combine_data.html\nfunction join(lookupTable, mainTable, lookupKey, mainKey, select) {\n var l = lookupTable.length,\n m = mainTable.length,\n lookupIndex = [],\n output = [];\n for (var i = 0; i < l; i++) {\n // loop through l items\n var row = lookupTable[i];\n lookupIndex[row[lookupKey]] = row; // create an index for lookup table\n }\n for (var j = 0; j < m; j++) {\n // loop through m items\n var y = mainTable[j];\n var x = lookupIndex[y[mainKey]]; // get corresponding row from lookupTable\n output.push(select(y, x)); // select only the columns you need\n }\n return output;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"res = join(group2[\"none\"], group2[\"completed\"], \"key\", \"key\", (a, b) => {\n return {\n diff: a !== undefined && b !== undefined ? a.value - b.value : null,\n x_val: a.key\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"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":207,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"raw_data = {\n const csv = await FileAttachment(\"StudentsPerformance.csv\").text();\n return d3.csvParse(csv);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"cont_var = \"reading score\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"cont2_var = \"writing score\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"cat_var = \"parental level of education\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"cat2_var = \"test preparation course\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"data = {\n const arr = [];\n\n raw_data.map(d => {\n if (!isNaN(d[cont_var]) && !isNaN(d[cont2_var])) {\n arr.push({\n cont: parseFloat(d[cont_var]),\n cont2: parseFloat(d[cont2_var]),\n cat: d[cat_var],\n cat2: d[cat2_var]\n });\n }\n });\n\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"group2 = {\n const cats = _.uniqBy(data, d => d.cat2).map(d => d.cat2);\n\n var group2 = {};\n\n group2[\"gs\"] = cats;\n\n cats.forEach(v => (group2[v] = []));\n data.map(d => {\n group2[d.cat2].push(d);\n return d;\n });\n\n cats.forEach(v => {\n group2[v] = d3\n .nest()\n .key(d => d.cont2)\n .rollup(z => d3.mean(z, d => +d.cont))\n .entries(group2[v]);\n\n group2[v].sort((a, b) => a.value - b.value);\n group2[v].sort((a, b) => a.key - b.key);\n return v;\n });\n return group2;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"margin = ({ top: 80, right: 50, bottom: 50, left: 60 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"group = {\n const group = d3\n .nest()\n .key(d => d.cat)\n .rollup(v => d3.mean(v, d => +d.cont))\n .entries(data);\n\n group.sort((a, b) => b.value - a.value);\n return group;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"import { displayCaution } from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":485,"value":"import { legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}