30:T710,table_info = [ { technique: "Select", description: "A user can marks item(s) of interest to allow users to keep track of it", example: "UW Interactive Data Lab" }, { technique: "Explore", description: "A user can examine various subsets of data cases", example: "Pannable Chart" }, { technique: "Reconfigure", description: "A user can change the spatial arrangement of representations", example: "Arc Diagram" }, { technique: "Encode", description: "A user can alter the fundamental visual representation of the data such as color, size, and shape", example: "Data Transformation" }, { technique: "Abstract/Elaborate", description: "A user has the ability to adjust the level of abstraction of a data representation", example: "Zoomable Sunburst" }, { technique: "Filter", description: "A user can change the set of data items being presented based on some specific conditions", example: "Nashville Weather" }, { technique: "Connect", description: "A user can highlight associations and relationships between data items", example: "Collapsible Tree" } ]31:T4d6,filter = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("g") .attr("stroke", "black") .attr("fill", "steelblue") .selectAll("rect") .data(sales_sum) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", d => y(d.value)) .attr("height", d => y(0) - y(d.value)) .attr("width", x.bandwidth()); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg .append("text") .attr("class", "text") .attr("font-family", "sans-serif") .attr("transform", "translate(500,30)") .style("font-weight", "bold") .style("text-anchor", "middle") .text("Total Sales vs. Video Game Platform in ".concat(sales_year)); svg .append("text") .attr("class", "text") .attr("font-family", "sans-serif") .attr("transform", "translate(500,475)") .style("text-anchor", "middle") .style("font-size", "12px") .text("Video Game Platform"); svg .append("text") .attr("class", "text") .attr("font-family", "sans-serif") .attr("transform", "translate(20,250) rotate(-90)") .style("text-anchor", "middle") .style("font-size", "12px") .text("Total Global Sales (millions)"); return svg.node(); }32:T4f1,select2 = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("g") .attr("stroke", "black") .attr("fill", "steelblue") .selectAll("rect") .data(sales_sum) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", d => y(d.value)) .attr("height", d => y(0) - y(d.value)) .attr("width", x.bandwidth()) .attr("id", "select"); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg .append("text") .attr("class", "text") .attr("font-family", "sans-serif") .attr("transform", "translate(500,30)") .style("font-weight", "bold") .style("text-anchor", "middle") .text("Total Sales vs. Video Game Platform in ".concat(sales_year)); svg .append("text") .attr("class", "text") .attr("font-family", "sans-serif") .attr("transform", "translate(500,475)") .style("text-anchor", "middle") .style("font-size", "12px") .text("Video Game Platform"); svg .append("text") .attr("class", "text") .attr("font-family", "sans-serif") .attr("transform", "translate(20,250) rotate(-90)") .style("text-anchor", "middle") .style("font-size", "12px") .text("Total Global Sales (millions)"); return svg.node(); }33:[{"id":"5bad6197447fd90f946ecceca93c553cd1164016c0daa0c31c5edbf06a900f35000c58f0477c39e1a9b18b0aaead379309350b3d549c158a6cc150dc0d899252","href":"https://static.observableusercontent.com/files/5bad6197447fd90f946ecceca93c553cd1164016c0daa0c31c5edbf06a900f35000c58f0477c39e1a9b18b0aaead379309350b3d549c158a6cc150dc0d899252","name":"tesla.csv","type":"text/csv","lastModified":1590886103137.875,"size":175082},{"id":"83e94a72249c94abcee06b5ff475319ef96208f28fcb0db83d60857a609acc91493a0a7e751fe1e4dc173ff71814243090dd88a47586850242060fd7cb442f59","href":"https://static.observableusercontent.com/files/83e94a72249c94abcee06b5ff475319ef96208f28fcb0db83d60857a609acc91493a0a7e751fe1e4dc173ff71814243090dd88a47586850242060fd7cb442f59","name":"video_games.csv","type":"text/csv","lastModified":1590882434971.479,"size":1618040}] 2e:{"title":"Interactivity Vuu","cells":[{"id":0,"value":"md`# Interactivity Vuu`","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":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"render_data_table(table_info)","pinned":false,"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":714,"value":"md`## Chart 1: Filter`","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"viewof sales_year = select({\n title: \"Year for Total Global Sales\",\n value: 2006,\n options: _.uniqBy(video_games, d => d.Year_of_Release)\n .map(d => d.Year_of_Release)\n .sort()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"md`## Chart 2: Select`","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"md`## Chart 3: Explore`","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"explore = {\n const minX = x2(tesla_stock[0].date);\n const maxX = x2(tesla_stock[tesla_stock.length - 1].date);\n const overwidth = maxX - minX + margin.left + margin.right;\n\n const parent = d3.create(\"div\");\n\n parent\n .append(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .style(\"position\", \"absolute\")\n .style(\"pointer-events\", \"none\")\n .style(\"z-index\", 1)\n .call(svg => svg.append(\"g\").call(yAxis2));\n\n const body = parent\n .append(\"div\")\n .style(\"overflow-x\", \"scroll\")\n .style(\"-webkit-overflow-scrolling\", \"touch\");\n\n body\n .append(\"svg\")\n .attr(\"width\", overwidth)\n .attr(\"height\", height)\n .style(\"display\", \"block\")\n .call(svg => svg.append(\"g\").call(xAxis2))\n .append(\"path\")\n .datum(tesla_stock)\n .attr(\"fill\", \"steelblue\")\n .attr(\"d\", area);\n\n yield parent.node();\n\n // Initialize the scroll offset after yielding the chart to the DOM.\n body.node().scrollBy(overwidth, 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"md`### Chart 1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"video_games = d3.csvParse(\n await FileAttachment(\"video_games.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"platform_all = Object.keys(video_games).map(d => {\n return {\n x: video_games[d].Year_of_Release,\n y: video_games[d].Global_Sales,\n platform: video_games[d].Platform\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"platform_date = platform_all.filter(d => d.x == sales_year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"sales_sum = Object.assign(\n d3\n .nest()\n .key(d => d.platform)\n .rollup(v => d3.sum(v, d => d.y))\n .entries(platform_date)\n).map(({ key, value }) => ({ name: key, value }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"x = d3\n .scaleBand()\n .domain(d3.range(sales_sum.length))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(sales_sum, d => d.value)])\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"xAxis = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(x)\n .tickFormat(i => sales_sum[i].name)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, sales_sum.format))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(sales_sum.y)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"md`### Chart 2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"tooltip = {\n select2;\n\n const tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\");\n\n d3.selectAll(\"#select\")\n .on(\"mouseover\", function(d) {\n d3.select(this)\n .attr('stroke-width', '1')\n .style('fill', 'lavender')\n .attr(\"stroke\", \"black\");\n tooltip\n .style(\"visibility\", \"visible\")\n .style(\"font\", \"9px\")\n .text(`Sales ($M): ${d.value}`);\n })\n .on(\"mousemove\", function() {\n tooltip\n .style(\"top\", d3.event.pageY - 10 + \"px\")\n .style(\"left\", d3.event.pageX + 10 + \"px\");\n })\n .on(\"mouseout\", function() {\n d3.select(this)\n .attr('stroke-width', '1')\n .style('fill', 'steelblue');\n\n tooltip.style(\"visibility\", \"hidden\");\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"md`### Chart 3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"tesla_stock = Object.assign(\n d3\n .csvParse(await FileAttachment(\"tesla.csv\").text(), d3.autoType)\n .map(({ Date, Close }) => ({ date: Date, value: Close })),\n { y: \"$ Close\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"x2 = d3\n .scaleUtc()\n .domain(d3.extent(tesla_stock, d => d.date))\n .range([margin.left, width * 6 - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"y2 = d3\n .scaleLinear()\n .domain([0, d3.max(tesla_stock, d => d.value)])\n .nice(6)\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"xAxis2 = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(x2)\n .ticks(d3.utcMonth.every(1200 / width))\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"yAxis2 = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y2).ticks(6))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(tesla_stock.y)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"area = d3\n .area()\n .curve(d3.curveStep)\n .x(d => x2(d.date))\n .y0(y2(0))\n .y1(d => y2(d.value))","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":652,"value":"md`## Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"margin = ({ top: 30, right: 30, bottom: 60, left: 60 })","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":"import { select, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"table_styles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}