45:["$","title",null,{"children":"Graphical Encodings Zhang | yuanruizhang | Observable"}] 4d: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.)`4e:T70e,chart = { const svg = d3 .create('svg') .attr('viewBox', [0, 0, measurements.width, measurements.height]); const xAxis = d3.axisBottom().scale(scatter_xScale); svg .append('g') .attr( 'transform', 'translate(0,' + (measurements.height - measurements.marginBottom) + ')' ) .call(xAxis); const yAxis = d3.axisLeft().scale(scatter_yScale); svg .append('g') .attr('transform', 'translate(' + measurements.marginLeft + ',0)') .call(yAxis); //append x axis label svg .append("text") .attr("class", "x label") .attr("x", measurements.width / 2) .attr("y", measurements.height - measurements.marginBottom + 35) .style('text-anchor', 'middle') .text("Date"); //append y axis label svg .append("text") .attr("class", "y label") .attr("text-anchor", "end") .attr( "transform", `translate(${measurements.marginLeft - 30}, ${measurements.height / 2})rotate(-90)` ) .style('text-anchor', 'middle') .text("Stock Price"); //append title svg .append("text") .attr( 'transform', `translate(${measurements.width / 2}, ${measurements.marginTop / 2})` ) .style('text-anchor', 'middle') .style('font-size', '20px') .style('font-weight', 'bold') .text(symbol + ' Stock Data Over Time'); //fill in data svg .selectAll('circle') .data(MSFTData) .join(enter => enter.append("circle")) .attr("cx", d => measurements.width / 2) .attr("cy", d => measurements.height / 2) .attr("r", 3) .attr('fill', '#00a2ed'); //add animation svg .selectAll("circle") .transition() .duration(2000) .attr("cx", d => scatter_xScale(d.date)) .attr("cy", d => scatter_yScale(d.price)); return svg.node(); }4f:T5fb,chart2 = { const svg = d3 .create('svg') .attr('viewBox', [0, 0, measurements.width, measurements.height]); // Append x axis const xAxisBand = d3.axisBottom().scale(scaleBand); svg .append('g') .attr( "transform", `translate(0,${measurements.height - measurements.marginBottom})` ) .call(xAxisBand); //append y axis const yAxis = d3.axisLeft().scale(bar_yScale); svg .append('g') .attr('transform', 'translate(' + measurements.marginLeft + ',0)') .call(yAxis); //append title svg .append("text") .attr( 'transform', `translate(${measurements.width / 2}, ${measurements.marginTop / 2})` ) .style('text-anchor', 'middle') .style('font-size', '20px') .style('font-weight', 'bold') .text(symbol + ' Stock Data Over Time'); // Add the data rectangles/bars svg .selectAll('rect') .data(summary_by_year) .join(enter => enter.append('rect')) .attr('x', d => scaleBand(d.key)) .attr('y', d => bar_yScale(d.value.avg_price)) .attr('width', scaleBand.bandwidth()) //.attr('height', d => bar_yScale(0) - bar_yScale(d.value.avg_price)) .attr('height', 0) .attr('fill', '#F34F1C'); //add animation svg .selectAll("rect") .transition() .duration(2000) .attr('y', d => bar_yScale(d.value.avg_price)) .attr('height', d => bar_yScale(0) - bar_yScale(d.value.avg_price)) .delay(function(d, i) { console.log(i); return i * 100; }); return svg.node(); }50:T49e,chart3 = { const arcs = pie(summary_by_year); const svg = d3 .create("svg") .attr("viewBox", [ -measurements.width / 2, -measurements.height / 2, measurements.width, measurements.height ]); //draw pie svg .append("g") .attr("stroke", "white") .selectAll("path") .data(arcs) .join("path") .attr("fill", d => color(d.data.key)) .attr("d", arc) .append("title") .text(d => `${d.data.key}: ${d.data.value.avg_price}`); //add text 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.avg_price) ); return svg.node(); }51:T861,chart4 = { const svg = d3 .create('svg') .attr('viewBox', [0, 0, measurements.width, measurements.height]); const xAxis = d3.axisBottom().scale(scatter_xScale); svg .append('g') .attr( 'transform', 'translate(0,' + (measurements.height - measurements.marginBottom) + ')' ) .call(xAxis); const yAxis = d3.axisLeft().scale(scatter_yScale); svg .append('g') .attr('transform', 'translate(' + measurements.marginLeft + ',0)') .call(yAxis); //append x axis label svg .append("text") .attr("class", "x label") .attr("x", measurements.width / 2) .attr("y", measurements.height - measurements.marginBottom + 35) .style('text-anchor', 'middle') .text("Date"); //append y axis label svg .append("text") .attr("class", "y label") .attr("text-anchor", "end") .attr( "transform", `translate(${measurements.marginLeft - 30}, ${measurements.height / 2})rotate(-90)` ) .style('text-anchor', 'middle') .text("Stock Price"); //append title svg .append("text") .attr( 'transform', `translate(${measurements.width / 2}, ${measurements.marginTop / 2})` ) .style('text-anchor', 'middle') .style('font-size', '20px') .style('font-weight', 'bold') .text(symbol + ' Stock Data Over Time'); //fill in data svg .selectAll('circle') .data(MSFTData) .join(enter => enter.append("circle")) .attr("cx", d => measurements.width / 2) .attr("cy", d => measurements.height / 2) .attr("r", 3) .attr("fill", d => above_or_below( d.price > summary_by_year[+d.date.getFullYear() - 2000].value.avg_price ) ); svg .append("g") .attr("transform", "translate(150, 30)") .append(() => legend({ color: above_or_below, width: 700, title: "Above or Below Annual Average Stock Price" }) ); //add animation svg .selectAll("circle") .transition() .duration(2000) .attr("cx", d => scatter_xScale(d.date)) .attr("cy", d => scatter_yScale(d.price)); return svg.node(); }52:T958,chart5 = { const svg = d3 .create('svg') .attr('viewBox', [0, 0, measurements.width, measurements.height]); const xAxis = d3.axisBottom().scale(scatter_xScale); svg .append('g') .attr( 'transform', 'translate(0,' + (measurements.height - measurements.marginBottom) + ')' ) .call(xAxis); const yAxis = d3.axisLeft().scale(scatter_yScale); svg .append('g') .attr('transform', 'translate(' + measurements.marginLeft + ',0)') .call(yAxis); //append x axis label svg .append("text") .attr("class", "x label") .attr("x", measurements.width / 2) .attr("y", measurements.height - measurements.marginBottom + 35) .style('text-anchor', 'middle') .text("Date"); //append y axis label svg .append("text") .attr("class", "y label") .attr("text-anchor", "end") .attr( "transform", `translate(${measurements.marginLeft - 30}, ${measurements.height / 2})rotate(-90)` ) .style('text-anchor', 'middle') .text("Stock Price"); //append title svg .append("text") .attr( 'transform', `translate(${measurements.width / 2}, ${measurements.marginTop / 2})` ) .style('text-anchor', 'middle') .style('font-size', '20px') .style('font-weight', 'bold') .text( 'absolute stock price difference between ' + comapre1 + ' and ' + compare2 ); //fill in data svg .selectAll('circle') .data(price_diff_by_date) .join(enter => enter.append("circle")) // .attr("cx", d => difference_xScale(d.date)) // .attr("cy", d => difference_yScale(d.difference)) .attr("cx", d => measurements.width / 2) .attr("cy", d => measurements.height / 2) .attr("r", 3) .attr('fill', '#00a2ed'); const stockTrendLineGen = d3 .line() .x(d => scatter_xScale(d.date)) .y(d => scatter_yScale(+d.difference)); svg .append('g') .attr('transform', 'translate(' + measurements.marginLeft + ',0)') .call(yAxis); svg .append('path') .datum(price_diff_by_date) .attr('d', stockTrendLineGen(price_diff_by_date)) .attr('stroke', '#00a2ed') .attr('fill', 'none'); //add animation svg .selectAll("circle") .transition() .duration(2000) .attr("cx", d => scatter_xScale(d.date)) .attr("cy", d => scatter_yScale(+d.difference)); return svg.node(); }53:T96a,chart6 = { const svg = d3 .create('svg') .attr('viewBox', [0, 0, measurements.width, measurements.height]); const xAxis = d3.axisBottom().scale(difference_xScale); svg .append('g') .attr( 'transform', 'translate(0,' + (measurements.height - measurements.marginBottom) + ')' ) .call(xAxis); const yAxis = d3.axisLeft().scale(difference_yScale); svg .append('g') .attr('transform', 'translate(' + measurements.marginLeft + ',0)') .call(yAxis); //append x axis label svg .append("text") .attr("class", "x label") .attr("x", measurements.width / 2) .attr("y", measurements.height - measurements.marginBottom + 35) .style('text-anchor', 'middle') .text("Date"); //append y axis label svg .append("text") .attr("class", "y label") .attr("text-anchor", "end") .attr( "transform", `translate(${measurements.marginLeft - 30}, ${measurements.height / 2})rotate(-90)` ) .style('text-anchor', 'middle') .text("Stock Price"); //append title svg .append("text") .attr( 'transform', `translate(${measurements.width / 2}, ${measurements.marginTop / 2})` ) .style('text-anchor', 'middle') .style('font-size', '20px') .style('font-weight', 'bold') .text( 'absolute stock price difference between ' + comapre1 + ' and ' + compare2 ); //fill in data svg .selectAll('circle') .data(price_diff_by_date) .join(enter => enter.append("circle")) // .attr("cx", d => difference_xScale(d.date)) // .attr("cy", d => difference_yScale(d.difference)) .attr("cx", d => measurements.width / 2) .attr("cy", d => measurements.height / 2) .attr("r", 3) .attr('fill', '#00a2ed'); const stockTrendLineGen = d3 .line() .x(d => difference_xScale(d.date)) .y(d => difference_yScale(+d.difference)); svg .append('g') .attr('transform', 'translate(' + measurements.marginLeft + ',0)') .call(yAxis); svg .append('path') .datum(price_diff_by_date) .attr('d', stockTrendLineGen(price_diff_by_date)) .attr('stroke', '#00a2ed') .attr('fill', 'none'); //add animation svg .selectAll("circle") .transition() .duration(2000) .attr("cx", d => difference_xScale(d.date)) .attr("cy", d => difference_yScale(+d.difference)); return svg.node(); }54:[] 49:{"id":"a701ef7f0a684486","slug":"graphical-encodings-zhang","title":"Graphical Encodings Zhang","thumbnail":"db285b0b62c565256424d1d4ec50cd2689bb6ee83d7e9c20f938c0ed28d5e8f8","access_level":"public","create_time":"$D2020-07-08T06:29:01.453Z","update_time":"$D2020-07-08T06:29:01.453Z","view_time":null,"first_public_time":"$D2020-07-10T18:50:15.930Z","has_unpublished_edits":null,"fork":{"id":"dd6dea1282185910","slug":"graphical-encodings-zhang","title":"Graphical Encodings Zhang","owner":{"id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1b00c8267f32b7b9","login":"yuanruizhang","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3ffdbf4492f5e30dff74629747a0f4ab9829141a8385d9ade1767bcc050e2c5e","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":733,"publish_version":733,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a4a4722db9871c6","login":"yuanruizhang","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3ffdbf4492f5e30dff74629747a0f4ab9829141a8385d9ade1767bcc050e2c5e","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5a4a4722db9871c6","login":"yuanruizhang","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3ffdbf4492f5e30dff74629747a0f4ab9829141a8385d9ade1767bcc050e2c5e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Graphical Encodings Zhang","cells":[{"id":0,"value":"md`# Graphical Encodings Zhang`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"set_up = md`## Set up `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"displayCaution(\n \"Make sure you fork and rename this notebook before continuing!\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"md`Researcher's approach is based on graphical perception-the visual decoding of information encoded on graphs-and it includes both theory and experimentation to test the theory. In this article, researchers showed interviewee different charts and ask them to evaluate the chart performance on certain tasks.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"md`The assessment is obvious really subjective. One may found a graph intitutive, while others simply don't`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`Scatter plot is powerful because it has a third factor on the graph besides x and y. That is the shape of its point. It could be a rectangle or circle. No matter how densed it is, user can still catch it is a circle or rectangle easily. The third variable be encoded by line length so that a more accurate ele mentary perceptual task can be performed`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md` # *----------------------------------------------------* `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"md`I chose the data from Lab 4 as I would like to explore further on ways to display stock prices`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"md`Before Dive in, select the stock you want to learn`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"viewof symbol = DOM.select([...new Set(formattedData.map(d => d.symbol))])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"md` ## *Position: Scatter Plot*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"md`scatter plot will only focus on Microsoft Stock Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"MSFTData = formattedData.filter(d => d.symbol == symbol)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"MSFT_price_range = d3.extent(MSFTData, d => +d.price)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"MSFT_time_range = d3.extent(MSFTData, d => d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"// define X scale\nscatter_xScale = d3\n .scaleTime()\n .domain(MSFT_time_range)\n .range([\n measurements.marginLeft,\n measurements.width - measurements.marginRight\n ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"scatter_yScale = d3\n .scaleLinear()\n .domain(MSFT_price_range)\n .range([\n measurements.height - measurements.marginBottom,\n measurements.marginTop\n ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"md` ## *Length: Bar Chart*`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"md`group by year, average stock price`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"// Create a nested data structure that has the min,max, and avg price for each PermitClass\nsummary_by_year = d3\n .nest() // create a nesting function\n .key(d => d.date.getFullYear()) // Where we nest by the \"date\" value of each object\n .rollup(d => {\n // For each _group_, compute the following values\n return {\n max_price: d3.max(d, dd => +dd.price), // get the highest stock price for this group!\n min_price: d3.min(d, dd => +dd.price), // get the min stock price for this group!\n avg_price: +d3.mean(d, dd => +dd.price).toFixed(2)\n };\n })\n .entries(MSFTData) // Pass our data in as we create the function!","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"scaleBand = d3\n .scaleBand()\n .domain(summary_by_year.map(d => d.key))\n .range([\n measurements.marginLeft,\n measurements.width - measurements.marginRight\n ])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"bar_yScale = d3\n .scaleLinear()\n .domain([0, d3.max(summary_by_year.map(d => d.value.avg_price))])\n .range([\n measurements.height - measurements.marginBottom,\n measurements.marginTop\n ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"md` ## *Angle: Pie Chart*`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"pie = d3\n .pie()\n .sort(null)\n .value(d => d.value.avg_price)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"color = d3\n .scaleOrdinal()\n .domain(summary_by_year.map(d => d.key))\n .range(\n d3\n .quantize(\n t => d3.interpolateSpectral(t * 0.8 + 0.2),\n summary_by_year.length\n )\n .reverse()\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"arc = d3\n .arc()\n .innerRadius(0)\n .outerRadius(Math.min(measurements.width, measurements.height) / 2 - 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"arcLabel = {\n const radius = (Math.min(measurements.width, measurements.height) / 2) * 0.8;\n return d3\n .arc()\n .innerRadius(radius)\n .outerRadius(radius);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"pie(summary_by_year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"md` ## *Color: Scatter Plot*`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"md`highlight the highest point of each year`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"above_or_below = d3.scaleOrdinal([\"true\", \"false\"], d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"md`The main limitation is that if y axis is not a good fit it will provide little help to the audience`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"md`Select data to compare`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"viewof comapre1 = DOM.select([...new Set(formattedData.map(d => d.symbol))])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"viewof compare2 = DOM.select([...new Set(formattedData.map(d => d.symbol))])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"comapreData = formattedData.filter(\n d => d.symbol == comapre1 || d.symbol == compare2\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"// Create a nested data structure that has the min,max, and avg price for each PermitClass\nsummary_by_date = d3\n .nest() // create a nesting function\n .key(d => d.date) // Where we nest by the \"date\" value of each object\n .entries(comapreData) // Pass our data in as we create the function!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"price_diff_by_date = summary_by_date.map(d => {\n if (d.values.length != 2) {\n return false;\n }\n const formatTime = d3.timeParse(\"%b %d %Y\");\n const day = new Date(d.key);\n return {\n date: day,\n difference: Math.abs(d.values[0].price - d.values[1].price)\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"difference_price_range = d3.extent(price_diff_by_date, d => +d.difference)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"difference_time_range = d3.extent(price_diff_by_date, d => d.date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"// define X scale\ndifference_xScale = d3\n .scaleTime()\n .domain(difference_time_range)\n .range([\n measurements.marginLeft,\n measurements.width - measurements.marginRight\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"difference_yScale = d3\n .scaleLinear()\n .domain(difference_price_range)\n .range([\n measurements.height - measurements.marginBottom,\n measurements.marginTop\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"md` ## bad difference charts without proper y tuning`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"md` ## good difference charts with proper y tuning(tune y axis with new extent) `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"md`Definately need a section to cover Date converting and stuff. Wasted a few hours on Date object.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"import { displayCaution } from \"@info474/utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"stockData = d3.csv(\n \"https://raw.githubusercontent.com/vega/datalib/master/test/data/stocks.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"formattedData = stockData.map(d => {\n const formatTime = d3.timeParse(\"%b %d %Y\");\n\n return {\n symbol: d.symbol,\n price: d.price,\n date: formatTime(d.date)\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"//define viewbox\nmeasurements = {\n return {\n width: 800,\n height: 400,\n marginLeft: 50,\n marginRight: 50,\n marginTop: 50,\n marginBottom: 50\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"import { swatches, legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W54","stdlib":"1"}} 44:null