45:["$","title",null,{"children":"Graphical Encodings Yousuf | Spring 2020 Info Vis | Observable"}] 4d:T49b,md`There were a few limitations in this study design I found, some from my own perspective, as well as those noted in the text. **Text**
"*We do not pretend that the items on our list are completely distinct tasks; for example, judging angle and direction are clearly related. We do not pretend that our list is exhaustive; for example, color hue and texture (Bertin 1973) are two elementary tasks excluded from the list because they do not have an unambiguous single method of ordering from small to large and thus might be regarded as better for encoding categories rather than real variables*." **Own Findings**
Although they did their best to account for technical experience (with their findings showing there were no differences between the results of these groups) and removed participants who did not follow instructions, I am not satisified with the level of information provided about the participants. Some questions I have are:
1) What are the level of participants schooling?
2) What are the ages of the participants?
3) What types of jobs do those with technical experience have?
4) Issues surrounding other cognitive or visual abilities.`4e:T445,length_chart = { const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]); svg .append("text") .attr('x', (width + margin.left) / 2) .attr('y', height - 485) .style('text-anchor', 'middle') .style("font-size", "20px") .style("font-weight", "bold") .text("Spotify Top 10 Songs"); svg.append("g").call(xAxis); svg .append("text") .attr('x', (width + margin.left) / 2) .attr('y', height - margin.bottom + 45) .style('text-anchor', 'middle') .text('Popularity'); svg.append("g").call(yAxis); svg .append("text") .attr("y", margin.left / 2 - 10) .attr("x", -(height / 2) + 10) .style("text-anchor", "middle") .attr('transform', "rotate(-90)") .text("Danceability"); svg .selectAll("rect") .data(position_data) .join(enter => enter .append("rect") .attr("fill", "#9e0142") .attr("x", d => x(d.x)) .attr("y", d => y(d.y)) .attr("width", x2.bandwidth() - 340) .attr("height", d => y(0) - y(d.y) - 340) ); return svg.node(); }4f:T482,angle_chart = { const pie = d3 .pie() .sort(null) .value(d => d.y); const pieChart = pie(position_data); const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2 - 30, width, height + 30]); const arc = d3 .arc() .innerRadius(0) .outerRadius(Math.min(width, height) / 2); const radius = (Math.min(width, height) / 2) * 0.8; const textPosition = d3 .arc() .innerRadius(radius) .outerRadius(radius); svg .append("g") .attr("stroke", "white") .selectAll("path") .data(pieChart) .join("path") .attr("fill", "#9e0142") .attr("d", arc); svg .append("text") .attr("class", "text") .attr("transform", "translate(0,-260)") .style('text-anchor', 'middle') .style("font-size", "20px") .style("font-weight", "bold") .text("Genre"); svg .append("g") .attr("font-size", 15) .attr("text-anchor", "middle") .attr("fill", "white") .selectAll("text") .data(pieChart) .join("text") .attr("transform", d => `translate(${textPosition.centroid(d)})`) .text(d => d.data.color); return svg.node(); }50:T631,curve_chart = { const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]); svg .append("text") .attr('x', (width + margin.left) / 2) .attr('y', height - 485) .style('text-anchor', 'middle') .style("font-size", "20px") .style("font-weight", "bold") .text("Average Monthly Rainfall (SEA vs NY)"); svg.append("g").call(xAxisCurve); svg .append("text") .attr('x', (width + margin.left) / 2) .attr('y', height - margin.bottom + 45) .style('text-anchor', 'middle') .text('Month'); svg.append("g").call(yAxisCurve); svg .append("text") .attr("y", margin.left / 2 - 10) .attr("x", -(height / 2) + 10) .style("text-anchor", "middle") .attr('transform', "rotate(-90)") .text("Rainfall (inches)"); svg .append("path") .datum(sea) .attr("fill", "none") .attr("stroke", "darkblue") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line_sea); svg .append("text") .attr("x", 110) .attr("y", 180) .text("SEA") .style("font-size", "15px") .attr("alignment-baseline", "middle"); svg .append("path") .datum(ny) .attr("fill", "none") .attr("stroke", "#9e0142") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line_ny); svg .append("text") .attr("x", 125) .attr("y", 290) .text("NY") .style("font-size", "15px") .attr("alignment-baseline", "middle"); return svg.node(); }51:T41b,alt_chart = { const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]); svg .append("text") .attr('x', (width + margin.left) / 2) .attr('y', height - 485) .style('text-anchor', 'middle') .style("font-size", "20px") .style("font-weight", "bold") .text("Difference in Average Monthly Rainfall (SEA, NY)"); svg.append("g").call(xAxisCurve); svg .append("text") .attr('x', (width + margin.left) / 2) .attr('y', height - margin.bottom + 45) .style('text-anchor', 'middle') .text('Month'); svg.append("g").call(yAxisCurve); svg .append("text") .attr("y", margin.left / 2 - 10) .attr("x", -(height / 2) + 10) .style("text-anchor", "middle") .attr('transform', "rotate(-90)") .text("Rainfall (inches)"); svg .append("path") .datum(diff) .attr("fill", "none") .attr("stroke", "#9e0142") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line_diff); return svg.node(); }52:[{"id":"0e8be49e4a3ba3551dafbbfdcbd511512fadbda3bbe9b5088f91aeb5d34b42788de27bdd732fc54e07fd284aa9e489849d3fa03486a61467937aa84bf97f8a49","href":"https://static.observableusercontent.com/files/0e8be49e4a3ba3551dafbbfdcbd511512fadbda3bbe9b5088f91aeb5d34b42788de27bdd732fc54e07fd284aa9e489849d3fa03486a61467937aa84bf97f8a49","name":"top50.csv","type":"text/csv","lastModified":1587841696702.136,"size":4294},{"id":"5a7ff938818f9925164d416e07c7b3777bd9cce00a99e36564978357961a918d148ba9248818e155bd3e0297aac51a77fb86303a8eb74cfcdcf17336f1b95973","href":"https://static.observableusercontent.com/files/5a7ff938818f9925164d416e07c7b3777bd9cce00a99e36564978357961a918d148ba9248818e155bd3e0297aac51a77fb86303a8eb74cfcdcf17336f1b95973","name":"Screen Shot 2020-04-25 at 11.40.43 AM.png","type":"image/png","lastModified":1587840189884.93,"size":90293},{"id":"5055beb501111f33c1ce3e90fb2139f2c33b2982a599cc0ea9d584f20f57c6280e88f0b48a9febe7d82617a1d856ce08808478280a022b7f93988b11f1eb55ac","href":"https://static.observableusercontent.com/files/5055beb501111f33c1ce3e90fb2139f2c33b2982a599cc0ea9d584f20f57c6280e88f0b48a9febe7d82617a1d856ce08808478280a022b7f93988b11f1eb55ac","name":"weather@1.csv","type":"text/csv","lastModified":1588189811549.2,"size":167}] 49:{"id":"c0f60a6077137645","slug":"graphical-encodings-yousuf","title":"Graphical Encodings Yousuf","thumbnail":"ba7aae6e494e3c1bf01a5eef62f53547c7ca3dae05a3c4ab1602bceceae232ae","access_level":"public","create_time":"$D2020-04-24T23:05:52.276Z","update_time":"$D2020-05-06T01:31:08.844Z","view_time":null,"first_public_time":"$D2020-04-25T19:11:45.309Z","has_unpublished_edits":null,"fork":{"id":"54f7ad996529c36f","slug":"graphical-encodings","title":"Graphical Encodings","owner":{"id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis"}},"stars":1,"starred":false,"owner":{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","bio":"UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues. ","followed_by_you":false,"follows_you":false},"version":969,"publish_version":969,"role":null,"authored":false,"authors":[{"type":"individual","id":"e82ff7b39f6354cf","login":"yousufj","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Graphical Encodings Yousuf","cells":[{"id":0,"value":"md`# Graphical Encodings Yousuf`","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`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"md`In order to assess perceptual accuracy of different encodings, researchers approached their question with both experimentation and theory. They asked participants to perform **elementary perceptual tasks**, by extracting quantitive information from graphs, and then **ordered the elementary perceptual tasks by accuracy of extraction**.\n\n**Elementary Perceptual Tasks**
\nIn one experiment, 55 participants were asked to extract quantitive information from five types of bar charts. Researchers would then note which tasks were used to extact information, such as judging position or length.\n\nThe participants fell into two categories:\n(1) females, mostly housewives, without substantial technical experience\n(2) males and females with substantial technical training and working in technical jobs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"FileAttachment(\"Screen Shot 2020-04-25 at 11.40.43 AM.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"md`**Order Elementary Tasks by Accuracy of Extraction**\n1. Position along a common scale
\n2. Positions along nonaligned scales
\n3. Length, direction, angle
\n4. Area
\n5. Volume, curvature
\n6. Shading, color saturation`","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":132,"value":"$4d","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":161,"value":"md`Along with being able to encode paried values with two variables seperately (x,y) using position encoding, additional information we are able to extract from a scatter plot are being able to understand relationships between values through perception of direction.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"encoding_types = md`## Encoding Types\n\n> _Position, Length, Angle, Color_\n.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"md`### Visualizations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"position_chart = {\n const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]);\n\n svg\n .append(\"text\")\n .attr('x', (width + margin.left) / 2)\n .attr('y', height - 485)\n .style('text-anchor', 'middle')\n .style(\"font-size\", \"20px\")\n .style(\"font-weight\", \"bold\")\n .text(\"Spotify Top 10 Songs\");\n\n svg.append(\"g\").call(xAxis);\n\n svg\n .append(\"text\")\n .attr('x', (width + margin.left) / 2)\n .attr('y', height - margin.bottom + 45)\n .style('text-anchor', 'middle')\n .text('Popularity');\n\n svg.append(\"g\").call(yAxis);\n\n svg\n .append(\"text\")\n .attr(\"y\", margin.left / 2 - 10)\n .attr(\"x\", -(height / 2) + 10)\n .style(\"text-anchor\", \"middle\")\n .attr('transform', \"rotate(-90)\")\n .text(\"Danceability\");\n\n svg\n .selectAll(\"circle\")\n .data(position_data)\n .join(enter => enter.append(\"circle\"))\n .attr(\"fill\", \"#9e0142\")\n .attr(\"cx\", d => x(d.x))\n .attr(\"cy\", d => y(d.y))\n .attr(\"opacity\", .9)\n .attr(\"r\", 10);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"md`Encoding: Position
\nAccuracy: This encoding does a good job of showcasing the relationships between danceability and popularity of a given song, but it doesn't tell the audience about any trends, since the plot has a lot of variability, and it doesn't tell the audience any other story about the given song (it's genre, year released, etc). For information extracting purposes, I think the length and position encoding are comparable. In an essence, this plot is meaningless alone, but with more values or annotation added, it could paint a better picture. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"md`\nEncoding: Length
\nAccuracy: This encoding does a good job of showcasing the relationships between danceability and popularity of a given song, but it doesn't tell the audience about any trends, since the plot has a lot of variability, and it doesn't tell the audience any other story about the given song (it's genre, year released, etc). For information extracting purposes, I think the length and position encoding are comparable. In an essence, this plot is meaningless alone, but with more values or annotation added, it could paint a better picture.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"md`\nEncoding: Angle
\nAccuracy: This encoding does a poor job of showcasing the percentage makeup of genres for the top ten songs, since all sections initially appear the same size and do not have any numeric information, but does a good job of informing the audience which genres are present.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md` ### Color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"legend({\n color: color,\n title: \"Popularity Score\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"color_chart = {\n const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]);\n\n svg\n .append(\"text\")\n .attr('x', (width + margin.left) / 2)\n .attr('y', height - 485)\n .style('text-anchor', 'middle')\n .style(\"font-size\", \"20px\")\n .style(\"font-weight\", \"bold\")\n .text(\"Spotify Top 10 Songs\");\n\n svg.append(\"g\").call(xAxis);\n\n svg\n .append(\"text\")\n .attr('x', (width + margin.left) / 2)\n .attr('y', height - margin.bottom + 45)\n .style('text-anchor', 'middle')\n .text('Popularity');\n\n svg.append(\"g\").call(yAxis);\n\n svg\n .append(\"text\")\n .attr(\"y\", margin.left / 2 - 10)\n .attr(\"x\", -(height / 2) + 10)\n .style(\"text-anchor\", \"middle\")\n .attr('transform', \"rotate(-90)\")\n .text(\"Danceability\");\n\n svg\n .selectAll(\"circle\")\n .data(position_data)\n .join(enter => enter.append(\"circle\"))\n .attr(\"cx\", d => x(d.x))\n .attr(\"cy\", d => y(d.y))\n .attr(\"opacity\", .9)\n .attr(\"r\", 10)\n .attr(\"fill\", d => color(d.x));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"md`Encoding: Color
\nAccuracy: This encoding does a good job of showcasing the relationships between danceability and popularity of a given song, but it doesn't tell the audience about any trends, since the scatterplot has a lot of variability. With color added, it is easier for the audience to see popularity increase in the Y direction. If the color was able to represent time (decade made), it might give the viewer a better understanding of why it's popularity has that value. It doesn't tell the audience any other story about the given song (it's genre, year released, etc). Lastly, this plot is more visually exciting and grabs my attention compared to those in black and white.`","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\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"md`Limitation: \nThe limitation with curve difference charts is that the brain wants to judge distance curves in different regions, and not vertical distance, so it is difficult to accurately perceive length, and thus, the underlying values of the chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"md`Curve Difference: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"md`Alternative: Separate Cartesian graphs or just one line which represents the difference between the two comparison values
\nDifferences: Able to judge position along a common scales, can easily compare values, less information overload`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"$51","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`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"md`Overall, this was a great exercise for me to practice different types of graphs and learn about encoding.\n\nOne thing I'm still struggling to do is find reliable resources for syntax in ObservableHQ. Another minor issue was that the reading was a bit dense, but otherwise very interesting!`","pinned":false,"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":204,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"margin = ({ top: 30, right: 30, bottom: 60, left: 60 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"md` Data `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"all_data = d3.csvParse(await FileAttachment(\"top50.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"data = all_data.slice(0, 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"position_data = Object.keys(data).map(d => {\n return {\n x: data[d].Popularity,\n y: data[d].Danceability,\n color: data[d].Genre\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"weather = d3.csvParse(await FileAttachment(\"weather@1.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"sea = Object.keys(weather).map(d => {\n return {\n x: weather[d].x,\n y: weather[d].sea\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"ny = Object.keys(weather).map(d => {\n return {\n x: weather[d].x,\n y: weather[d].ny\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"diff = Object.keys(weather).map(d => {\n return {\n x: weather[d].x,\n y: Math.abs(weather[d].sea - weather[d].ny)\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"md` Domain `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"x_dom = d3.extent(position_data.map(d => +d.x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"y_dom = d3.extent(position_data.map(d => +d.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"x_dom_sea = d3.extent(sea.map(d => +d.x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"y_dom_sea = d3.extent(sea.map(d => +d.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"x_dom_ny = d3.extent(ny.map(d => +d.x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"y_dom_ny = d3.extent(ny.map(d => +d.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"x_dom_diff = d3.extent(diff.map(d => +d.x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"y_dom_diff = d3.extent(diff.map(d => +d.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"md`Scale`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"x = d3\n .scaleLinear()\n .domain(x_dom)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"x2 = d3\n .scaleBand()\n .domain(x_dom)\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"y = d3\n .scaleLinear()\n .domain(y_dom)\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"color = d3.scaleQuantize(x_dom, d3.schemeSpectral[10])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"colors_used = d3.schemeSpectral[10]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"line = d3\n .line()\n .x(d => x(d.x))\n .y(d => y(d.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"line_sea = d3\n .line()\n .x(d => x_curve_sea(d.x))\n .y(d => y_curve_sea(d.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"x_curve_sea = d3\n .scaleLinear()\n .domain(x_dom_sea)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"y_curve_sea = d3\n .scaleLinear()\n .domain(y_dom_sea)\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"line_ny = d3\n .line()\n .x(d => x_curve_sea(d.x))\n .y(d => y_curve_sea(d.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"x_curve_ny = d3\n .scaleLinear()\n .domain(x_dom_ny)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"y_curve_ny = d3\n .scaleLinear()\n .domain(y_dom_ny)\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"line_diff = d3\n .line()\n .x(d => x_curve_diff(d.x))\n .y(d => y_curve_diff(d.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"x_curve_diff = d3\n .scaleLinear()\n .domain(x_dom_diff)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"y_curve_diff = d3\n .scaleLinear()\n .domain(y_dom_diff)\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"md`Axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"yAxis = g =>\n g.attr(\"transform\", `translate(${margin.left},0)`).call(d3.axisLeft(y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"xAxisCurve = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x_curve_sea))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"yAxisCurve = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y_curve_sea))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"md`Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"_ = require(\"lodash\")","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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"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":"$W52","stdlib":"1"}} 44:null