31:T965,table_info = [ { Technique: "Select", Description: "Allows the user to select a variable that they're interested in and see how it affects and related to the data representation.", Example: "Select The select feature on the map lets users switch between years." }, { Technique: "Explore", Description: "Lets users explore more of the dataset by adding in more fields or values that they want considered in the data visualiation.", Example: "Explore Visual Thesaurus lets users search for a word and loads associated words when clicked on." }, { Technique: "Reconfigure", Description: "Lets users view the dataset from different perspectives by changing the way the visualization is configured.", Example: "Reconfigure Scatter plot lets users change the X and Y axes." }, { Technique: "Encode", Description: "Encoding helps users customize their data variables visually.", Example: "Encode In this map, the users can also change the color of the background, opacity, and the size of the point on the map." }, { Technique: "Abstract/Elaborate", Description: "Users can decide how much detail they require from the data represented.", Example: "Abstract/Elaborate In this map, users can zoom in or out as they would like - adding or reducing detail." }, { Technique: "Filter", Description: "Users are able to filter in or out variables to figure out more detailed questions from their data.", Example: "Filter In this map, users can filter by race and year to see population changes in the map." }, { Technique: "Connect", Description: "Lets users see how the variables relate to each other in the dataset.", Example: "Explore Visual Thesaurus lets users search for a word. It connects and loads associated words when clicked on." } ]32:T580,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, 975, 610]); const g = svg.append("g"); svg .append("g") .attr("transform", "translate(610,20)") .append(() => legend({ color, title: "Supporters", width: 260 })); const statesvg = svg .append("g") .selectAll("path") .data(topojson.feature(us, us.objects.states).features) .join("path") .attr("fill", d => color(states.get(state_abbrev.get(d.properties.name)))) .attr("d", path) .append("title") .on("mouseover", function() { d3.select(this) .attr("stroke", "#000") .raise(); }) .on("mouseout", function() { d3.select(this) .attr("stroke", null) .lower(); }) .text(d => `${d.properties.name}: ${getStateNumber(d.properties.name)}`); var zoom = d3.zoom().scaleExtent([1, 16]); zoom .filter(() => { // Always accept zooming when we're not using a wheel event to trigger it (e.g. doubleclick) return true; }) .on("zoom", zoomed); function pan() { console.log(d3.event); } function zoomed() { g.attr("transform", d3.event.transform); } svg.call(zoom); svg .append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); return svg.node(); }33:[{"id":"50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","href":"https://static.observableusercontent.com/files/50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","name":"counties-albers-10m.json","type":"application/json","lastModified":1606194238913.212,"size":795407},{"id":"47efc165accfeb464c3acbf6b53d5448cde5d3e5766023f01ee866c7bae8683667dbae4c0b8a5fc699514fe9579a1acfc686d9eeaf32ea92b688f9386199a520","href":"https://static.observableusercontent.com/files/47efc165accfeb464c3acbf6b53d5448cde5d3e5766023f01ee866c7bae8683667dbae4c0b8a5fc699514fe9579a1acfc686d9eeaf32ea92b688f9386199a520","name":"indPolSpending.csv","type":"text/csv","lastModified":1606193395367.984,"size":14288814},{"id":"9dfd9c6834031519e0e457454f568ff32352e29e066674bab2b53d90a850987296d51a1b928118474ac464fc405fdcf6f9db31e02b4cdc27eb8bd028ff784bcb","href":"https://static.observableusercontent.com/files/9dfd9c6834031519e0e457454f568ff32352e29e066674bab2b53d90a850987296d51a1b928118474ac464fc405fdcf6f9db31e02b4cdc27eb8bd028ff784bcb","name":"stateabbrevs-1.json","type":"application/json","lastModified":1606193830473.8,"size":1389}] 2f:{"title":"Interactivity Chakravarty","cells":[{"id":0,"value":"md`# Interactivity Chakravarty`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"summary_table = md`## Summary Table`","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":613,"value":"data = d3.csv(await FileAttachment(\"indPolSpending.csv\").url(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"// all data for the candidate support selected\ncandidates = data.filter(d => d.candidate_name.includes(selected.toUpperCase()) & d.support_oppose_indicator == \"S\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"// find number of supporting for each state\nstates = d3.rollup(candidates, v => v.length, d => d.payee_state)","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"function convertToArray(map, k, v) {\n var res = [];\n map.forEach(function(val, key) {\n res.push({ key: key, val: val });\n });\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"stateArray = convertToArray(states).sort((a, b) => b.val - a.val)","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"function codeToName(code) {\n let name = null;\n stateCodes.forEach(obj => {\n if (obj.Code === code) {\n name = obj.State;\n }\n });\n return name;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"function buildMap(obj) {\n let map = new Map();\n Object.keys(obj).forEach(key => {\n map.set(key, obj[key]);\n });\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"state_abbrev_data = FileAttachment(\"stateabbrevs-1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"state_abbrev = buildMap(state_abbrev_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"us = FileAttachment(\"counties-albers-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"color = d3.scaleSequential(\n [\n d3.min(states.keys(), d => states.get(d)),\n d3.max(states.keys(), d => states.get(d))\n ],\n d3.interpolateRdBu\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"function getStateNumber(state) {\n let number = states.get(state_abbrev.get(state));\n if (number == undefined) {\n return 0;\n } else {\n return number;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"legend({\n color: color,\n title: \"Number of Supporters\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"viewof selected = radio({\n title: \"Candidate\",\n options: [\"Trump\", \"Hillary\"],\n value: \"Trump\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"description = md`## Interactivity Description\nThe interaction techniques employed in this design are stated as follows:\n- Filtering: The map allows for filtering between the two candidates to see which how the numbers change between the states. It also gives a clear picture of how many supporters were present from each state.\n- Hover: The hover feature allows for more details for anyone not accustomed to the US map. It also gives the exact value of the support from that state and provides additional details in this manner.\n- Zoom: The zoom feature lets users zoom into states to further examine data only pertaining to the selected state.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"feedback = md`## Feedback\nI found rendering the zoom interaction very hard. I tried it as the first visualization and ended up spending too much time on it before moving on to other features to implement before since I found myself going in circles. I also spend too much time not understanding why the states said undefined for some values before realizing that that was only for states that had 0 supporters for the mentioned candidate.`","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":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"import { stateCodes } from '@info474/airport-map-by-state'","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"import { slider, select, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"table_styles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}