31:T884,table_info = [ { technique: "Select", description: "Allows users to select information that persists throughout the course of the time that a data point is selected.", example: "exampleAllows users to expand parts of the visualization to see data that was previously not viewable.", example: "example" }, { technique: "Reconfigure", description: "Allows users to rearange the visualizations to better suit their needs, an example is sorting results.", example: "example" }, { technique: "Encode", description: "Let users change the the enocodings like the color or size of datapoints.", example: "example" }, { technique: "Abstract/Elaborate", description: "Gives the user the ability to see how granular their visualization is. They could either see it all together or for each individual record.", example: "example" }, { technique: "Filter", description: "The ability to change what subset of the data is being shown on the visualization.", example: "example" }, { technique: "Connect", description: "The ability to link datapoints between visualizations so the user can track data easier.", example: "example" } ]32:T5ad,chart = { const zoom = d3 .zoom() .scaleExtent([1, 32]) .extent([[margin.left, 0], [width - margin.right, height]]) .translateExtent([ [margin.left, -Infinity], [width - margin.right, Infinity] ]) .on("zoom", zoomed); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const clip = DOM.uid("clip"); svg .append("clipPath") .attr("id", clip.id) .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom); const path = svg .append("path") .attr("clip-path", clip) .attr("fill", "steelblue") .attr("d", area(data, x)); const gx = svg.append("g").call(xAxis, x); svg.append("g").call(yAxis, y); svg .call(zoom) .transition() .duration(750) .call(zoom.scaleTo, 4, [x(Date.UTC(2001, 8, 1)), 0]); function zoomed(event) { const xz = event.transform.rescaleX(x); path.attr("d", area(data, xz)); gx.call(xAxis, xz); } const tooltip = svg.append("g"); svg.on("touchmove mousemove", function(event) { const { date, value } = bisect(d3.pointer(event, this)[0]); tooltip.attr("transform", `translate(${x(date)},${y(value)})`).call( callout, `${value} ${formatDate(date)}` ); }); svg.on("touchend mouseleave", () => tooltip.call(callout, null)); return svg.node(); }33:[{"id":"e340019437ff1cd9356f4a8f7041d4aefa3f7efa02f3a52b3c1979a8c26ffc07cbf4a56b41097f03a953b09ec6ffaeeb6c0212ceca338163bfef65838956a2d4","href":"https://static.observableusercontent.com/files/e340019437ff1cd9356f4a8f7041d4aefa3f7efa02f3a52b3c1979a8c26ffc07cbf4a56b41097f03a953b09ec6ffaeeb6c0212ceca338163bfef65838956a2d4","name":"day_wise.csv","type":"text/csv","lastModified":1614563397213.887,"size":3674}] 2f:{"title":"Interactivity Ulfers","cells":[{"id":0,"value":"md`# Interactivity Ulfers`","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":30,"value":"assignment_instructions(\"Interactivity\")","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":613,"value":"data = Object.assign(\n d3\n .csvParse(await FileAttachment(\"day_wise.csv\").text(), d3.autoType)\n .filter(d => d.value >= min_confirmed),\n { y: \"Confimed Cases\" }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":616,"value":"render_data_table(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"md`The data being used is the count of confirmed covid cases by day recorded until July 2020.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"viewof min_confirmed = text({\n title: \"Minimum Confirmed Cases\",\n placeholder: \"10000\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"callout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g.style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"10px sans-serif\");\n\n const path = g\n .selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g\n .selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text =>\n text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => (i ? null : \"bold\"))\n .text(d => d)\n );\n\n const { x, y, width: w, height: h } = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\n \"d\",\n `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"area = (data, x) => d3.area()\n .curve(d3.curveStepAfter)\n .x(d => x(d.date))\n .y0(y(0))\n .y1(d => y(d.value))\n (data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"xAxis = (g, x) => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"yAxis = (g, y) => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, \"s\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"bisect = {\n const bisect = d3.bisector(d => d.date).left;\n return mx => {\n const date = x.invert(mx);\n const index = bisect(data, date, 1);\n const a = data[index - 1];\n const b = data[index];\n return b && date - a.date > b.date - date ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"function formatDate(date) {\n return date.toLocaleString(\"en\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n timeZone: \"UTC\"\n });\n}","pinned":false,"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":695,"value":"md`The three interaction techniques that I decided to employ within this graphic are Select, Reconfigure, and Abstract/Elaborate. By selecting the minimum number of confirmed covid cases, the user can see at what day the count started to surpass a certain desired number. By allowing the user to scroll through the graphic we are allowing them to reconfigure the graph to look at the section that is most interesting for them. And finally, by having the tooltip show up, we are elaborating on each specific day by providing the exact amount of confirmed cases that were on a given day. By including these interaction techniques, below are some questions that we could be able to answer that we couldn't without interaction. \n- At what day did the world surpass 1000000 confirmed cases?\n- What is the most recent day's amount of confirmed cases?\n- How many confirmed cases occured in the month of April 2020?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"observable_challenges","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"import { text } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"import {\n assignment_instructions,\n observable_challenges,\n render_data_table,\n table_styles\n} from \"@uw-info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"margin = ({ top: 20, right: 20, bottom: 30, left: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"table_styles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}