30:T982,table_info = [ { technique: "Select", description: "Users can mark something (a data item) as interesting. By making an item of interest visually distinctive, users can keep track of them / see any changes in representation even when looking at a large amount of data ", example: "Selection" }, { technique: "Explore", description: "Enable users to examine a different subset of data cases.", example: "Explore" }, { technique: "Reconfigure", description: "Provides a user with a different perspective on the data set by changing the spatial arrangement of representations. ", example: "Reconfigure " }, { technique: "Encode", description: " Users can alter the fundamental visual representation of the data including visual appearance (color, size, and shape) of each data element. It allows users to basically see different representations of the same data. ", example: "Encode" }, { technique: "Abstract/Elaborate", description: "Allows users to have the ability to adjust the level of 'abstraction' of a data representation", example: " Abstract / Elaborate " }, { technique: "Filter", description: " A technique used to allow users to change what data they are seeing based off some type of condition they chose", example: "Filter" }, { technique: "Connect", description: "This technique highlights relationships between data items that are already represented and/or can show hidden data items which are relevant to a specified item", example: "Connect" } ]31:Te2b,chart1 = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); if (movie_or_series == "Movie") { //title svg .append("text") .attr("class", "text") .attr("transform", "translate(500,50)") .style("text-anchor", "middle") .style("font-size", "25px") .style("font-weight", "bold") .text("Count of ratings by genre for Disney movies"); //set x const x_movie = d3 .scaleBand() .domain(genre_movie.map(d => d.genre)) .range([margin.left, width - margin.right]); //set y const y_movie = d3 .scaleLinear() .domain([d3.max(genre_movie, d => d.rating), 0]) .range([margin.bottom, height - margin.top]); //setxAxis const xAxis_movies = g => g .call(d3.axisBottom(x_movie)) .attr('transform', `translate(0, ${height - margin.bottom + 10})`); const yAxis_movie = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y_movie)); x_movie.padding(0.2); svg .append('g') .call(xAxis_movies) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)"); svg.append('g').call(yAxis_movie); svg .selectAll('.bar') .data(genre_movie) .join(enter => enter.append("rect")) .attr('x', d => x_movie(d.genre)) .attr('y', d => y_movie(d.rating)) .attr('width', x_movie.bandwidth()) .attr('height', d => y_movie(0) - y_movie(d.rating)) .attr('fill', "purple") .attr('opacity', 0.7); } else { //title svg .append("text") .attr("class", "text") .attr("transform", "translate(500,50)") .style("text-anchor", "middle") .style("font-size", "25px") .style("font-weight", "bold") .text("Count of ratings by genre for Disney series"); //set x const x_series = d3 .scaleBand() .domain(genre_series.map(d => d.genre)) .range([margin.left, width - margin.right]); //set y const y_series = d3 .scaleLinear() .domain([d3.max(genre_series, d => d.rating), 0]) .range([margin.bottom, height - margin.top]); //setxAxis const xAxis_series = g => g .call(d3.axisBottom(x_series)) .attr('transform', `translate(0, ${height - margin.bottom + 10})`); const yAxis_series = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y_series)); x_series.padding(0.2); svg .append('g') .call(xAxis_series) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)"); svg.append('g').call(yAxis_series); svg .selectAll('.bar') .data(genre_movie) .join(enter => enter.append("rect")) .attr('x', d => x_series(d.genre)) .attr('y', d => y_series(d.rating)) .attr('width', x_series.bandwidth()) .attr('height', d => y_series(0) - y_series(d.rating)) .attr('fill', "red") .attr('opacity', 0.7); } svg .append("text") .attr("class", "text") .attr("transform", `translate(500, ${height - margin.bottom + 45})`) .style("text-anchor", "middle") .style("font-size", "14px") .text("Genre"); svg .append("text") .attr("class", "text") .attr("transform", `translate(10, ${height / 2})rotate(-90)`) .style("text-anchor", "middle") .style("font-size", "14px") .text("Count"); return svg.node(); }32:Tc54,chart_encode = { const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]); const margin = { top: 50, right: 50, bottom: 50, left: 60 }; const xAxis = g => g .call(d3.axisBottom(x_encode).ticks(50)) .attr('transform', `translate(0, ${height - margin.bottom - 7})`); svg.append('g').call(xAxis); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y_encode)); svg.append('g').call(yAxis); svg .append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(xAxis); svg .append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(yAxis); if (color == "Purple") { svg .append("g") .attr("stroke", "#000") .attr("stroke-opacity", 0.2) .selectAll("circle") .data(disney) .enter() .append("circle") .attr("cx", d => x_encode(d.imdb_rating)) .attr("cy", d => y_encode(d.imdb_votes)) .attr('fill', "purple") .attr("r", 1.5); svg .append("circle") .attr("transform", "translate(600,-30)") .attr("cx", 200) .attr("cy", 160) .attr("r", 6) .style("fill", "purple"); } else if (color == "Pink") { svg .append("g") .attr("stroke", "#000") .attr("stroke-opacity", 0.2) .selectAll("circle") .data(disney) .enter() .append("circle") .attr("cx", d => x_encode(d.imdb_rating)) .attr("cy", d => y_encode(d.imdb_votes)) .attr('fill', "pink") .attr("r", 1.5); svg .append("circle") .attr("transform", "translate(600,-30)") .attr("cx", 200) .attr("cy", 160) .attr("r", 6) .style("fill", "pink"); } else { svg .append("g") .attr("stroke", "#000") .attr("stroke-opacity", 0.2) .selectAll("circle") .data(disney) .enter() .append("circle") .attr("cx", d => x_encode(d.imdb_rating)) .attr("cy", d => y_encode(d.imdb_votes)) .attr('fill', "blue") .attr("r", 1.5); svg .append("circle") .attr("transform", "translate(600,-30)") .attr("cx", 200) .attr("cy", 160) .attr("r", 6) .style("fill", "blue"); } svg .append("text") .attr("class", "text") .attr("transform", `translate(500, ${height - margin.bottom + 45})`) .style("text-anchor", "middle") .style("font-size", "14px") .text("Rating"); svg .append("text") .attr("class", "text") .attr("transform", `translate(10, ${height / 2})rotate(-90)`) .style("text-anchor", "middle") .style("font-size", "14px") .text("Vote"); svg .append("text") .attr("class", "text") .attr("transform", "translate(500,50)") .style("text-anchor", "middle") .style("font-size", "25px") .style("font-weight", "bold") .text("Rating VS Vote: Disney+ "); svg .append("text") .attr("transform", "translate(600,-30)") .attr("x", 220) .attr("y", 160) .text("Disney") .style("font-size", "15px") .attr("alignment-baseline", "middle"); return svg.node(); }33:T69d,chart_hover = { const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]); const margin = { top: 50, right: 50, bottom: 50, left: 60 }; const xAxis = g => g .call(d3.axisBottom(x_hover).ticks(50)) .attr('transform', `translate(0, ${height - margin.bottom - 7})`); svg.append('g').call(xAxis); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y_hover)); svg.append('g').call(yAxis); svg .append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(xAxis); svg .append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(yAxis); svg .append("g") .attr("stroke", "#000") .attr("stroke-opacity", 0.2) .selectAll("circle") .data(disney) .enter() .append("circle") .attr("cx", d => x_hover(d.imdb_rating)) .attr("cy", d => y_hover(d.imdb_votes)) .attr('fill', "purple") .attr("r", 1.5) .attr("id", "select"); svg .append("text") .attr("class", "text") .attr("transform", `translate(500, ${height - margin.bottom + 45})`) .style("text-anchor", "middle") .style("font-size", "14px") .text("Rating"); svg .append("text") .attr("class", "text") .attr("transform", `translate(10, ${height / 2})rotate(-90)`) .style("text-anchor", "middle") .style("font-size", "14px") .text("Vote"); svg .append("text") .attr("class", "text") .attr("transform", "translate(500,50)") .style("text-anchor", "middle") .style("font-size", "25px") .style("font-weight", "bold") .text("Rating VS Vote: Disney+"); return svg.node(); }34:[{"id":"e32f941d58ce5c2ca395d44e2e84c294574d92048e6b7d523cd027a899e1dd1d1d4c5931469f897f094816e976fec57831fd53c1d96e8e06e2705c2b48502b8b","href":"https://static.observableusercontent.com/files/e32f941d58ce5c2ca395d44e2e84c294574d92048e6b7d523cd027a899e1dd1d1d4c5931469f897f094816e976fec57831fd53c1d96e8e06e2705c2b48502b8b","name":"disney_plus_shows.csv","type":"text/csv","lastModified":1591560851522.369,"size":418485}] 2e:{"title":"Interactivity Shah","cells":[{"id":0,"value":"md`# Interactivity Shah`","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":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"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":599,"value":"md`## Visualization 1: Filter`","pinned":true,"hidden":false,"mode":"ojs"},{"id":601,"value":"viewof movie_or_series = select([\"Movie\", \"Series\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":603,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":604,"value":"md`## Visualization 2: Encode (by color)`","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"x_encode = d3\n .scaleLinear()\n .domain(d3.extent(disney, d => +d.imdb_rating))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":608,"value":"y_encode = d3\n .scaleLinear()\n .domain(d3.extent(disney, d => +d.imdb_votes))\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":631,"value":"viewof color = select([\"Purple\", \"Pink\", \"Blue\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":633,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"md`## Visualization 3: Hover`","pinned":true,"hidden":false,"mode":"ojs"},{"id":637,"value":"x_hover = d3\n .scaleLinear()\n .domain(d3.extent(disney, d => +d.imdb_rating))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":639,"value":"y_hover = d3\n .scaleLinear()\n .domain(d3.extent(disney, d => +d.imdb_votes))\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":641,"value":"tooltip = {\n chart_hover;\n\n const tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\");\n\n d3.selectAll(\"#select\")\n .on(\"mouseover\", function(d) {\n d3.select(this)\n .attr('stroke-width', '1')\n .style('fill', 'steelblue')\n .attr(\"stroke\", \"black\");\n tooltip\n .style(\"visibility\", \"visible\")\n .style(\"font\", \"9px\")\n .text(`Total Votes: ${d.imdb_votes}`);\n })\n .on(\"mousemove\", function() {\n tooltip\n .style(\"top\", d3.event.pageY - 10 + \"px\")\n .style(\"left\", d3.event.pageX + 10 + \"px\");\n })\n .on(\"mouseout\", function() {\n d3.select(this)\n .attr('stroke-width', '1')\n .style('fill', '#f28e2c');\n\n tooltip.style(\"visibility\", \"hidden\");\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":642,"value":"$33","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":611,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":613,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":614,"value":"disney = d3.csvParse(\n await FileAttachment(\"disney_plus_shows.csv\").text(),\n ({ imdb_id, title, type, genre, imdb_rating, imdb_votes, year }) => ({\n imdb_id: imdb_id,\n type: type,\n title: title,\n genre: genre,\n imdb_rating: imdb_rating,\n imdb_votes: imdb_votes.split(\",\").join(\"\"),\n year: year\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":616,"value":"disney_movie = disney.filter(d => d.type == 'movie')","pinned":true,"hidden":false,"mode":"ojs"},{"id":618,"value":"disney_series = disney.filter(d => d.type == 'series')","pinned":true,"hidden":false,"mode":"ojs"},{"id":620,"value":"genre_movie = {\n let genre_count = [];\n disney_movie.forEach(row => {\n let genres = row.genre.split(\",\");\n let rating = row.imdb_rating;\n\n for (let i = 0; i < genres.length; i++) {\n let this_genre = genres[i].trim();\n if (this_genre != \"N/A\") {\n let find_genre = genre_count.find(d => d.genre === this_genre);\n\n // if not in\n if (find_genre === undefined) {\n let rating_arr = [];\n rating_arr.push(rating);\n genre_count.push({\n genre: this_genre,\n count: 1,\n rating: rating,\n rating_all: rating_arr\n });\n } else {\n find_genre.rating_all.push(rating);\n find_genre.count++;\n if (rating != \"N/A\" && rating != \"\" && rating != undefined) {\n find_genre.rating += +rating;\n }\n }\n }\n }\n });\n genre_count.forEach(row => {\n row.rating = d3.sum(row.rating_all) / row.count;\n });\n return genre_count;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":622,"value":"genre_series = {\n let genre_count = [];\n disney_series.forEach(row => {\n let genres = row.genre.split(\",\");\n let rating = row.imdb_rating;\n\n for (let i = 0; i < genres.length; i++) {\n let this_genre = genres[i].trim();\n if (this_genre != \"N/A\") {\n let find_genre = genre_count.find(d => d.genre === this_genre);\n\n // if not in\n if (find_genre === undefined) {\n let rating_arr = [];\n rating_arr.push(rating);\n genre_count.push({\n genre: this_genre,\n count: 1,\n rating: rating,\n rating_all: rating_arr\n });\n } else {\n find_genre.rating_all.push(rating);\n find_genre.count++;\n if (rating != \"N/A\" && rating != \"\" && rating != undefined) {\n find_genre.rating += +rating;\n }\n }\n }\n }\n });\n genre_count.forEach(row => {\n row.rating = d3.sum(row.rating_all) / row.count;\n });\n return genre_count;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":624,"value":"disney_rating = disney\n .filter(d => d.imdb_rating != \"N/A\")\n .map(d => d.imdb_rating)","pinned":true,"hidden":false,"mode":"ojs"},{"id":626,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":628,"value":"margin = ({ top: 50, right: 10, bottom: 60, left: 60 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"table_styles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}