31:T8f3,table_info = [ { technique: "Select", description: "Marking something so that it stands out alongside other data points. Hovering or clicking or whatever-ing a piece of data on a visualization so that it is selected and different from the data around it in some way.", example: "Example here" }, { technique: "Explore", description: "Navigating around in a data set so that one can change their perspective on how they're viewing the data.", example: "Example here" }, { technique: "Reconfigure", description: "Altering the arrangement of the data in some way, like changing the baseline in a histogram. ", example: "Example here" }, { technique: "Encode", description: "Changing the representation entirely, like from bar chart to pie chart. ", example: "Example here" }, { technique: "Abstract/Elaborate", description: "Getting more granular information over a certain data point or subset of data, or taking the data and zooming out so to say, by generalizing the scope more.", example: "Example here" }, { technique: "Filter", description: "Narrowing the scope of the data one is looking at. Applying some sort of condition to remove certain data from the visualization, so as to focus on the remaining bits.", example: "Example here" }, { technique: "Connect", description: "Shows previously unshown connections between data points and also does what explore does cause apparently there's some overlap.", example: "Example here" } ]32:T4a6,agePerformanceChart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg.append("g").call(XAxis); svg.append("g").call(YAxis); // Title svg .append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "18px") .text("Marathon Performance vs Runner's Age"); // X-axis label svg .append("text") .attr("x", width / 2) .attr("y", height - 4) .style("font-size", "12px") .style("text-anchor", "middle") .text("Runner's Age"); // Y-axis label svg .append("text") .attr("x", (height / 2) * -1) .attr("y", margin.left - 32) .style("text-anchor", "middle") .style("font-size", "12px") .attr("transform", "rotate(-90)") .text("Performance by Hours"); svg.node().update = selectedGender => { let newData = data.filter(d => d.gender == selectedGender); svg .selectAll("circle") .data(newData) .join("circle") .attr("cx", d => X(d.age)) .attr("cy", d => Y(d.performance)) .attr("r", 5) .style("fill", d => ColorScale(d.gender)); // Color according to gender }; return svg.node(); }33:T959,agePerformanceChartElaborate = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg.append("g").call(XAxis); svg.append("g").call(YAxis); // Title svg .append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "18px") .text("Marathon Performance vs Runner's Age"); // X-axis label svg .append("text") .attr("x", width / 2) .attr("y", height - 3) .style("font-size", "12px") .style("text-anchor", "middle") .text("Runner's Age"); // Y-axis label svg .append("text") .attr("x", (height / 2) * -1) .attr("y", margin.left - 32) .style("text-anchor", "middle") .style("font-size", "12px") .attr("transform", "rotate(-90)") .text("Performance by Hours"); svg.node().update = selectedGender => { let newData = data.filter(d => d.gender == selectedGender); svg .selectAll("circle") .data(newData) .join("circle") .on("mouseenter", function(d) { d3.select(this).style("fill", "yellow"); let text = ""; const pos = d3.mouse(this); tip .attr("transform", `translate(${pos[0]}, ${pos[1] - 10})`) .style("visibility", "visible"); tipText.text( "Age: " + d.age + "\n" + "Performance: " + Math.round(d.performance * 100) / 100 ); const { x, y, width: w, height: h } = tipText.node().getBBox(); tipRect .attr("width", w) .attr("height", h) .attr("x", x) .attr("y", y) .attr("fill", "yellow"); }) .on("mousemove", function(d) { const pos = d3.mouse(this); tip.attr("transform", `translate(${pos[0]}, ${pos[1] - 10})`); }) .on("mouseout", function(d) { tip.style("visibility", "hidden"); d3.select(this).style("fill", d => ColorScale(d.gender)); }) .attr("cx", d => X(d.age)) .attr("cy", d => Y(d.performance)) .attr("r", 5) .style("fill", d => ColorScale(d.gender)); // Add a tooltip const tip = svg.append("g").style("pointer-events", "none"); const tipRect = tip.append("rect"); const tipText = tip .append("text") .style("text-anchor", "middle", "white-space: pre-line"); }; return svg.node(); }34:T51c,agePerformanceChartSelect = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg.append("g").call(XAxis); svg.append("g").call(YAxis); // Title svg .append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "18px") .text("Performance vs Runner's Age"); // x-axis label svg .append("text") .attr("x", width / 2) .attr("y", height - 3) .style("font-size", "12px") .style("text-anchor", "middle") .text("Age"); //Create Y axis label svg .append("text") .attr("x", (height / 2) * -1) .attr("y", margin.left - 27) .style("text-anchor", "middle") .style("font-size", "12px") .attr("transform", "rotate(-90)") .text("Performance by Hours"); svg .selectAll("circle") .data(data) .join("circle") .on("mouseenter", function(d) { d3.select(this).style("fill", "yellow"); }) .on("mouseout", function(d) { d3.select(this).style("fill", d => ColorScale(d.gender)); }) .attr("cx", d => X(d.age)) // apply that good good scale .attr("cy", d => Y(d.performance)) // apply that good good scale .attr("r", 5) .style("fill", d => ColorScale(d.gender)); // color according to gender return svg.node(); }35:[{"id":"df474c0b64357e007e6e1913dadef35ba38805ec8668b4da5b3e39d844c7a77e0d610fdec271534645bb3c514f14da0dc89329ab5f90330b0791775b91f749c0","href":"https://static.observableusercontent.com/files/df474c0b64357e007e6e1913dadef35ba38805ec8668b4da5b3e39d844c7a77e0d610fdec271534645bb3c514f14da0dc89329ab5f90330b0791775b91f749c0","name":"marathon_data.csv","type":"text/csv","lastModified":1614457566538.447,"size":29436}] 2f:{"title":"Interactivity - Hussain","cells":[{"id":0,"value":"md`# Interactivity - Hussain`","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":false,"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":621,"value":"Y = d3\n .scaleLinear()\n .domain(YDomain)\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"X = d3\n .scaleLinear()\n .domain(XDomain)\n .range([margin.left, width - margin.right])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"XAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(X))","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"YAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(Y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"ColorDomain = {\n let eep = _.uniqBy(data, d => d.gender);\n let result = [eep[0].gender, eep[1].gender];\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"ColorScale = d3\n .scaleOrdinal()\n .domain(ColorDomain)\n .range([\"Blue\", \"Red\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"Legend = legend({\n color: d3\n .scaleOrdinal()\n .domain(ColorDomain)\n .range([\"Blue\", \"Red\"]),\n title: \"Gender\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"viewof selectGender = select({\n title: \"Gender for Visualization\",\n options: [\"M\", \"F\"],\n value: \"M\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"$34","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":752,"value":"md`Select, Filter and Elaborate are the three interaction techniques I employed. These techniques allow the user to see and compare the two genders' ages and performance, the individual age and performace of each data/plot on the graph and which dot can be selected/hovered upon to make it stand out.`","pinned":true,"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":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":617,"value":"data = {\n let rawData = d3.csvParse(await FileAttachment(\"marathon_data.csv\").text());\n\n rawData = rawData.filter(x => Number(x.YOB) > 0); // Make sure we just ignore anyone without a birth year #sorrynotsorry\n\n let resultData = rawData.map(d => {\n return {\n age: 2020 - Number(d.YOB),\n performance: convertStringHoursToNumber(d.performance),\n gender: d.Gender\n };\n });\n\n return resultData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"margin = ({ top: 50, right: 30, bottom: 40, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"function convertStringHoursToNumber(convertMe) {\n let result = 0;\n\n let numsWithColon = convertMe.split(\" \")[0];\n\n let numsWithoutColon = numsWithColon.split(\":\");\n\n result += Number(numsWithoutColon[0]); // hours\n result += Number(numsWithoutColon[1]) / 60; // minutes\n result += Number(numsWithoutColon[2] / 3600); // seconds\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"XDomain = [\n d3.min(data, d => d.age),\n d3.max(data, d => d.age)\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"YDomain = [d3.min(data, d => d.performance), d3.max(data, d => d.performance)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"agePerformanceChartElaborate.update(selectGender)","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"agePerformanceChart.update(selectGender)","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"table_styles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}