2a: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.)`2b:T444,chart2 = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("g") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("transform", "rotate(-40)"); svg.append("g").call(yAxis); svg .append("text") .text("# of Cases in Each State") .style("font-weight", "bold") .style("font-size", "15px") .attr("transform", "translate(400, 20)"); svg .append("text") .text("States") .style("font-size", "12px") .attr("transform", "translate(450, 600)"); svg .append("text") .text("# of Cases") .style("font-size", "12px") .attr("transform", "translate(15, 200) rotate(-90)"); svg .selectAll("rect") .data(state_data) .join(enter => enter.append("rect")) .attr("x", d => x(d.x)) .attr("y", d => y(d.y)) .attr("width", x.bandwidth()) .attr("fill", "blue") .attr("opacity", "0.90"); svg .selectAll("rect") .transition() .duration(2000) .attr("y", d => y(d.y)) .attr("height", d => y(0) - y(d.y)); return svg.node(); }2c:T614,chart3 = { const arcs = pie(state_data2); const height = Math.min(width, 500); const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); const arc = d3 .arc() .innerRadius(0) .outerRadius(Math.min(width, height) / 2 - 1); const arcLabel = d3 .arc() .innerRadius((Math.min(width, height) / 2) * 0.8) .outerRadius((Math.min(width, height) / 2) * 0.8); const color = d3 .scaleOrdinal() .domain(state_data2.map(d => d.x)) .range( d3 .quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), state_data.length) .reverse() ); svg .append("g") .attr("stroke", "white") .selectAll("path") .data(arcs) .join("path") .attr("fill", d => color(d.data.x)) .attr("d", arc) .append("title") .text(d => `${d.data.x}: ${d.data.y.toLocaleString()}`); svg .append("g") .attr("font-family", "serif") .attr("font-size", 20) .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.x) ) .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.y.toLocaleString()) ); return svg.node(); }2d:T4b3,chart4 = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg.append("g").call(xAxis2); svg.append("g").call(yAxis2); svg .append("text") .text("# of Cases in Each State") .style("font-weight", "bold") .style("font-size", "15px") .attr("transform", "translate(400, 20)"); svg .append("text") .text("States") .style("font-size", "12px") .attr("transform", "translate(450, 550)"); svg .append("text") .text("# of Cases") .style("font-size", "12px") .attr("transform", "translate(15, 200) rotate(-90)"); svg .selectAll("rect") .data(state_data2) .join(enter => enter.append("rect")) .attr("x", d => x2(d.x)) .attr("y", d => y2(d.y)) .attr("width", x2.bandwidth()) .attr("fill", d => set_color(d.x)) .attr("opacity", "0.90"); svg .selectAll("rect") .transition() .duration(2000) .attr("y", d => y2(d.y)) .attr("height", d => y2(0) - y2(d.y)); svg .append("g") .attr("transform", "translate(150, 10)") .append(() => legend({ color: set_color, width: 700, title: "State names" }) ); return svg.node(); }2e:T6ed,diffChart = { const svg = d3 .select(DOM.svg(width, diffData, diffData2)) .attr("viewBox", [0, 0, width, 580]); svg .append("text") .text("California Versus Illinois Covid19 Cases") .style("font-weight", "bold") .style("font-size", "15px") .attr("transform", "translate(400, 20)"); svg .append("text") .attr("class", "text") .attr("transform", "translate(510,550)") .style("text-anchor", "middle") .style("font-size", "12px") .text("Date"); svg .append("text") .attr("class", "text") .attr("transform", "translate(10,222)rotate(-90)") .style("text-anchor", "middle") .style("font-size", "9px") .text("Covid19 Cases"); svg .append('clipPath') .attr('id', 'high-clip') .append('path') .datum(diffData2) .attr('d', areas.y0(0).y1(d => y3(d.cases))); svg .append('clipPath') .attr('id', 'low-clip') .append('path') .datum(diffData2) .attr('d', areas.y0(height).y1(d => y3(d.cases))); svg .append('path') .datum(diffData) .attr('clip-path', 'url(#low-clip)') .attr('fill', '#ffaa00') .attr('d', areas.y0(0).y1(d => y3(d.cases))); svg .append('path') .datum(diffData) .attr('clip-path', 'url(#high-clip)') .attr('fill', '#00bbff') .attr('d', areas.y0(height).y1(d => y3(d.cases))); svg .append('path') .datum(diffData) .attr('stroke', '#ff0000') .attr('stroke-width', 2) .attr('fill', 'none') .attr('d', areas.lineY0()); svg .append('path') .datum(diffData2) .attr('stroke', '#0000ff') .attr('stroke-width', 2) .attr('fill', 'none') .attr('d', areas.lineY1()); xDiffAxis(svg.append('g')); yDiffAxis(svg.append('g')); return svg.node(); }2f:T46d,chart5 = { var svg = d3.select(DOM.svg(width, 600)); svg .append("text") .text("California Covid19 Cases") .style("font-weight", "bold") .style("font-size", "15px") .attr("transform", "translate(400, 20)"); svg .append("text") .attr("class", "text") .attr("transform", "translate(517,580)") .style("text-anchor", "middle") .style("font-size", "12px") .text("Year"); svg .append("text") .attr("class", "text") .attr("transform", "translate(10,265)rotate(-90)") .style("text-anchor", "middle") .style("font-size", "9px") .text("Amazon Minus Google Stock Price"); svg .append("g") .call(d3.axisBottom(x1)) .attr("transform", `translate(0, ${600 - margin.bottom})`); svg .append("g") .call(d3.axisLeft(y1)) .attr("transform", `translate(${margin.left}, 0)`); svg .append("path") .attr( "d", d3 .line() .x(d => x1(d.date)) .y(d => y1(d.cases))(formattedData1) ) .attr("stroke", "steelblue") .attr("stroke-width", "1.5") .attr("fill", "none"); return svg.node(); }30:[] 29:{"title":"Graphical Encodings LEI","cells":[{"id":0,"value":"md`# Graphical Encodings LEI`","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":128,"value":"md`The overall question is to find which elementary perceptual task that can give more accurate recognition of information. \n\n**The Accuracy Ranking of Elementary Task**\n1. Position along a common scale\n2. Positions along nonaligned scales\n3. Length, direction, angle\n4. Area\n5. Volume, curvature\n6. Shading, color saturation\n\nDuring the experiement, they ask the participants for their judgement of the bars/segments comparison on each graph(also different types of graphs) presented and the percentage difference between smaller bar/segment and larger bar/segment`","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":133,"value":"md`They get rid of the element of color, which is a primary elementary perceptual task on graphics, and color can solve many flaws of elementary perceptual task they mentioned. Moreover, their sample grouping method does not covering all the factors that could influence the outcome of this experiment, like the gender they assigned and the \"technical group\" dividing method.`","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":142,"value":"md`The additional information that can be extracted from a scatter plot is the relationship between x value and y value on the graph, the elementary perceptual task that enables us to do it is the **perception of direction(slope)**, which help us find the pattern`","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"margin = ({\n top: 30,\n right: 10,\n bottom: 80,\n left: 80\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"x = d3\n .scaleBand()\n .domain(state_data.map(d => d.x))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"x1 = d3\n .scaleTime()\n .domain(d3.extent(formattedData1, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"x2 = d3\n .scaleBand()\n .domain(state_data2.map(d => d.x))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(state_data, d => d.y)])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"y1 = d3\n .scaleLinear()\n .domain(d3.extent(formattedData1, d => +d.cases))\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"y2 = d3\n .scaleLinear()\n .domain([0, d3.max(state_data2, d => d.y) + 20])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"xAxis1 = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"xAxis2 = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"yAxis = g =>\n g.attr(\"transform\", `translate(${margin.left},0)`).call(d3.axisLeft(y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"yAxis1 = g =>\n g.attr(\"transform\", `translate(${margin.left},0)`).call(d3.axisLeft(y1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"yAxis2 = g =>\n g.attr(\"transform\", `translate(${margin.left},0)`).call(d3.axisLeft(y1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"md`## Position`","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"md`This uses position encoding as a scatter plot, it is very easily to the price difference of Microsoft stock in each month and its price pattern over time. But when the price does not has enought change, this chart might be less accurate than the line chart which has better showing of direction encoding.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"chart1 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\").call(xAxis1);\n svg.append(\"g\").call(yAxis1);\n\n svg\n .selectAll('circle')\n .data(formattedData1)\n .join(enter => enter.append(\"circle\"))\n .attr(\"cx\", d => x1(d.date))\n .attr(\"cy\", d => y1(d.cases))\n .attr(\"fill\", d => \"red\")\n .attr(\"r\", 3)\n .attr(\"opacity\", 0.8);\n\n svg\n .append(\"text\")\n .text(\"California Covid19 Cases\")\n .style(\"font-size\", \"15px\")\n .style(\"font-weight\", \"bold\")\n .attr(\"transform\", \"translate(400, 20)\");\n\n svg\n .append(\"text\")\n .text(\"Date\")\n .attr(\"transform\", \"translate(450,550)\")\n .style(\"font-size\", \"12px\");\n\n svg\n .append(\"text\")\n .text(\"Cases\")\n .attr(\"transform\", \"translate(25,200) rotate(-90)\")\n .style(\"font-size\", \"12px\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"md`## Length `","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"md`This chart uses bar chart as the encoding of length. When the range of y axis value is not too large and the x axix value is not many, the length of bar chart can be accuratly perceived. This chart has a wide range of y axis value, thus it is not that accurate when some values are having less length differences than the large one. The dot chart might be a better choice by using better position encoding.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"$2b","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`## Angle `","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"md`This chart uses pie chart as the encoding of angle. When the smallest value and largest value are having large difference, the angle of pir chart cannot be accuratly perceived. Similar to the bar chart, the dot chart might be a better choice since it provides better accuracy by using position encoding.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"$2c","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"pie = d3\n .pie()\n .sort(null)\n .value(d => d.y)","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"md`## Color`","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"md`This bar chart uses color to differentiate the x axis values, it might also improve the perception of length in some way. Still the dot chart with color will probably be more accurate since using position encoding and color differentiation.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":296,"value":"$2d","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":327,"value":"y3 = d3\n .scaleLinear()\n .domain([\n d3.min([d3.min(diffData, d => +d.cases), d3.min(diffData2, d => +d.cases)]),\n d3.max([d3.max(diffData, d => +d.cases), d3.max(diffData2, d => +d.cases)])\n ])\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":368,"value":"y4 = d3\n .scaleLinear()\n .domain([\n 0,\n d3.max([d3.max(diffData, d => +d.cases), d3.max(diffData2, d => +d.cases)])\n ])\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":336,"value":"x3 = d3\n .scaleTime()\n .domain(d3.extent(diffData, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"xDiffAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x3).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"yDiffAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y4).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":347,"value":"areas = d3\n .area()\n .curve(d3.curveCatmullRom)\n .x(d => x3(d.date))","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"md`## Difference Chart`","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"md`The limitation of Curve Difference Chart is it is hard for people to judge the minimum distance between the curve in different region, so makes an aggregate line chart that can directly showing the difference would be a better choice`","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs"},{"id":546,"value":"md`## Alternative Chart`","pinned":true,"hidden":false,"mode":"ojs"},{"id":559,"value":"md `The major difference with curve difference graph is, the cartesian chart direectly shows one set of data instead of showing both, which is more accurate when checking position of the data.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":548,"value":"$2f","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":119,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"stockData = d3.csv(\n \"https://raw.githubusercontent.com/vega/datalib/master/test/data/stocks.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"data = d3.csv(\n \"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"state_data = data\n .filter(d => d.date == '2020-06-01')\n .map(function(d) {\n return {\n x: d.state,\n y: +d.cases,\n color: \"blue\"\n };\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"state_data2 = state_data.slice(0, 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"formattedData = data\n .filter(d => (d.state == 'California') | (d.state == 'Illinois'))\n .map(d => {\n const formatTime = d3.timeParse(\"%Y-%m-%d\");\n return {\n state: d.state,\n cases: +d.cases,\n date: formatTime(d.date)\n };\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":240,"value":"formattedData1 = formattedData.filter(d => d.state == 'California')","pinned":true,"hidden":false,"mode":"ojs"},{"id":322,"value":"diffData = formattedData.filter(d => d.state == 'California')","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":"diffData2 = formattedData.filter(d => d.state == \"Illinois\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"formatTime = d3.timeParse(\"%B %d, %Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"import { swatches, legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"set_color = d3.scaleOrdinal(state_data2.map(d => d.x), d3.schemeTableau10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}