2f:null 30:["$","title",null,{"children":"Programming with Javascript and D3 on Observable | Dynamic Data Visualization 373 | Observable"}] 35:T552,You're given some data represented as an array `A` of objects, each with an `x` property, which is a real number, and a `type` property, which is "good" or "bad". Such an array might look like so: [ {x: -0.5711964790742001, type: "good"}, {x: 0.25332064991555614, type: "good"}, {x: -1.1734094753494564, type: "good"}, {x: 0.5626968631577264, type: "bad"}, {x: -0.42364257068589684, type: "good"}, {x: -0.19206912858054798, type: "bad"}, {x: 0.698278061269706, type: "good"}, {x: 0.33353604555226096, type: "good"}, {x: -1.417808165405562, type: "good"}, {x: 2.5116895239472123, type: "good"} ] Your mission is to write a function `process_and_report` that 1. filters the array so that only objects of type `"good"` and with negative `x` value remain and then 2. returns a markdown tagged template literal with a bulleted list indicating - The number of elements remaining in the resulting array, - the minimum element, and - the maximum element. The output for the sample data above should look like so: --- **Data Analysis**: - *length*: 4 - *min*: -1.417808165405562 - *max*: -0.42364257068589684 --- Once you've written your function, 1. Test it on the sample data to make sure it works and, then, 2. Apply it to the data obtained by choosing your name from the list below:36:[{"id":"aa4056570d7ca3a8cde2df2659d679d3d3800a9e2421d9352d6fd86a908ecd39106f9c1de1172f15dbe65d2c42d8a563afa6b28486987d9adfce8984c684ff37","href":"https://static.observableusercontent.com/files/aa4056570d7ca3a8cde2df2659d679d3d3800a9e2421d9352d6fd86a908ecd39106f9c1de1172f15dbe65d2c42d8a563afa6b28486987d9adfce8984c684ff37","name":"dependency_graph.png","type":"image/png","lastModified":1673516287404.958,"size":117152}] 33:{"id":"7ac850d7668e0ca8","slug":"programming-with-javascript-and-d3-on-observable","title":"Programming with Javascript and D3 on Observable","thumbnail":"a245222fb630acc809988b826fba160df944a0eaa04e84d22c52d91013a7f003","access_level":"public","create_time":"$D2023-01-09T00:27:46.043Z","update_time":"$D2026-06-16T10:42:05.552Z","view_time":null,"first_public_time":"$D2023-09-06T21:02:10.793Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"a07c87acf1b22f86","login":"ddv373","name":"Dynamic Data Visualization 373","avatar_url":"https://avatars-next.observableusercontent.com/aa07fb823a47852e43ceca20a9030290c7b3befd6ad2b87a17c17f4b47176d35","tier":"pro_2024"},"version":939,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null}],"members":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null,"role":"editor"},{"type":"team","id":"a07c87acf1b22f86","login":"ddv373","name":"Dynamic Data Visualization 373","avatar_url":"https://avatars-next.observableusercontent.com/aa07fb823a47852e43ceca20a9030290c7b3befd6ad2b87a17c17f4b47176d35","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Programming with Javascript and D3 on Observable","cells":[{"id":0,"value":"# Programming with Javascript and D3 on Observable\n## Day 1: Thursday, January 12\n\nWhether you've programmed with Javascript or not, my guess is that most folks in the class could look at the following blocks of code and understand what's going on:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"result = {\n let cnt = 0;\n for (let i = 1; i <= 100; i++) {\n cnt = cnt + i;\n }\n return cnt;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"The following is even simpler and certainly much shorter:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"same_result = d3.sum(d3.range(101))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"Both `result` and `same_result` compute the sum of the first 100 integers; the first in a relatively low-level, procedural style using pure Javascript and the second in a higher level, functional style that leverages D3.\n\nIn this notebook, we'll take a look at programming with Javascript in the Observable notebook. This is by no means a complete compilation but just a brief introduction to a few of things we'll definitely be using. We'll certainly learn more as we go along.\n\nBefore we start, let me point out that Observable has [extensive documentation right on site](https://observablehq.com/@observablehq/documentation).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":245,"value":"## Observable's special sauce\n\nWe start with a couple major tools that make life easy in Observable.\n\n### Reactivity\n\nOne of the most distinctive feature of programming in Observable is its *reactivity*; that is, changes in one cell immediately affect any other cells that depend upon the initial cell. Let's look at an example, where we \n\n- define an initial real number ${tex`x_0`},\n- define the function ${tex`f(x) = 4x(1-x)`},\n- define an integer ${tex`n`} (a littler later down the notebook, actually), and\n- iterate the function ${tex`n`} times to generate a list of iterates.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"x0 = 0.123","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"orbit = {\n let x = x0;\n let orbit = [x0];\n for (let i = 0; i < n; i++) {\n x = f(x);\n orbit.push(x);\n }\n return orbit;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"// Verbose function definition\nfunction f(x) {\n return 4 * x * (1 - x);\n}\n\n// Equivalent arrow notation\n// f = (x) => 4 * x * (1 - x)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"Try fiddling with the definition of `x0` or `f` and see what happens. We'll see where `n` is defined in the next section.\n\nNote also that Javascript cells can be one liners or long scripts themselves. If it is a script, you often need a return value to reference.\n\nThe cells in an Observable notebook run in so-called *topological order*; that is, any cell whose definition depends upon the value of another cell won't run until the value of the other cell is available. The cell named `orbit` above, for example, won't evaluate until `n`, `x0`, and `f` have all evaluated. We can visualize this order using a dependency graph. A small portion of the dependency graph for this notebook looks like so:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":867,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"The fact that `orbit` depends on `n`, `x0`, and `f` is indicated by the arrows in the upper right portion of the diagram. Most of the nodes in this portion of the graph correspond to nodes whose names you can actually find in the notebook's code. There are also four nodes corresponding to predefined objects in Observable, namely \n\n- `tex`,\n- `inputs`,\n- `d3`, and\n- `Generators`.\n\nYou can read more about this in [How Observable runs](https://observablehq.com/@observablehq/how-observable-runs). I built the image above using the [Notebook visualizer](https://observablehq.com/@observablehq/notebook-visualizer). There's also a tree view on the right side of the notebook that can be quite useful for navigating large notebooks with dependencies.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":272,"value":"### Inputs\n\nObservable provides a whole family of `Inputs` that make it easy to create HTML input elements, like buttons, checkboxes, drop down menus, and more. Here's a range slider, for example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"Inputs.range([-3, 3])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"If we would like another cell to depend on the *value* of an input, we can use the `viewof` operator. Here's the definition of `n` from the iteration example above:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":296,"value":"viewof n = Inputs.range([0, 20], { value: 10, step: 1, label: tex`n:` })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"Note that `n` appears in the dependency graph we saw just a bit ago and that *any* cell that depends on the value of `n` will reevaluate when the slider value changes:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":314,"value":"n ** 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"We'll learn a lot more about reactivity and inputs before our first project. For the moment, I just wanted an intro level understanding of these things as we move through our introduction.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"## Strings and string template literals\n\nStrings are a fundamental data type in any computer language. There are two or three delimiters for strings in Javascript:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"double_quoted = \"I'm doing great!\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"single_quoted = 'I\\'m doing \"great\"!'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"template_literal = `I'm doing \"great\"!\nReally, I'm really doing **great**!!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"Double and single quoted strings are really just two ways to represent the same thing. It's nice to have both so you can avoid escaping one by using the other, as in the `single_quoted` example.\n\nThe template literal, which uses the back tick \\` delimiter, is something else entirely. It allows multi-line strings, as shown above, and much more. It's called a *template* literal, because it allows the use of variables which are then inserted into the template. For example, an occurrence of `\\${n}` in a template literal will be replaced with the value of `n`, like so:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":329,"value":"`Let's iterate ${n} times`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"### Tagged templates\n\nTemplate literals can be *tagged*; the syntax looks like so:\n\n tag`String with \\${variables}`\n\nA tag is simply a Javascript function that transforms the string following specified protocols. Observable provides several predefined tags including \n\n- `html`: Interprets a string as HTML and returns an HTML element,\n- `md`: Interprets a string as Markdown and returns an HTML element, and\n- `tex`: Interprets a string as ${tex`\\LaTeX`} and returns typeset mathematics. This comes in two flavors:\n - ${html`tex\\`simple_math\\``} - for inline math and\n - ${html`tex.block\\`more complicated math\\``} - for display math.\n\nMarkdown and HTML cells, in fact, are really just template literals that are passed to `md` or `html` tag for formatting. Furthermore, we can nest these things, using \n\n \\${this notation}\n\nto great effect. For example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":397,"value":"If ${tex`n=${n}`}, then\n${tex.block`\\sum_{i=1}^{n} i = \\sum_{i=1}^{${n}} i = \\frac{n(n+1)}{2} = \\frac{${n}\\times${n+1}}{2} = ${n*(n+1)/2}.`}","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":494,"value":"## Functions\n\nAs already mentioned, functions can be defined verbosely, as in:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":496,"value":"function f1(x) {\n return x ** 2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"or using a more compact, arrow function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":516,"value":"f2 = (x) => x ** 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"If we evaluate either of these at `x=2`, we should get 4:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":521,"value":"f1(2) == 4 && f2(2) == 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"### Scope\n\nAnytime we use a `{ block }`, including in a function definition, we should declare local variables using `let` or `const` so that they are local to the block. Here's a function, called `iterate`, that accepts another function `f`, a real value `x0`, and an integer `n` that iterates `f` from `x0` `n` times and returns the resulting list of numbers`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":560,"value":"function iterate(f, x0, n) {\n let x = x0;\n const output = [x];\n for (let i = 0; i < n; i++) {\n x = f(x);\n output.push(x);\n }\n return output;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"Note that `f`, `x0`, `n`, `x`, and `output` are all local to `iterate`, even if they appear elsewhere in the notebook:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":562,"value":"iterate((x) => x ** 2 - 1, 0.2, 15)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"The same is true for cell blocks and loops.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":576,"value":"sum_result = {\n let n = 10; // local\n let s = 0;\n let i = 2;\n for (let i = 0; i <= n; i++) {\n // i is local and runs 0 to 10 here.\n s = s + i;\n }\n // i = 2 out here.\n return [s, i * s];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"There are [three reserved words](https://www.youtube.com/watch?v=LE_AFhuHsew) for declaring variables in Javascript:\n\n- `let` and\n- `const`.\n\nA variable defined with `let` can be reassigned while a variable defined with `const` cannot. Both `let` and `const` respect the scoping rules described above. The other identifier used for variable declaration places the variable in the global context and we will not discuss that here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":489,"value":"## Arrays\n\nArrays can be defined in Javascript like so:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":491,"value":"A = [1, 2, 3, true, false, \"good\", \"bad\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"Arrays are zero-indexed, thus:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":540,"value":"A[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"Arrays have a number of methods, including `slice`, which grabs a slice by index:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":545,"value":"A.slice(2, 4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"`map`, which applies a function to every element:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":538,"value":"A.map((x) => x ** 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"and `filter`, which accepts a Boolean function and returns an array with the false values removed:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":554,"value":"A.filter((v) => !isNaN(v))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"The `map` and `filter` results seem to indicate that `true` and `false` are numeric, perhaps `1` and `0`. We might need to be more careful with these sometimes:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":504,"value":"A.filter((v) => !isNaN(v) && v !== true && v !== false)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"false == 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"The elements of an array can be joined to form a string:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":906,"value":"A.join(\" -- \")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"Arrays also have a few more basic properties, like `length`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":896,"value":"A.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"### D3 methods for arrays\n\nIn addition to the standard array methods, D3 offers additional tools for dealing with arrays.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":727,"value":"// Generate some random numeric data\nnumeric_data = d3.range(20).map(() => d3.randomNormal(10, 2)())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"// I recommend that you use d3.sort, rather than the\n// built in array method A.sort()\nd3.sort(numeric_data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"// The same goes for finding maxima\nd3.max(numeric_data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"// You can also find the min and max values simultaneously\nd3.extent(numeric_data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"## Objects\n\nBasic objects in Javascript look like so:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":676,"value":"my_object = ({ a: 1, b: \"two\", c: \"red\", \"three part key\": 3 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"It's a little odd that we need to wrap the object in parentheses. That's a by-product of the fact that Observable interprets code blocks as automatically evaluated function; thus, we need some way to distinguish object definitions.\n\nAt any rate, we can access their values in the obvious ways:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":683,"value":"[my_object.b, my_object[\"three part key\"]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"We'll learn a lot more about objects as we go along, as we'll use them quite regularly. Objects are often used to indicate optional function arguments, as we saw when we defined `n` using `Inputs.range` above. Furthermore, data is often represented using an array of objects, like so:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":702,"value":"data = [\n { age: 19, height: 5.51, weight: 160 },\n { age: 26, height: 6.2, weight: 174 },\n { age: 24, height: 6.33, weight: 166 },\n { age: 25, height: 5.42, weight: 169 },\n { age: 22, height: 5.53, weight: 158 },\n { age: 20, height: 6.06, weight: 170 },\n { age: 26, height: 5.34, weight: 166 },\n { age: 28, height: 6.13, weight: 175 },\n { age: 24, height: 5.88, weight: 173 },\n { age: 23, height: 5.83, weight: 179 }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"The D3 techniques that we learned in the previous section work great on this type of data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":721,"value":"// Sort by age\nd3.sort(data, (o) => o.age)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"Of course, we can use standard array methods that we defined earlier to filter this data, like so:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":707,"value":"filtered_data = data.filter((o) => o.age < 24)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"We can check the number of elements that satisfy the criteria:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":715,"value":"filtered_data.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"## Putting a few things together\n\nThe function below incorporates several of the ideas above into one compact little package. It accepts data represented as an array of objects like the one in the previous section and returns a Markdown tagged template listing the data in a bulleted list:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":768,"value":"function list_object_info(data_array) {\n let rows = data_array.map(\n (O) => `- Age: ${O.age}, height: ${O.height}, weight: ${O.weight}`\n );\n return md`${rows.join(\"\\n\")}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"Here it is in action:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":772,"value":"list_object_info(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"You're going to write something a bit like this in the following exercise.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":423,"value":"## Exercise:\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":443,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":801,"value":"viewof name = {\n let names = d3\n .sort([\n \"\",\n \"Audrey\",\n \"Bryan\",\n \"Eric\",\n \"Eli\",\n \"Ben J\",\n \"Nicholas\",\n \"Chase\",\n \"Benjamin K\",\n \"Patt\",\n \"Solomon\",\n \"Jacob\",\n \"Chris\",\n \"Asher\",\n \"Mat\",\n \"Drew\"\n ])\n .map((s, i) => ({ name: s, seed: i }));\n\n return Inputs.select(names, {\n format: (o) => o.name,\n value: names[0],\n label: \"Name:\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"{\n if (name.seed > 0) {\n let source = d3.randomLcg(name.seed / 14);\n return md`Your data is:\n\n ${JSON.stringify(\n d3.range(50).map(() => ({\n x: d3.randomNormal.source(source)()(),\n type: d3.randomUniform.source(source)()() < 0.5 ? \"good\" : \"bad\"\n }))\n )\n .replace(/\"x\":/g, \"x: \")\n .replace(/,\"type\":/g, \", type: \")\n .replace(/{/g, \"\\n {\")\n .replace(\"}]\", \"}\\n ]\")}`;\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"As before, you should create a private notebook in our team account and share it with me once you've solved the problem.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 34:"$33:body"