31: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!`32: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(); }33:[{"id":"e378c40fc90ab5e8f679101fda9c460a703fb3d09407476c7d93c2966c584e620eddbaf79b3b82f530606834049148e2c25b15638b96689c024008da6e65c601","href":"https://static.observableusercontent.com/files/e378c40fc90ab5e8f679101fda9c460a703fb3d09407476c7d93c2966c584e620eddbaf79b3b82f530606834049148e2c25b15638b96689c024008da6e65c601","name":"courses.csv","type":"text/csv","lastModified":1587075207949.525,"size":20362}] 2f:{"title":"D3 Activity II (complete)","cells":[{"id":0,"value":"md`# D3 Activity II (complete)`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":50,"value":"data = d3.csvParse(await FileAttachment(\"courses.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":32,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":80,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":17,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"import { slider, text } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"import { displayCaution } from \"@info474/utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"styles = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}