31:Td35,table_info = [ { technique: "Select", description: "User marks a data item of interest to keep track of it.", example: "Complete History of the NFL" }, { technique: "Explore", description: "User changes the particular data subset that is currently visualized.", example: "COVID-19 United States Cases" }, { technique: "Reconfigure", description: "User alters the spatial arrangement of the currently-viewed data.", example: "Dow Jones Industrial Average" }, { technique: "Encode", description: "User modifies the visual encodings of the data points.", example: "Coronavirus Live Cases" }, { technique: "Abstract/Elaborate", description: "User adjusts the level of detail and specificity of the visualization.", example: "Chronic Absence across the United States" }, { technique: "Filter", description: "User changes the presented data items based on a condition or range.", example: "Career Paths after College" }, { technique: "Connect", description: "User highlights relationships and associations that are related to the presented data items", example: "Chronic Absence across the United States" } ]32:T5ba,chart2 = { if (graph_state) { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("g") .attr("fill", "blue") .selectAll("rect") .data(artists) .join("rect") .attr("x", (d, i) => x1(i)) .attr("y", d => y1(d.value.listeners)) .attr("height", d => y1(0) - y1(d.value.listeners)) .attr("width", x1.bandwidth()); svg .append("g") .call(xAxis1) .selectAll("text") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-45)") .style("text-anchor", "end"); svg.append("g").call(yAxis1); return svg.node(); } else { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, 50 * artists.length]); svg .append("g") .attr("fill", "blue") .selectAll("rect") .data(artists) .join("rect") .attr("x", d => x2(0)) .attr("y", (d, i) => y2(i)) .attr("height", x1.bandwidth()) .attr("width", d => x2(d.value.listeners) - x2(0)); svg .append("g") .call(xAxis2) .selectAll("text") .attr("dx", ".8em") .attr("dy", "-.15em") .attr("transform", "rotate(45)") .style("text-anchor", "start"); svg .append("g") .call(yAxis2) .selectAll("text") .attr("dy", "-.15em") .attr("transform", "rotate(-45)") .style("text-anchor", "end"); return svg.node(); } }33:[] 2f:{"title":"Interactivity - Hendrickson","cells":[{"id":0,"value":"md`# Interactivity - Hendrickson`","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":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":1203,"value":"md`## Prep`","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"import { geo_data, user_data } from '@info474/last-fm-data-source-group-12'","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"artists = {\n let all_artists = [];\n geo_data.forEach(d => {\n if (d.country.toUpperCase().startsWith(country_select.toUpperCase())) {\n d.artists.forEach(a => all_artists.push(a));\n }\n });\n\n let artists = d3\n .nest()\n .key(d => d.artist_name)\n .rollup(v => {\n return {\n listeners: d3.sum(v, d => +d.listeners),\n countries: v.length\n };\n })\n .entries(all_artists)\n .sort((a, b) => b.value.listeners - a.value.listeners);\n return artists.slice(0, 20);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"x1 = d3\n .scaleBand()\n .domain(d3.range(artists.length))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"y1 = d3\n .scaleLinear()\n .domain([0, d3.max(artists, d => d.value.listeners)])\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"xAxis1 = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(x1)\n .tickFormat(d => artists[d].key)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"yAxis1 = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y1).ticks(height / 40))","pinned":false,"hidden":false,"mode":"ojs"},{"id":837,"value":"x2 = d3\n .scaleLinear()\n .domain([0, d3.max(artists, d => d.value.listeners)])\n .nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":844,"value":"y2 = d3\n .scaleBand()\n .domain(d3.range(artists.length))\n .range([margin.top, 50 * artists.length - margin.bottom])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"xAxis2 = g =>\n g\n .attr(\"transform\", `translate(0,${50 * artists.length - margin.bottom})`)\n .call(d3.axisBottom(x2).ticks(width / 60))","pinned":false,"hidden":false,"mode":"ojs"},{"id":867,"value":"yAxis2 = g =>\n g.attr(\"transform\", `translate(${margin.left},0)`).call(\n d3\n .axisLeft(y2)\n .tickFormat(d => artists[d].key)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"graph_state = {\n chart_toggle;\n return !this;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1057,"value":"color_none = d3.scaleThreshold([0], [\"blue\", \"blue\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1119,"value":"s1 = d => color_none(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1069,"value":"color_countries = d3.scaleSequential(\n [0, d3.max(artists, d => +d.value.countries)],\n d3.interpolateTurbo\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1123,"value":"s2 = d => color_countries(d.value.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"color_listeners = d3.scaleSequential(\n [0, d3.max(artists, d => +d.value.listeners)],\n d3.interpolateTurbo\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1126,"value":"s3 = d => color_listeners(d.value.listeners)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"values = [\n { fun: s1, scale: color_none, label: \"None\" },\n {\n fun: s2,\n scale: color_countries,\n label: \"# of Countries where artist is in top 50\"\n },\n { fun: s3, scale: color_listeners, label: \"# of Listeners\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"md`## Explore \n### Changing the particular data subset that is currently visualized. \nUsers can see the top 20 artists worldwide, or search for a particular country. Utilizes an autoselect in order to help the user find a particular country.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"viewof country_select = autoSelect({\n placeholder: \"Type a country...\",\n description: \"Select a country\",\n autocomplete: \"on\",\n options: geo_data.map(d => d.country)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"chart1 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .attr(\"fill\", \"blue\")\n .selectAll(\"rect\")\n .data(artists)\n .join(\"rect\")\n .attr(\"x\", (d, i) => x1(i))\n .attr(\"y\", d => y1(d.value.listeners))\n .attr(\"height\", d => y1(0) - y1(d.value.listeners))\n .attr(\"width\", x1.bandwidth());\n\n svg\n .append(\"g\")\n .call(xAxis1)\n .selectAll(\"text\")\n .attr(\"dx\", \"-.8em\")\n .attr(\"dy\", \".15em\")\n .attr(\"transform\", \"rotate(-45)\")\n .style(\"text-anchor\", \"end\");\n\n svg.append(\"g\").call(yAxis1);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"md`## Reconfigure \n### Altering the spatial arrangement of the currently-viewed data. \nThe user can switch from a horizontal bar chart to a vertical bar chart, preserving the viewed data but arranging it in a different way.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":990,"value":"viewof chart_toggle = button({\n value: \"Toggle graph axes\",\n description: \"Switch between a horizontal bar chart and a vertical bar chart\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"md`## Encode \n### Modifying the visual encodings of the data points.\nThe user can change the meaning of a bar's color by using the radio buttons.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1043,"value":"viewof color_encoding = radio({\n value: 0,\n options: [\n { label: \"None\", value: 0 },\n {\n label: \"# of Countries where artist is in top 50\",\n value: 1\n },\n { label: \"# of Listeners\", value: 2 }\n ],\n description: \"Choose a color encoding\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1186,"value":"legend({\n color: values[color_encoding].scale,\n title: values[color_encoding].label\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1054,"value":"chart3 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n let colorScale = values[color_encoding].scale;\n let color = values[color_encoding].fun;\n\n svg\n .append(\"g\")\n .selectAll(\"rect\")\n .data(artists)\n .join(\"rect\")\n .attr(\"fill\", d => color(d))\n .attr(\"x\", (d, i) => x1(i))\n .attr(\"y\", d => y1(d.value.listeners))\n .attr(\"height\", d => y1(0) - y1(d.value.listeners))\n .attr(\"width\", x1.bandwidth());\n\n svg\n .append(\"g\")\n .call(xAxis1)\n .selectAll(\"text\")\n .attr(\"dx\", \"-.8em\")\n .attr(\"dy\", \".15em\")\n .attr(\"transform\", \"rotate(-45)\")\n .style(\"text-anchor\", \"end\");\n\n svg.append(\"g\").call(yAxis1);\n\n return svg.node();\n}","pinned":false,"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":623,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"margin = ({ top: 20, left: 80, right: 20, bottom: 100 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"import { autoSelect, button, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1182,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"table_styles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}