31:Tcaa,table_info = [ { technique: "Select", description: "Select interaction techniques provide users with the ability to mark a data item(s) of interest to keep track of it. When too many data items are presented on a view, or when representations are changed, it is difficult for users to follow items of interest. By making items of interest visually distinctive, users can easily keep track of them even in a large data set and/or with changes in representations.", example: "Example of Select" }, { technique: "Explore", description: "Explore interaction techniques enable users to examine a different subset of data cases. For example, when a user can pan in and out of a particular area of the graph, this is exploration.", example: "Explore example" }, { technique: "Reconfigure", description: "Reconfigure interaction techniques provide users with different perspectives onto the data set by changing the spatial arrangement of representations. For example reorienting the configuration of a web graph.", example: "Force Directed Diagram Example" }, { technique: "Encode", description: "Encode techniques enable users to alter the fundamental visual representation of the data including visual appearance (e.g., color, size, and shape) of each data element. It shows the same data but mapping different values to the metrics.", example: "Treemap example" }, { technique: "Abstract/Elaborate", description: "Abstract/Elaborate interaction techniques provide users with the ability to adjust the level of abstraction of a data representation. For example, if you want to see a map on the statewide rather than the county-wide level.", example: " Abstract Map" }, { technique: "Filter", description: "Filter interaction techniques enable users to change the set of data items being presented based on some specific conditions. In this type of interaction, users specify a range or condition, so that only data items meeting those criteria are presented.", example: "Filter example" }, { technique: "Connect", description: "Connect refers to interaction techniques that are used to (1) highlight associations and relationships between data items that are already represented and (2) show hidden data items that are relevant to a specified item. For example, if you want to show a 3d representation instead of a 2d representation to try to illuminate a connection among 3 variables", example: "2D to 3D example" } ]32:[{"id":"763ab58439d1105e05105f32403469467018c82576fce8c53f094167d297d6a9d5c725ac86ef662c9da9029af5b88c9e896898b1345f95f71decc9ec3af7ea43","href":"https://static.observableusercontent.com/files/763ab58439d1105e05105f32403469467018c82576fce8c53f094167d297d6a9d5c725ac86ef662c9da9029af5b88c9e896898b1345f95f71decc9ec3af7ea43","name":"marathonData.csv","type":"text/csv","lastModified":1590618353911.108,"size":23001}] 2f:{"title":"Interactivity - Buxton","cells":[{"id":0,"value":"md`# Interactivity - Buxton`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"summary = md`In this notebook, you will learn about **interaction techniques** for visualization through following steps: \n1. Carefully read [this academic paper](https://www.cc.gatech.edu/~stasko/papers/infovis07-interaction.pdf) summarizing different techinques for interactions\n2. Fill out a table with descriptions and hyperlinks to examples\n3. Build three interactions technqiues of your choice _from scratch_ (i.e., not importing notebooks)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"set_up = md`## Set up`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"displayCaution(\n \"Make sure you fork and rename this notebook before continuing!\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"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 _Interactivity Freeman_)

**Add Assignment to Collection**: add the assignment to the [appropriate collection](https://observablehq.com/collection/@info474/interactivity-assignments)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"summary_table = md`## Summary Table\nEdit the \\`table_info\\` cell below to populate the corresponding table with descriptions and examples of different interaction techniques.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"render_data_table(table_info)","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"sample_visualizations = md`## Sample Visualizations\nIn this section, create -- **from scratch** -- three interactive visualization of your choice. Remember, so of the interactions may come from a separate cell (e.g., an [input](https://observablehq.com/@jashkenas/inputs) element), while others may come from interacting with the chart directly (hovering, clicking, mouse-wheel events, etc.).\n\nFeel free to use your final project data for exploration and practice!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"md`## Filter Interaction`","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"marathonDta = Object.assign(\n d3.csvParse(\n await FileAttachment(\"marathonData.csv\").text(),\n ({ rate, gender }) => {\n if (gender == gen || gen == \"All\") {\n return rate;\n }\n }\n ),\n { x: \"Age\", y: \"Frequency\" }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":612,"value":"bins = d3\n .histogram()\n .domain(x.domain())\n .thresholds(x.ticks(40))(marathonDta)","pinned":true,"hidden":false,"mode":"ojs"},{"id":613,"value":"x = d3\n .scaleLinear()\n .domain(d3.extent(marathonDta))\n .nice()\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(bins, d => d.length)])\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":619,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(\n d3\n .axisBottom(x)\n .ticks(width / 80)\n .tickSizeOuter(0)\n )\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(marathonDta.x)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":617,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(marathonDta.y)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":649,"value":"viewof gen = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":621,"value":"filterChart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\")\n .data(bins)\n .join(\"rect\")\n .attr(\"x\", d => x(d.x0) + 1)\n .attr(\"width\", d => Math.max(0, x(d.x1) - x(d.x0) - 1))\n .attr(\"y\", d => y(d.length))\n .attr(\"height\", d => y(0) - y(d.length));\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":653,"value":"md`## Other Graph`","pinned":true,"hidden":false,"mode":"ojs"},{"id":750,"value":"marginScatter = ({ top: 25, right: 20, bottom: 35, left: 40 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":655,"value":"marathonDtaParsed = Object.assign(\n d3.csvParse(\n await FileAttachment(\"marathonData.csv\").text(),\n ({ rate, gender, final, split }) => {\n if (parseInt(rate) == 33) {\n var d = {};\n var timing = final.split(\":\");\n var splitTime = split.split(\":\");\n d.x =\n parseInt(3600 * timing[0]) +\n parseInt(timing[1]) * 60 +\n parseInt(timing[2]);\n d.y =\n parseInt(3600 * splitTime[0]) +\n parseInt(splitTime[1]) * 60 +\n parseInt(splitTime[2]);\n d.name = gender;\n return d;\n }\n }\n ),\n { y: \"Split Time →\", x: \"Final Time\" }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":721,"value":"xScatter = d3\n .scaleLinear()\n .domain(d3.extent(marathonDtaParsed, d => d.x))\n .nice()\n .range([marginScatter.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":723,"value":"yScatter = d3\n .scaleLinear()\n .domain(d3.extent(marathonDtaParsed, d => d.y))\n .nice()\n .range([height - marginScatter.bottom, marginScatter.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":791,"value":"md`### Hover over to see final completion time (bottom of circle)`","pinned":true,"hidden":false,"mode":"ojs"},{"id":704,"value":"scatterChart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\").call(xAxisScatter);\n\n svg.append(\"g\").call(yAxisScatter);\n\n svg.append(\"g\").call(grid);\n\n svg\n .append(\"g\")\n .attr(\"id\", \"circles\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", \"none\")\n .selectAll(\"circle\")\n .data(marathonDtaParsed)\n .join(\"circle\")\n .attr(\"cx\", d => xScatter(d.x))\n .attr(\"cy\", d => yScatter(d.y))\n .attr(\"r\", 10);\n\n svg.append(\"g\").attr(\"id\", \"annotation\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":725,"value":"xAxisScatter = g =>\n g\n .attr(\"transform\", `translate(0,${height - marginScatter.bottom})`)\n .call(d3.axisBottom(xScatter).ticks(width / 80))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", width)\n .attr(\"y\", marginScatter.bottom - 4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(marathonDtaParsed.x)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":727,"value":"yAxisScatter = g =>\n g\n .attr(\"transform\", `translate(${marginScatter.left},0)`)\n .call(d3.axisLeft(yScatter))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", -marginScatter.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(marathonDtaParsed.y)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":729,"value":"grid = g =>\n g\n .attr(\"stroke\", \"currentColor\")\n .attr(\"stroke-opacity\", 0.1)\n .call(g =>\n g\n .append(\"g\")\n .selectAll(\"line\")\n .data(xScatter.ticks())\n .join(\"line\")\n .attr(\"x1\", d => 0.5 + xScatter(d))\n .attr(\"x2\", d => 0.5 + xScatter(d))\n .attr(\"y1\", marginScatter.top)\n .attr(\"y2\", height - marginScatter.bottom)\n )\n .call(g =>\n g\n .append(\"g\")\n .selectAll(\"line\")\n .data(yScatter.ticks())\n .join(\"line\")\n .attr(\"y1\", d => 0.5 + yScatter(d))\n .attr(\"y2\", d => 0.5 + yScatter(d))\n .attr(\"x1\", marginScatter.left)\n .attr(\"x2\", width - marginScatter.right)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":771,"value":"circles = d3\n .select(scatterChart)\n .select(\"#circles\")\n .selectAll(\"circle\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":782,"value":"annotations = d3.select(scatterChart).select(\"g#annotation\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":770,"value":"hover = {\n const svg = d3.select(scatterChart);\n\n // used to test out interactivity in this cell\n const status = html`hover: none`;\n\n circles.on(\"mouseover.hover1\", function(d) {\n let me = d3.select(this);\n\n annotations\n .insert(\"text\")\n .attr(\"id\", \"label\")\n .attr(\"x\", me.attr(\"cx\"))\n .attr(\"y\", me.attr(\"cy\"))\n .attr(\"text-anchor\", \"middle\")\n .text(d.x, d.y);\n\n // show what we interacted with\n d3.select(status).text(\"hover: \" + d.name);\n });\n\n circles.on(\"mouseout.hover1\", function(d) {\n annotations.select(\"text#label\").remove();\n d3.select(status).text(\"hover: none\");\n });\n\n return status;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":795,"value":"md`## Last Graph`","pinned":true,"hidden":false,"mode":"ojs"},{"id":800,"value":"marathonDta2 = Object.assign(\n d3.csvParse(\n await FileAttachment(\"marathonData.csv\").text(),\n ({ rate, final }) => {\n if (parseInt(rate) > 30 && ageT == \"Over 30\") {\n var hour = final.split(\":\")[0];\n var minute = final.split(\":\")[1];\n var second = final.split(\":\")[2];\n return parseInt(3600 * hour + 60 * minute + second);\n } else if (parseInt(rate) <= 30 && ageT == \"Under 30\") {\n var hour = final.split(\":\")[0];\n var minute = final.split(\":\")[1];\n var second = final.split(\":\")[2];\n return parseInt(3600 * hour + 60 * minute + second);\n }\n }\n ),\n { x: \"Final\", y: \"Frequency\" }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":816,"value":"bins2 = d3\n .histogram()\n .domain(x2.domain())\n .thresholds(x2.ticks(100))(marathonDta2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":818,"value":"x2 = d3\n .scaleLinear()\n .domain(d3.extent(marathonDta2))\n .nice()\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":820,"value":"y2 = d3\n .scaleLinear()\n .domain([0, d3.max(bins2, d => d.length)])\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":822,"value":"xAxis2 = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(\n d3\n .axisBottom(x2)\n .ticks(width / 80)\n .tickSizeOuter(0)\n )\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(marathonDta2.x)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":825,"value":"yAxis2 = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y2).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(marathonDta2.y)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":858,"value":"md`### Histogram of finish times (in seconds)`","pinned":true,"hidden":false,"mode":"ojs"},{"id":862,"value":"viewof ageT = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":813,"value":"filterChart2 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\")\n .data(bins2)\n .join(\"rect\")\n .attr(\"x\", d => x2(d.x0) + 1)\n .attr(\"width\", d => Math.max(0, x2(d.x1) - x2(d.x0) - 1))\n .attr(\"y\", d => y2(d.length))\n .attr(\"height\", d => y2(0) - y2(d.length));\n\n svg.append(\"g\").call(xAxis2);\n\n svg.append(\"g\").call(yAxis2);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"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":14,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"import {\n displayCaution,\n render_data_table,\n table_styles\n} from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"table_styles","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":626,"value":"width = 954","pinned":true,"hidden":false,"mode":"ojs"},{"id":629,"value":"margin = ({ top: 50, right: 30, bottom: 40, left: 40 })","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}