31:T62e,table_info = [ { technique: "Select", description: "Allows a certain element to be the focal point", example: "put a Graphical Intersection Chart" }, { technique: "Explore", description: "your description here", example: "Graphical Intersection Chart example here" }, { technique: "Reconfigure", description: "your description here", example: "put a hyperlinked example here" }, { technique: "Encode", description: "your description here", example: "put a hyperlinked example here" }, { technique: "Abstract/Elaborate", description: "your description here", example: "put a hyperlinked example here" }, { technique: "Filter", description: "your description here", example: "put a hyperlinked example here" }, { technique: "Connect", description: "your description here", example: "put a hyperlinked example here" } ]32:[{"id":"ea74acf71b1cfad1c2bb4f474c27c8d23485bf15aee8f77428ef0d497ef3c24e9e5aa1d13407233690d953f7b6ea16a096af09cd3eff6741f51d09357fd52661","href":"https://static.observableusercontent.com/files/ea74acf71b1cfad1c2bb4f474c27c8d23485bf15aee8f77428ef0d497ef3c24e9e5aa1d13407233690d953f7b6ea16a096af09cd3eff6741f51d09357fd52661","name":"speeds_by_rank.csv","type":"text/csv","lastModified":1590552790611.561,"size":2869},{"id":"e3e6e926e747abb121e7c6ff6b513abe7bcab366ad8f7c6f81ba64dc203be9174ba7a07b14f611d018904143926fa53e697c4156346910aab46b6544287a78f9","href":"https://static.observableusercontent.com/files/e3e6e926e747abb121e7c6ff6b513abe7bcab366ad8f7c6f81ba64dc203be9174ba7a07b14f611d018904143926fa53e697c4156346910aab46b6544287a78f9","name":"runners_spd_gender@1.csv","type":"text/csv","lastModified":1590549458401.242,"size":1172},{"id":"5a1f6e27850911527196a7ffdb9e86fc05907c1b5ed85a09da28406de03405c5ce2b353937b815ac0f83bb03ee74a3f16599a05a00d91ea72f02d489890d00eb","href":"https://static.observableusercontent.com/files/5a1f6e27850911527196a7ffdb9e86fc05907c1b5ed85a09da28406de03405c5ce2b353937b815ac0f83bb03ee74a3f16599a05a00d91ea72f02d489890d00eb","name":"DUV_Baja_Trail (1).csv","type":"text/csv","lastModified":1590548215682.66,"size":23580},{"id":"d04488674079d6c2d4ac07fc89ec609c7572fe16f9145522d48e2adad215d509601125d4f7491177d4af65e3b4f708e87c74edb062f0104ee8735c745baf4470","href":"https://static.observableusercontent.com/files/d04488674079d6c2d4ac07fc89ec609c7572fe16f9145522d48e2adad215d509601125d4f7491177d4af65e3b4f708e87c74edb062f0104ee8735c745baf4470","name":"runners_by_speed.csv","type":"text/csv","lastModified":1590547106624.309,"size":295}] 2f:{"title":"Interactivity","cells":[{"id":0,"value":"md`# Interactivity`","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":"d3.min(speed_dist, d => d.avg_sp_rd)","pinned":true,"hidden":false,"mode":"ojs"},{"id":612,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":608,"value":"margin = ({ top: 50, right: 30, bottom: 40, left: 40 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":606,"value":"chart2_x = d3\n .scaleLinear()\n .domain([4.6, 10.1])\n .range([margin.left, width - margin.right]).nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":610,"value":"chart2_y = d3\n .scaleLinear()\n .domain([0, 15])\n .range([height - margin.bottom, margin.top]).nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":614,"value":"chart2_xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(chart2_x))","pinned":true,"hidden":false,"mode":"ojs"},{"id":616,"value":"chart2_yAxis = g =>\n g.attr(\"transform\", `translate(${margin.left},0)`).call(d3.axisLeft(chart2_y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":618,"value":"barChart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n svg.append(\"g\").call(chart2_xAxis);\n svg.append(\"g\").call(chart2_yAxis);\n\n svg\n .append(\"g\")\n .selectAll(\"rect\")\n .data(speed_dist)\n .join(\"rect\")\n .attr(\"fill\", \"green\")\n .attr(\"stroke\", \"black\")\n .attr(\"opacity\", 0.5)\n .attr(\"x\", d => chart2_x(d.avg_sp_rd) + margin.left)\n .attr(\"y\", d => chart2_y(d.num_runners))\n .attr(\"width\", \"10px\")\n .attr(\"height\", d => chart2_y(0) - chart2_y(d.num_runners));\n\n svg\n .append(\"text\")\n .attr(\"x\", width / 3)\n .attr(\"y\", height)\n .text(\"Average Speed Throughout Race\")\n .style(\"font-size\", \"20px\");\n\n svg\n .append(\"text\")\n .attr(\"transform\", \"translate(10, 300) rotate(-90)\")\n .text(\"Number of Runners\")\n .style(\"font-size\", \"20px\");\n\n svg\n .append(\"text\")\n .attr(\"x\", width / 3)\n .attr(\"y\", 15)\n .text(\"Distribution of Runners by Average Speed\")\n .style(\"font-size\", \"20px\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"gender_color_scale = d3\n .scaleOrdinal()\n .domain(['M', 'F'])\n .range([\"#55CDFC\", \"#F7A8B8\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":699,"value":"gender_color_scale2 = d3\n .scaleOrdinal()\n .domain(['M', 'F', 'All'])\n .range([\"#55CDFC\", \"#F7A8B8\", \"#893BFF\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":697,"value":"viewof selectedGender2 = select({\n title: \"Gender for Visualization\",\n options: [\"M\", \"F\", \"All\"],\n value: \"All\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":637,"value":"gender_chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n svg.append(\"g\").call(chart2_xAxis);\n svg.append(\"g\").call(chart2_yAxis);\n\n svg\n .append(\"g\")\n .selectAll(\"circle\")\n .data(gender_speed.filter(function(d) {return d.gender === selectedGender2}))\n .join(\"circle\")\n .attr(\"fill\", d => gender_color_scale2(d.gender))\n .attr(\"stroke\", \"black\")\n .attr(\"opacity\", 0.5)\n .attr(\"cx\", d => chart2_x(d.avg_sp_rd) + margin.left)\n .attr(\"cy\", d => chart2_y(d.num_runners))\n .attr(\"r\", \"10px\")\n \n svg\n .append(\"text\")\n .attr(\"x\", width / 3)\n .attr(\"y\", height)\n .text(\"Average Speed Throughout Race\")\n .style(\"font-size\", \"20px\");\n\n svg\n .append(\"text\")\n .attr(\"transform\", \"translate(10, 300) rotate(-90)\")\n .text(\"Number of Runners\")\n .style(\"font-size\", \"20px\");\n\n svg\n .append(\"text\")\n .attr(\"x\", width / 3)\n .attr(\"y\", 15)\n .text(\"Runners by Average Speed\")\n .style(\"font-size\", \"20px\");\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":662,"value":"chart3_y = d3\n .scaleLinear()\n .domain([4.6, 10.1])\n .range([height - margin.bottom, margin.top]).nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":666,"value":"chart3_yAxis = g =>\n g.attr(\"transform\", `translate(${margin.left},0)`).call(d3.axisLeft(chart3_y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":655,"value":"chart3_x = d3\n .scaleLinear()\n .domain([1, 235])\n .range([margin.left, width - margin.right]).nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":657,"value":"chart3_xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(chart3_x))","pinned":true,"hidden":false,"mode":"ojs"},{"id":690,"value":"viewof selectedGender = select({\n title: \"Gender for Visualization\",\n options: [\"M\", \"F\"],\n value: \"M\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"rank_chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n svg.append(\"g\").call(chart3_xAxis);\n svg.append(\"g\").call(chart3_yAxis);\n\n svg\n .append(\"g\")\n .selectAll(\"circle\")\n .data(speed_rank.filter(function(d) {return d.gender === selectedGender}))\n .join(\"circle\")\n .attr(\"fill\", d => gender_color_scale(d.gender))\n .attr(\"stroke\", \"white\")\n .attr(\"opacity\", 0.5)\n .attr(\"cx\", d => chart3_x(d.rank))\n .attr(\"cy\", d => chart3_y(d.avg_spd_rd))\n .attr(\"r\", \"7px\")\n \n svg\n .append(\"text\")\n .attr(\"x\", width / 2.5)\n .attr(\"y\", height)\n .text(\"Finishing Place\")\n .style(\"font-size\", \"20px\");\n\n svg\n .append(\"text\")\n .attr(\"transform\", \"translate(10, 350) rotate(-90)\")\n .text(\"Average Speed Throughout Race\")\n .style(\"font-size\", \"20px\");\n\n svg\n .append(\"text\")\n .attr(\"x\", width / 3)\n .attr(\"y\", 15)\n .text(\"Finishing Place by Average Speed\")\n .style(\"font-size\", \"20px\");\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":593,"value":"speed_dist = d3.csvParse(await FileAttachment(\"runners_by_speed.csv\").text(), )","pinned":true,"hidden":false,"mode":"ojs"},{"id":623,"value":"females = full_data.filter(function(d) {return d.Gender === 'F'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":626,"value":"males = full_data.filter(function(d) {return d.Gender === 'M'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":620,"value":"gender_speed = d3.csvParse(await FileAttachment(\"runners_spd_gender@1.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":631,"value":"full_data = d3.csvParse(await FileAttachment(\"DUV_Baja_Trail (1).csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":652,"value":"speed_rank = d3.csvParse(await FileAttachment(\"speeds_by_rank.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":692,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":705,"value":"html``","pinned":true,"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":18,"value":"table_styles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}