25:["$","title",null,{"children":"Interactivity Yang | Spring 2020 Info Vis | Observable"}] 4b:T7df,table_info = [ { technique: "Select", description: "mark something of interest to keep track of it", example: "Google Map example here" }, { technique: "Explore", description: "show different subsets when there's limitations to displaying the entire dataset", example: "Graffiti Around the World example here" }, { technique: "Reconfigure", description: "change the arrangement of representations and data cases", example: "Solar Eclipse example here" }, { technique: "Encode", description: "alter the fundamental visual representation by changing data cases' appearances", example: "Hamilton example here" }, { technique: "Abstract/Elaborate", description: "change the level of detail shown in the data elements", example: "d3 Sunburst example here" }, { technique: "Filter", description: "change the subset of data elements shown by specifying conditions", example: "filter by range example here" }, { technique: "Connect", description: "show associations of exisiting data elements or show related, hidden elements", example: "Research Chronology example here" } ]4c:T825,chart3 = { let svg = d3.create('svg').attr('viewBox', [0, 0, width, height]); const tip = svg.append("g").style("pointer-events", "none"); const tipRect = tip.append("rect"); const tipText = tip.append("text").style("text-anchor", "middle"); const xAxis = g => g .call(d3.axisBottom(x).ticks(50)) .attr('transform', `translate(0, ${height - margin.bottom})`); svg.append('g').call(xAxis); const yAxis = g => g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y)); 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.3) .selectAll("circle") .data(disney) .enter() .append("circle") .attr("cx", d => x(d.imdb_rating)) .attr("cy", d => y(d.imdb_votes)) .attr('fill', "pink") .attr("r", 3) .on("mouseenter", function(d) { d3.select(this) .attr("stroke", "red") .attr("stroke-opacity", 0.8); let text = ""; // d.values.forEach(dd => (text = text + " " + dd.title)); const pos = d3.mouse(this); tip.attr("transform", `translate(${pos[0]}, ${pos[1] - 8})`); tipText.text(d.title).style("font-size", "12px"); 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", "pink"); }) .on("mousemove", function(d) { const pos = d3.mouse(this); tip.attr("transform", `translate(${pos[0]}, ${pos[1] - 8})`); }) .on("mouseout", function(d) { d3.select(this) .attr("stroke", "#000") .attr("stroke-opacity", 0.3); tipRect.attr('stroke', 'none').attr('fill', 'none'); tipText.text(""); }); svg = appendText("Rating", "Vote", "Rating VS Vote of Disney+", svg); return svg.node(); }4d:T615,genre_count_new = { let genre_count = []; disney.forEach(row => { let genres = row.genre.split(","); let this_rating = row.imdb_rating; if (this_rating != "N/A" && this_rating != "" && this_rating != undefined) { for (let i = 0; i < genres.length; i++) { let this_genre = genres[i].trim(); if (this_genre != "N/A") { let find_genre = genre_count.find(d => d.genre === this_genre); // if not in if (find_genre === undefined) { let rating_arr = []; rating_arr.push(this_rating); genre_count.push({ genre: this_genre, count: 1, rating: this_rating, rating_all: rating_arr }); } else { find_genre.rating_all.push(this_rating); find_genre.count++; if ( this_rating != "N/A" && this_rating != "" && this_rating != undefined ) { find_genre.rating += +this_rating; } } } } } }); genre_count.forEach(row => { row.rating_all = row.rating_all.sort(); let quantile = { min: d3.min(row.rating_all), q1: d3.quantile(row.rating_all, 0.25), median: d3.median(row.rating_all), q2: d3.quantile(row.rating_all, 5), q3: d3.quantile(row.rating_all, 0.75), max: d3.max(row.rating_all) }; row.ratings_q = quantile; row.rating = d3.sum(row.rating_all) / row.count; }); return genre_count; }4e:T90c,boxPlot = { let data; if (order == "Total Vote Count") { data = genre_count_new.sort((a, b) => +b.count - a.count); } else { data = genre_count_new.sort( (a, b) => +b.ratings_q.median - a.ratings_q.median ); } let svg = d3.create("svg").attr("viewBox", [0, 0, width, height + 50]); const x2 = d3 .scaleBand() .domain(data.map(d => d.genre)) .range([margin.left, width - margin.right]); const xAxis2 = g => g .call(d3.axisBottom(x2)) .attr('transform', `translate(0, ${height - margin.bottom + 10})`); const y2 = d3 .scaleLinear() .domain([9, 0]) .range([margin.bottom, height - margin.top]); const yAxis2 = g => g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y2)); x2.padding(0.2); svg .append('g') .call(xAxis2) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)"); svg.append('g').call(yAxis2); svg .selectAll("line.vert") .data(data) .join("line") .attr("class", "vert") .attr("x1", d => x2(d.genre) + x2.bandwidth() / 2) .attr("x2", d => x2(d.genre) + x2.bandwidth() / 2) .attr("y1", d => y2(d.ratings_q.max)) .attr("y2", d => y2(d.ratings_q.min)) .attr("stroke", "black"); svg .selectAll("rect") .data(data) .join("rect") .attr("x", d => x2(d.genre)) .attr("y", d => y2(d.ratings_q.q3)) .attr("height", d => y2(d.ratings_q.q1) - y2(d.ratings_q.q3)) .attr("width", x2.bandwidth()) .attr("stroke", "black") .style("fill", "pink") .attr("opacity", 0.7); svg .selectAll("line.median") .data(data) .join("line") .attr("class", "median") .attr("x1", d => x2(d.genre)) .attr("x2", d => x2(d.genre) + x2.bandwidth()) .attr("y1", d => y2(d.ratings_q.median)) .attr("y2", d => y2(d.ratings_q.median)) .attr("stroke", "black"); svg .append("text") .attr("class", "text") .attr("transform", `translate(460, ${height - margin.bottom + 85})`) .style("text-anchor", "middle") .style("font-size", "14px") .text("Genre"); svg = appendText( "", "Rating min, max, q1, q3, and median", "Rating VS Genre of Disney Movies", svg ); return svg.node(); }4f:[{"id":"0564da1bae91c23eb6973274b406b0a6613b02e1f572ac4891bd30ecece0cb36b6c6eef72be44c6e9ddc0d587f8ab10d17bfafaf6ebbd847a2b62715ca7e06a2","href":"https://static.observableusercontent.com/files/0564da1bae91c23eb6973274b406b0a6613b02e1f572ac4891bd30ecece0cb36b6c6eef72be44c6e9ddc0d587f8ab10d17bfafaf6ebbd847a2b62715ca7e06a2","name":"disney.csv","type":"text/csv","lastModified":1590533945093.317,"size":60660},{"id":"79bcb4571ef66b12e3acc06fe4433ff96e2c1413149caebcf9c9280fe766e0181e0caf4fe35c2139ffcc6e9334482e47b1ce5cd2e1379ac476f162f728d06603","href":"https://static.observableusercontent.com/files/79bcb4571ef66b12e3acc06fe4433ff96e2c1413149caebcf9c9280fe766e0181e0caf4fe35c2139ffcc6e9334482e47b1ce5cd2e1379ac476f162f728d06603","name":"netflix.csv","type":"text/csv","lastModified":1590533938136.768,"size":1095973}] 47:{"id":"ff134d48d9ad1e84","slug":"interactivity-yang","title":"Interactivity Yang","thumbnail":"775a1b3dfd42092ed2a054d3040f363a7c9c6e27e9c7b6b303121027dfa5ed59","access_level":"public","create_time":"$D2020-05-25T20:44:45.083Z","update_time":"$D2020-06-03T01:30:29.653Z","view_time":null,"first_public_time":"$D2020-05-27T04:16:47.972Z","has_unpublished_edits":null,"fork":{"id":"bc6b2944b49e95c4","slug":"interactivity","title":"Interactivity","owner":{"id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","bio":"UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues. ","followed_by_you":false,"follows_you":false},"version":963,"publish_version":963,"role":null,"authored":false,"authors":[{"type":"individual","id":"78437bc34d1b864e","login":"xuanry-1839230","name":"Yang","avatar_url":"https://avatars-next.observableusercontent.com/614a4134c90a61883e9a86eaf027a1171f4a9f16973a657cbfa33763d1c5aa78","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactivity Yang","cells":[{"id":0,"value":"md`# Interactivity Yang`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"set_up = md`## Set up`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"displayCaution(\n \"Make sure you fork and rename this notebook before continuing!\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"render_data_table(table_info)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"sample_visualizations = md`## Sample Visualizations\nIn this section, create -- **from scratch** -- three interactive visualization of your choice. Remember, some 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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"md`### Load Data`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"disney = d3.csvParse(await FileAttachment(\"disney.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"netflix = d3.csvParse(await FileAttachment(\"netflix.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"x = 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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"y = 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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"md`### Select`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"md`### Filter/Explore`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"disney_interval_votes = d3\n .nest()\n .key(d => d.imdb_votes)\n .rollup(d => d.length)\n .entries(disney)\n .sort((a, b) => +a.key - b.key)\n .filter(d => d.key != \"N/A\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"viewof range_slider = rangeSlider({\n min: d3.min(disney_interval_votes, d => +d.key),\n max: d3.max(disney_interval_votes, d => +d.key),\n step: 1,\n title: 'Choose Range of Number of Votes'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"chart2 = {\n let svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg.node().update = (x, y, bins) => {\n svg.selectAll('*').remove();\n svg = appendText(\"Votes\", \"Count\", \"Votes VS Count of Each Votes\", svg);\n\n const xAxis = g =>\n g.attr(\"transform\", `translate(0,${height - 50})`).call(\n d3\n .axisBottom(x)\n .ticks(width / 80)\n .tickSizeOuter(0)\n );\n\n svg.append('g').call(xAxis);\n\n const yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(y).ticks(height / 40));\n\n svg.append('g').call(yAxis);\n\n svg\n .append(\"g\")\n .attr(\"fill\", \"pink\")\n .selectAll(\"rect\")\n .data(bins)\n .join(\"rect\")\n .attr(\"x\", d => x(d.x0) + 1)\n .attr(\"width\", d => Math.max(0, x(d.x1) - x(d.x0) - 1))\n .attr(\"y\", d => y(d.length))\n .attr(\"height\", d => y(0) - y(d.length));\n };\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"{\n var x, bins;\n var bins_length = 0;\n x = d3\n .scaleLinear()\n // .domain([\n // d3.min(disney_interval_votes, d => d.key),\n // d3.max(disney_interval_votes, d => d.key)\n // ])\n .domain([range_slider[0], range_slider[1]])\n .range([margin.left, width - margin.right]);\n bins = d3\n .histogram()\n .domain(x.domain())\n .thresholds(x.ticks(50))(\n disney.filter(d => d.imdb_votes != \"N/A\").map(d => +d.imdb_votes)\n );\n bins_length = d3.max(bins, d => d.length);\n\n var y = d3\n .scaleLinear()\n .domain([bins_length, 0])\n .nice()\n .range([margin.bottom, height - margin.top]);\n\n chart2.update(x, y, bins);\n return \"update\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"md`### Reconfigure`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"viewof order = select({\n title: \"Order By\",\n options: [\"Total Vote Count\", \"Median Vote High to Low\"],\n value: \"Moe\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import {\n displayCaution,\n render_data_table,\n table_styles\n} from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"margin = ({ top: 50, right: 10, bottom: 60, left: 60 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"import { rangeSlider } from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"function appendText(x, y, title, ele) {\n const svg = ele;\n ele\n .append(\"text\")\n .attr(\"class\", \"text\")\n .attr(\"transform\", `translate(500, ${height - margin.bottom + 45})`)\n .style(\"text-anchor\", \"middle\")\n .style(\"font-size\", \"14px\")\n .text(x);\n ele\n .append(\"text\")\n .attr(\"class\", \"text\")\n .attr(\"transform\", `translate(10, ${height / 2})rotate(-90)`)\n .style(\"text-anchor\", \"middle\")\n .style(\"font-size\", \"14px\")\n .text(y);\n\n ele\n .append(\"text\")\n .attr(\"class\", \"text\")\n .attr(\"transform\", \"translate(500,50)\")\n .style(\"text-anchor\", \"middle\")\n .style(\"font-size\", \"25px\")\n .style(\"font-weight\", \"bold\")\n .text(title);\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"table_styles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 24:null