29:null 2a:["$","title",null,{"children":"D3 Activity II (complete) | Spring 2020 Info Vis | Observable"}] 2f:T4bb,display_courses = md`## Display Courses The last group member (certainly with the help and collaboration of others)should use the data join process to display a list (e.g., \`

\` elements) of the selected courses (you can just return an unordered list here instead of an svg). If you follow the structure outlined in [this slide](https://docs.google.com/presentation/d/1EHspLwqTtlbeISR9HMEmNBYrlIg3ooACYaFkGMCldYs/edit?usp=sharing), you should be able to separately handle your entering, updating, and exiting elements (which will allow you to stage fancy transitions!). A few things to note: - Your \`element.update()\` method should accept -- as arguments -- the values from your inputs above. - Within the \`element.update()\` function, you will need to use the \`filterData()\` method written above to filter your data. - In the cell _after_ defining your list of courses (your _"chart"_), you'll need to call your \`update()\` method, passing in values from your inputs. See [this explanation](https://observablehq.com/@info474/d3-chart-updates-in-observable) for more details. Once you're able to get the elements to render, you should add interesting transitions for entering and exiting elements!`30:T54d,ul = { // Create a

s for each course const ul = d3.create('ul'); // Define an update() method for your ul so that it can handle data changes // This is structured to accept as an argument an *object* with the min course number and search string ul.node().update = filterInfo => { // Filter down your dataset const filteredData = filter(data, filterInfo.min, filterInfo.searchString); console.log( "filtered data", filteredData, filterInfo.min, filterInfo.searchString ); // Performa a data join ul.selectAll('li') .data(filteredData, d => d.number) // identify each observation by course number .join( enter => enter.append('li').style('color', 'steelblue'), // append, set starting color update => update, exit => exit .style("color", "red") .transition() .duration(500) .style('opacity', 0) .remove() ) // .text(d => d.number); // this is a simpler solution, showcasing HTML capabilities below .html(d => { return `${d.number}: ${d.description}`; }) .transition() // transition to a constant color for all elements .duration(1500) .style("color", "black"); }; return ul.node(); }31:[{"id":"e378c40fc90ab5e8f679101fda9c460a703fb3d09407476c7d93c2966c584e620eddbaf79b3b82f530606834049148e2c25b15638b96689c024008da6e65c601","href":"https://static.observableusercontent.com/files/e378c40fc90ab5e8f679101fda9c460a703fb3d09407476c7d93c2966c584e620eddbaf79b3b82f530606834049148e2c25b15638b96689c024008da6e65c601","name":"courses.csv","type":"text/csv","lastModified":1587075207949.525,"size":20362}] 2d:{"id":"fdac878d5a018c72","slug":"d3-activity-ii-complete","title":"D3 Activity II (complete)","thumbnail":"4790066f4243ec1c90022f58920c1b21cff23f944ea20989c553c47467ff16e6","access_level":"public","create_time":"$D2020-04-16T22:12:52.464Z","update_time":"$D2020-04-20T01:34:34.698Z","view_time":null,"first_public_time":"$D2020-04-17T15:24:42.867Z","has_unpublished_edits":null,"fork":{"id":"0488bd5c8e9e7979","slug":"d3-activity-ii","title":"D3 Activity II","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"},"version":178,"publish_version":178,"role":null,"authored":false,"authors":[{"type":"individual","id":"660e4aa6b35cf96c","login":"badpickle149","name":"Kevin Weng","avatar_url":"https://avatars-next.observableusercontent.com/482f800eb2f18d9f48eb442cb77da2f6cfee6b72b5fffa19a45b36230f072fa2","tier":null}],"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":3,"collection":{"id":"379f6a9e688df7ed","slug":"in-class","title":"In Class","owner":{"id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis"}},"type":"notebook","body":{"title":"D3 Activity II (complete)","cells":[{"id":0,"value":"md`# D3 Activity II (complete)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"set_up = md`## Set up \nIn this notebook, you will practice using the data join to build a **searchable list** using D3 ( to be done _in groups_). To create a notebook for your group:\n- One group member fork this notebook (make sure it is to the @info474 account)\n- That group member should _rename_ the notebook by changing the title cell above from _D3 Activity II_ to *D3 Activity II LAST_NAME* (or *GROUP_NAME*)\n- That group member should then click the publish button so that the other group members can easily find the notebook in our course team\n- All group members should open the notebook because everyone can edit simultaneously!\n\nIn your group, I suggest that you work **simultaneously** on different tasks below. This is a good challenge on collaborative coding, but if you clearly express your data and event structure, it should come together nicely.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"loading_data = md`## Loading Data\nOne group member should load your data into a variable. To do so, they should download [this file](https://drive.google.com/file/d/1FQTqD9f70HrjVfzqPa7B2vhR8ho1s4-4/view?usp=sharing), then upload it to this notebook as a File Attachment. Then, they should use \\`d3.csv()\\` to load it into a variable. Make sure to \\`require\\` d3 in the Appendix section below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"data = d3.csvParse(await FileAttachment(\"courses.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"create_inputs = md`## Create Inputs\nIn order to filter the list of courses displayed, you'll need _at least_ **two controls** (e.g., form elements). For example, an \\`\\` element where you can search for a course, or a \\`\\` element where you can indicate a minimum course number (feel free to implement a different search structure if you want). To do so, you should choose two different types of input elements from [this notebook](https://observablehq.com/@jashkenas/inputs) to import (which you should do in the Appendix section). Then, create two input elements that will be used as filters to the list of courses.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"// Detect the minmum course number for a slider\nminCourseNum = d3.min(data, d => +d.number.substring(5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"// Detect the maximum course number for a slider\nmaxCourseNum = d3.max(data, d => +d.number.substring(5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"displayCaution(\n \"I've moved these input elements below to make it clear how changing the inputs changes the outputs\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"filter_data = md`## Filter Data\nIn this section, one group member should write a function that accepts your data (course list) and your input values, and returns a filtered array of courses. This person will, of course, need to coordinate with the person making the inputs to understand how to filter the data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"// Function to filter down the data by a minimum course number and search string\nfilter = (data, min, searchStr) => {\n return data.filter(d => {\n const num = +d.number.substring(5);\n return num >= min && d.description.includes(searchStr);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"// Create an input for searching for courses\nviewof search = text({\n title: \"Search by Course Description\",\n placeholder: \"Type keywords here...\",\n description: \"View only courses that match your search\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"// Create a slider\nviewof minValue = slider({\n title: \"Filter By Course Number\",\n min: minCourseNum,\n max: maxCourseNum,\n value: 200,\n step: 1,\n description: html`Slide to a minimum course number`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"// Call the update function, passing in an object with values from the inputs created above!\nul.update({ min: minValue, searchString: search })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"import { slider, text } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"import { displayCaution } from \"@info474/utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"styles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"