31:T902,table_info = [ { technique: "Select", description: "Provides users with ability to mark data items of interest to keep track of them", example: "examples of selecting data points" }, { technique: "Explore", description: "Enables user to explore susbsets of data cases", example: "Click on characters to learn more about them" }, { technique: "Reconfigure", description: "Using different spatial representation of the data, this technique provides new perspectives and insights.", example: "User can select stacked or grouped bar charts" }, { technique: "Encode", description: "Allows user to change the visual representations of data like color, size, and shape.", example: "This example offers 3D and 2D visualizations of population in NYC" }, { technique: "Abstract/Elaborate", description: "Users can adust level of abstraction of data", example: "Graph is zoomable to view clusters of data points clearer" }, { technique: "Filter", description: "User can pick what set of data they want to be shown", example: "User can select season and player to view shooting stats about" }, { technique: "Connect", description: "Highlight relationships between data already shown or data that is hidden", example: "When the user selects a character, the visualization highlights other characters connected with the selected character" } ]32:Tae2,{ const svg = d3 .create("svg") .attr("viewBox", [-100, -100, width + 200, height + 200]); const gx = svg .append("g") .attr("class", "x-axis") .attr("transform", "translate(30, 0)") .call(d3.axisLeft().scale(yScale)); const gy = svg .append("g") .attr("class", "y-axis") .attr("transform", "translate(0, 480)") .call(d3.axisBottom().scale(xScale)); const tooltip = d3 .select("#tooltip") .append("div") .style("opacity", 0) .attr("class", "tooltip") .style("background-color", "black") .style("border-radius", "5px") .style("padding", "10px") .style("color", "white"); const showTooltip = function(d) { tooltip.transition().duration(100); tooltip .style("opacity", 1) .html("Name: " + d.Name) //.html("Attack: " + d["Attack"]) //.html("Sp. Attack: " + d["Sp. Atk"]) //.html("Legendary: " + d["Legendary"]) .style("left", d3.mouse(this)[0] + 40 + "px") .style("top", d3.mouse(this)[1] + 40 + "px"); }; const moveTooltip = function(d) { tooltip .style("left", d3.mouse(this)[0] + 40 + "px") .style("top", d3.mouse(this)[1] + 40 + "px"); }; const hideTooltip = function(d) { tooltip .transition() .duration(200) .style("opacity", 0); }; svg .append("g") .attr("stroke-width", 1.5) .selectAll("dot") .data(filteredData) .enter() .append("circle") .attr("cx", d => xScale(d["Attack"])) .attr("cy", d => yScale(d["Sp. Atk"])) .attr("fill", d => colorScale(d["Type 1"])) .attr("r", 7) .on("mouseover", showTooltip) .on("mousemove", moveTooltip) .on("mouseleave", hideTooltip); svg .append("text") .style("text-anchor", "middle") .attr("x", 500) .attr("y", -20) .text("Attack vs Special Attack Power of Pokemon"); svg .append("text") .attr("class", "x label") .attr("text-anchor", "middle") .attr("x", width / 2) .attr("y", height + 30) .text("Attack"); svg .append("text") .attr("class", "y label") .attr("text-anchor", "end") .attr("x", -200) .attr("y", -20) .attr("transform", "rotate(-90)") .text("Special Attack"); svg .append("g") .append(() => type_legend) .attr("x", 50) .attr("y", 550); function zoomed({ transform }) { const zx = transform.rescaleX(xScale).interpolate(d3.interpolateRound); const zy = transform.rescaleY(yScale).interpolate(d3.interpolateRound); svg.selectAll("circle").attr("transform", transform); gx.call(xAxis, zx); gy.call(yAxis, zy); } const zoom = d3 .zoom() .scaleExtent([0.5, 32]) .on("zoom", zoomed); svg.call(zoom).call(zoom.transform, d3.zoomIdentity); return svg.node(); }33:[{"id":"b3c9ccc73d2056feab7a4b6235cb209541619a4c6dd41426441516c9c609c5da1c93d0109553364948410c13c657ad724f08de192686b14e4849f7f2907ac99f","href":"https://static.observableusercontent.com/files/b3c9ccc73d2056feab7a4b6235cb209541619a4c6dd41426441516c9c609c5da1c93d0109553364948410c13c657ad724f08de192686b14e4849f7f2907ac99f","name":"pokemon.csv","type":"text/csv","lastModified":1606521242828.011,"size":44028}] 2f:{"title":"Interactivity Leung","cells":[{"id":0,"value":"md`# Interactivity Leung`","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 a chart (from scratch) and add **three interactions technqiues**, each of which allows you to answer a different question of interest \n4. Describe what type of interaction technique you created, and what questions it allows you to answer in the chart`","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/@uw-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_)

**Share the notebook**: share with your TA and instructor!

`","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":"interactive_chart = md`## Interactive Visualization\nIn this section, create -- **from scratch** -- an interactive visualization of your choice with **three interaction techniques**. At least two of the techniques must come from directly interacting with the chart (e.g., hovering, clicking, mouse-wheel events) while one may come from outside of the chart (e.g., a select menu).\n\nFeel free to use your final project data for exploration and practice!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"// county/country data\n// filter for food\n// zoom in and out for geographic\n// hover over region for more info\n\n//OR\n// zoomable scatter plot of crop production\n// filter by year\n// hover over to see which country","pinned":true,"hidden":false,"mode":"ojs"},{"id":618,"value":"data = d3.csvParse(await FileAttachment(\"pokemon.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":620,"value":"x_variable = \"Attack\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":621,"value":"y_variable = \"Special Attack\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":624,"value":"legendary = \"Legendary\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":629,"value":"extent_atk = d3.extent(data, d => +d[\"Attack\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":630,"value":"extent_sp_atk = d3.extent(data, d => +d[\"Sp. Atk\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":633,"value":"uniq_legend = _.uniqBy(data.map(d => d[\"Type 1\"]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"margin = ({ top: 20, right: 30, bottom: 30, left: 40 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":637,"value":"width = 954","pinned":true,"hidden":false,"mode":"ojs"},{"id":639,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":642,"value":"xScale = d3\n .scaleLinear()\n .domain(extent_atk)\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":644,"value":"yScale = d3\n .scaleLinear()\n .domain(extent_sp_atk)\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":646,"value":"colorScale = d3.scaleOrdinal(uniq_legend, d3.schemePaired)","pinned":true,"hidden":false,"mode":"ojs"},{"id":649,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xScale))","pinned":true,"hidden":false,"mode":"ojs"},{"id":651,"value":"yAxis = g =>\n g.attr(\"transform\", `translate(${margin.left},0)`).call(d3.axisLeft(yScale))","pinned":true,"hidden":false,"mode":"ojs"},{"id":665,"value":"type_legend = legend({ color: colorScale, title: \"Type 1\", width: 900 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":707,"value":"filteredData = data.filter(d => d[\"Type 1\"] == type || d[\"Type 2\"] == type)","pinned":true,"hidden":false,"mode":"ojs"},{"id":699,"value":"viewof type = select(uniq_legend)","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":597,"value":"description = md`## Interactivity Description\nIn the section below, please detail what interaction techniques you employed (using the formal language from the paper), and describe what questions it allows you to ask of the chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"md`\nThe first interaction technique that I used was filter. I created a drop down menu for the user to filter which type of Pokemon they want to view the Attack and Special Attack stats for. The menu allows the user to view the stats for specific types of Pokemon. Furthermore, the data points are colored by their Type 1, so users can also compare Pokemon whose primary type is the selected type to Pokemon whose secondary type is the selected type. The second interaction I implemented is abstract/elaborate to help view clusters of points in more detail. This technique allows users to to view specific data points, which represent individual Pokemon, more clearly. The third technique I implemented is explore. When users hover over data points, new data such as the Pokemon's name and whether they are legendary or not are shown. This technique allows users to view different types of data not shown in the base visualization.\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":738,"value":"md`\nThe most difficult part of this assignment for me was finding examples of techniques. I was able to understand the techniques from the paper well, but also had trouble implementing some of them because I was not really sure where to start.\n`","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":611,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":614,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":616,"value":"import { swatches, legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":701,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"table_styles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}