31:T8c9,table_info = [ { technique: "Select", description: "To mark something as important", example: "The lines in this chart are clickable for the user to be able to highlight specific countries of interest." }, { technique: "Explore", description: "To show details about a specific part or point in the data", example: "The sliding pointer allows the user to explore different points on the dataset." }, { technique: "Reconfigure", description: "Showing or altering the information being displayed", example: "The controls on this globe allow the user to reconfigure the visualization for different time periods or settings." }, { technique: "Encode", description: "The form in which information is presented to the user", example: "The color and metric controls in this map show different encodings of the same covid data." }, { technique: "Abstract/Elaborate", description: "Control of the amount of detail shown to the user", example: "The bins selector shows a user more or less detail as he or she desires." }, { technique: "Filter", description: "To hide or partially show part of the information", example: "The ethnicity selector filters for information the user specifically requests." }, { technique: "Connect", description: "Connecting the user to another resource", example: "Each bubblein this graph connects the user to a new social media entity." } ]32:T655,pointChart = { let svg = d3.create("svg"); svg.attr("viewBox", [0, 0, width, height]); let map = svg .append("g") .selectAll("path") .data(topoJsonFeature.features) .enter() .append("path") .attr("d", path); let pointContainer = svg.append("g"); let points = pointContainer.selectAll("g"); let pointsSelection = points.data(languageIsolates); let pointsGroup = pointsSelection .enter() .append("g") .attr("transform", element => { let elementLatLong = [-element.latitude, -element.longitude]; let projectionCoords = projection(elementLatLong); return ( "translate(" + projectionCoords[1] + "," + projectionCoords[0] + ")" ); }) .on("mouseover", languageIsolateOnMouseOver) .on("mouseout", (element, index) => { let hiddenElement = d3.select("#" + element.name); hiddenElement.attr("style", "visibility: hidden;"); }); let circles = pointsGroup .append("circle") .attr("fill", "green") .attr("r", "4"); let hiddenDescriptions = pointsGroup .append("g") .attr("style", "visibility: hidden;") .attr("id", element => { return element.name; }); let hiddenDescriptionText = hiddenDescriptions .append("text") .attr("style", "font-size:19pt;") .attr("fill", "red") .text(element => { return element.name; }); //points.on('mouseover', element => {}); let titleDiv = svg .append("g") .attr("transform", "translate(" + width / 4 + ", " + 30 + ")") .append("text") .text("Location of each language family"); return svg.node(); }33:Tded,philipsChart = { let svg = d3.create("svg"); svg.attr("viewBox", [0, 0, width, height]); let currentY = { cur: 80000 }; let currentYCont = [currentY]; let graphContainer = svg.append("g").attr("transform", element => { let yTrans = 200; let xTrans = 20; return "translate(" + xTrans + "," + yTrans + ")"; }); let yMultiplesCopy = _.cloneDeep(yMultiples); let slidingBar = svg .append("line") .attr("id", "slider") .attr("y1", element => { return 0; }) .attr("x1", element => { console.log(currentY); return philipsIncomeXScale(currentY.cur); }) .attr("y2", element => { return height; }) .attr("x2", element => { return philipsIncomeXScale(currentY.cur); }) .attr("style", "stroke:rgb(255,0,0);stroke-width:3"); let graphs = graphContainer .selectAll("g.yMult") .data(yMultiplesCopy) .enter() .append("g") .attr("id", (element, index) => { "ph" + index; }) .attr("transform", (element, index) => { let yTrans = index * (graphHeight + graphMargin.top); let xTrans = 0; return "translate(" + xTrans + "," + yTrans + ")"; }) .attr("class", "yMult"); graphs.append("text").text(element => { return element.name; }); graphs .append("line") .attr("y1", element => { return element.scale(element.func(minY)); }) .attr("x1", element => { return philipsIncomeXScale(minY); }) .attr("y2", element => { return element.scale(element.func(maxY)); }) .attr("x2", element => { return philipsIncomeXScale(maxY); }) .attr("style", "stroke:rgb(255,0,0);stroke-width:3"); graphs.append("text").attr("transform", (element, index) => { let yTrans = 100; let xTrans = 300; return "translate(" + xTrans + "," + yTrans + ")"; }) /* .text(element => { return "is:" + element.func(currentY.cur); })*/; graphs // .each(drawPhilipsYAxis); .append("g") .attr("transform", (element, index) => { let yTrans = graphHeight; let xTrans = 0; return "translate(" + xTrans + "," + yTrans + ")"; }) .call(d3.axisBottom(philipsIncomeXScale)); graphContainer .append("g") .attr("transform", (element, index) => { let yTrans = 0 * (graphHeight + graphMargin.top); let xTrans = 0; return "translate(" + xTrans + "," + yTrans + ")"; }) .call(d3.axisLeft(philipsRealInterestRateYScale)); graphContainer .append("g") .attr("transform", (element, index) => { let yTrans = 1 * (graphHeight + graphMargin.top); let xTrans = 0; return "translate(" + xTrans + "," + yTrans + ")"; }) .call(d3.axisLeft(philipsUnemploymentYScale)); graphContainer .append("g") .attr("transform", (element, index) => { let yTrans = 2 * (graphHeight + graphMargin.top); let xTrans = 0; return "translate(" + xTrans + "," + yTrans + ")"; }) .call(d3.axisLeft(philipsInflationYScale)); let titleDiv = svg .append("g") .attr("transform", "translate(" + width / 4 + ", " + 30 + ")") .append("text") .text("Philips curve"); svg.on("mouseover", function() { currentY.cur = mousePositionToYPercentage(d3.mouse(this)[0]); d3.select("line#slider") .attr("x1", philipsIncomeXScale(currentY.cur)) .attr("x2", philipsIncomeXScale(currentY.cur)); /*yMultiplesCopy = yMultiples.map(element => { element.yVal = currentY; return element; });*/ }); return svg.node(); }34:Tbf7,metricsComparisonChart = { let svg = d3.create("svg"); svg.attr("viewBox", [0, 0, width + 400, height + 200]); let graphContainer = svg.append("g").attr("transform", element => { let yTrans = 100; let xTrans = 80; return "translate(" + xTrans + "," + yTrans + ")"; }); let graphs = graphContainer .selectAll("g.point") .data(metricComparisonList) .enter() .append("g") .attr("id", (element, index) => { return "c" + index; }) .attr("class", "point") .on("mouseover", (element, index) => { console.log(element, index); let hiddenElement = d3.select("#c" + index); hiddenElement.select("circle").attr("style", "visibility: hidden;"); hiddenElement .select(".hiddenTooltip") .attr("style", "visibility: visible;"); }) .on("mouseout", (element, index) => { let hiddenElement = d3.select("#c" + index); hiddenElement.select("circle").attr("style", "visibility: visible;"); hiddenElement .select(".hiddenTooltip") .attr("style", "visibility: hidden;"); }); graphContainer .append("g") .attr("transform", element => { let yTrans = height; let xTrans = 0; return "translate(" + xTrans + "," + yTrans + ")"; }) .call(d3.axisBottom(scalarX)); graphContainer.append("g").call(d3.axisLeft(scalarY)); graphContainer .append("text") .text(scalarFilterStringX) .attr("style", "font-size:18pt") .attr("transform", element => { let yTrans = 0; let xTrans = 0; return "translate(" + xTrans + "," + yTrans + ")"; }); graphContainer .append("text") .text(scalarFilterStringY) .attr("style", "font-size:18pt;") .attr("transform", element => { let yTrans = height - 20; let xTrans = width - 80; return "translate(" + xTrans + "," + yTrans + ")"; }); graphs .append("circle") .attr("fill", "black") .attr("r", 5) .attr("cx", element => { return scalarX(element.x); }) .attr("cy", element => { return scalarY(element.y); }); let hiddenTooltips = graphs .append("g") .attr("class", "hiddenTooltip") .attr("style", "visibility: hidden;") .attr("transform", element => { let yTrans = scalarY(element.y); let xTrans = scalarX(element.x); return "translate(" + xTrans + "," + yTrans + ")"; }); hiddenTooltips .append("rect") .attr("width", element => { return 10 * element.artist.length; }) .attr("height", 30) .attr("fill", "red"); hiddenTooltips .append("text") .attr("fill", "white") .attr("transform", element => { let yTrans = 20; let xTrans = 0; return "translate(" + xTrans + "," + yTrans + ")"; }) .text(element => { return element.artist; }); let titleDiv = svg .append("g") .attr("transform", "translate(" + width / 4 + ", " + 30 + ")") .append("text") .text(scalarFilterStringX + " X " + scalarFilterStringY); return svg.node(); }35:[{"id":"6d49a14c2e8b00ba42bfcc7a7dd6f6d1d3fc8e3bf776f42c0a949d052523119fed29294d44f417a079720a63603016b1e8feaff63b76ba43e80cae9ba825002b","href":"https://static.observableusercontent.com/files/6d49a14c2e8b00ba42bfcc7a7dd6f6d1d3fc8e3bf776f42c0a949d052523119fed29294d44f417a079720a63603016b1e8feaff63b76ba43e80cae9ba825002b","name":"languageTopLevelFamilies.csv","type":"text/csv","lastModified":1590385598198.25,"size":973481},{"id":"27e66d99e96da7203520496984171d6abd79c4b9130c3f1d1e7ea57e7e148cc3aa911029251fb8a6b27a1ca54d47ab0a487c02f4b75bc1c25d8ee134c7e944a3","href":"https://static.observableusercontent.com/files/27e66d99e96da7203520496984171d6abd79c4b9130c3f1d1e7ea57e7e148cc3aa911029251fb8a6b27a1ca54d47ab0a487c02f4b75bc1c25d8ee134c7e944a3","name":"worldmapSimplifiedTopoJson.json","type":"application/json","lastModified":1590386665774.318,"size":132969}] 2f:{"title":"Interactivity Leon Tan","cells":[{"id":0,"value":"md`# Interactivity Leon Tan`","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":"$31","pinned":true,"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":600,"value":"md`## Visualization 1\n### Lanugage isolate map using data from https://glottolog.org/glottolog/family\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":645,"value":"/*viewof categoryFilterString = select([\n 'All',\n 'Family',\n 'Pseudo Family',\n 'Spoken L1 Language'\n])*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":667,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":758,"value":"languageIsolateOnMouseOver = (element, index) => {\n let hiddenElement = d3.select(\"#\" + element.name);\n hiddenElement.attr(\"style\", \"visibility: visible;\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"md`## Visualization 1 Appendix\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"value":"languageFamiliesRaw = FileAttachment(\"languageTopLevelFamilies.csv\").text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"languageFamiliesParsed = d3.csvParse(languageFamiliesRaw, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":638,"value":"/*filteredLanguage = languageFamiliesParsed.filter(element => {\n return (\n element.category == categoryFilterString || categoryFilterString == \"All\"\n );\n})*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":693,"value":"languageIsolates = languageFamiliesParsed.filter(element => {\n return (\n element.category == \"Spoken L1 Language\" &&\n element.latitude &&\n element.longitude\n );\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":659,"value":"worldmapTopoJson = FileAttachment(\"worldmapSimplifiedTopoJson.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":661,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":663,"value":"topoJsonFeature = topojson.feature(\n worldmapTopoJson,\n worldmapTopoJson.objects[\n \"99bfd9e7-bb42-4728-87b5-07f8c8ac631c2020328-1-1vef4ev\"\n ]\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":671,"value":"projection = d3\n .geoIdentity()\n .reflectY(true)\n .fitSize([width, height], topoJsonFeature)","pinned":true,"hidden":false,"mode":"ojs"},{"id":603,"value":"md`## Visualization 2\n### The philips curve\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":783,"value":"maxI=.2;","pinned":true,"hidden":false,"mode":"ojs"},{"id":841,"value":"getR=(iValue,piValue)=>{\n return iValue+piValue;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1073,"value":"minInterestRate = getRFromY(maxY)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1075,"value":"maxInterestRate = getRFromY(minY)","pinned":true,"hidden":false,"mode":"ojs"},{"id":876,"value":"getRFromY = yValue => {\n return (yValue - baseY) / ySlope;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":788,"value":"ySlope = baseY * -1.69;","pinned":true,"hidden":false,"mode":"ojs"},{"id":935,"value":"maxY=y(getR(0,getPi(0)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":942,"value":"minY = y(maxI)","pinned":true,"hidden":false,"mode":"ojs"},{"id":818,"value":"r = i + getPi(m)","pinned":true,"hidden":false,"mode":"ojs"},{"id":825,"value":"baseY = 100000","pinned":true,"hidden":false,"mode":"ojs"},{"id":787,"value":"y = rVal => {\n return baseY + ySlope * rVal;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":812,"value":"piSlope = .001","pinned":true,"hidden":false,"mode":"ojs"},{"id":780,"value":"getPi =(mValue)=>{ return piSlope * mValue}","pinned":true,"hidden":false,"mode":"ojs"},{"id":966,"value":"getPiFromY = yVal => {\n return -(yVal - baseY) / ySlope + i;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":801,"value":"mSupplyDomain = [0, 10000]","pinned":true,"hidden":false,"mode":"ojs"},{"id":795,"value":"m = 5000","pinned":true,"hidden":false,"mode":"ojs"},{"id":797,"value":"iSlope = maxI / mSupplyDomain[1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":778,"value":"i=maxI-iSlope*m;","pinned":true,"hidden":false,"mode":"ojs"},{"id":777,"value":"philipsIncomeXScale = d3\n .scaleLinear()\n .domain([minY, maxY])\n .range([0, graphWidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":837,"value":"philipsInterestRateYScale = d3\n .scaleLinear()\n .domain([maxI, 0])\n .range([0, graphHeight])","pinned":true,"hidden":false,"mode":"ojs"},{"id":859,"value":"philipsRealInterestRateYScale = d3\n .scaleLinear()\n .domain([minInterestRate, maxInterestRate])\n .range([graphHeight, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":874,"value":"getU = yValue => {\n return 1 - (1 / maxY) * yValue + .01;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1064,"value":"minUnemployment = getU(maxY)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1068,"value":"maxUnemployment = getU(minY)","pinned":true,"hidden":false,"mode":"ojs"},{"id":872,"value":"philipsUnemploymentYScale = d3\n .scaleLinear()\n .domain([minUnemployment, maxUnemployment])\n .range([graphHeight, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":969,"value":"philipsInflationYScale = d3\n .scaleLinear()\n .domain([getPiFromY(minY), getPiFromY(maxY)])\n .range([graphHeight, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":866,"value":"yMultiples = [\n {\n scale: philipsRealInterestRateYScale,\n func: getRFromY,\n name: \"Real interest rates\",\n symbol: 'r',\n yVal: 70000\n },\n {\n scale: philipsUnemploymentYScale,\n func: getU,\n name: \"Unemployment rate\",\n symbol: 'u',\n yVal: 70000\n },\n {\n scale: philipsInflationYScale,\n func: getPiFromY,\n name: \"Inflation rate\",\n symbol: 'pi',\n yVal: 70000\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":863,"value":"makeYMultiple=(selection, chartData)=>{\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1103,"value":"//Returns the\nmousePositionToYPercentage = mouseX => {\n let incomeFromPixel = philipsIncomeXScale.invert(mouseX);\n let newY = Math.max(Math.min(incomeFromPixel, maxY), minY);\n return newY;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":861,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1025,"value":"drawPhilipsYAxis = (element, index) => {\n let selection = d3.select(\"#ph\" + index);\n let axisFunction = d3.axisLeft(element.scale);\n axisFunction(selection);\n //console.log(selection);\n //selection.call(axisFunction);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":848,"value":"md`## Visualization 2 Appendix\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":851,"value":"graphWidth=200;","pinned":true,"hidden":false,"mode":"ojs"},{"id":852,"value":"graphHeight = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":989,"value":"graphMargin = ({\n top: 70\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"md`## Visualization 3\n### Spotify Song scalar scatterplot comparisons.\n\nCompares 2 different scalars of top spotify songs.\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1177,"value":"md`Select X variable`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1171,"value":"viewof scalarFilterStringX = select(\n scalarColumnNames.map(name => {\n return name;\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1179,"value":"md`Select Y variable`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1189,"value":"yColumnNames = scalarColumnNames.filter(element => {\n return element != scalarFilterStringX;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1170,"value":"viewof scalarFilterStringY = select(\n yColumnNames.map(name => {\n return name;\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1217,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1151,"value":"md`## Visualization 3 appendix`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1158,"value":"top50NoNans","pinned":true,"hidden":false,"mode":"ojs"},{"id":1183,"value":"metricComparisonList = top50NoNans.map(element => {\n return {\n x: element[scalarFilterStringX],\n y: element[scalarFilterStringY],\n name: element.title,\n artist: element.artist\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1195,"value":"getScalarScale = (min, max, rangeMin, rangeMax) => {\n return d3\n .scaleLinear()\n .domain([min, max])\n .range([rangeMin, rangeMax]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1199,"value":"xMin = d3.min(metricComparisonList, element => {\n return element.x;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1204,"value":"xMax = d3.max(metricComparisonList, element => {\n return element.x;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1210,"value":"yMin= d3.min(metricComparisonList, element => {\n return element.y;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1213,"value":"yMax = d3.max(metricComparisonList, element => {\n return element.y;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1198,"value":"scalarX = getScalarScale(xMin, xMax, 0, width)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1209,"value":"scalarY = getScalarScale(yMin, yMax, height, 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1153,"value":"import {\n top50NoNans,\n scalarColumnNames\n} from '@info474/exploratory-data-analysis/2'","pinned":true,"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":616,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs"},{"id":654,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":618,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":622,"value":"height = 1200","pinned":true,"hidden":false,"mode":"ojs"},{"id":624,"value":"width = 1200","pinned":true,"hidden":false,"mode":"ojs"},{"id":620,"value":"margin = ({ left: 40, right: 40, top: 70, bottom: 30 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":648,"value":"import { select, radio, checkbox } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"table_styles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}