29:null 2a:["$","title",null,{"children":"Working with ObservableHQ | Christian Moore | Observable"}] 2f:T4a1,ObservableHQ is a [computational notebook](https://en.wikipedia.org/wiki/Notebook_interface) written for Javascript programming, primarily with the D3js library for visualizations. On September 1st 2026, they released a [new version of ObservableHQ](https://observablehq.com/@observablehq/notebooks-user-guide), I will try to evaluate how to adapt my notebooks as we go. Observable lets you create text cells that use [Markdown](https://github.com/adam-p/markdown-here/wiki/markdown-cheatsheet) (like this cell) or Javascript cells. The earlier versions of Observable had their own flavor of JS. There were a few differences between working within an Observable cell and a regular script file. They provide some information about the differences in this [collection of Observable Notebooks](https://observablehq.com/@observablehq/observable-javascript?collection=@observablehq/javascript-in-observable). This format is now called `ojs` to be differentiated from `js`. You can also create cells in HTML format which can be useful for embedding videos. In addition, you can import [data files](https://observablehq.com/@observablehq/introduction-to-data) directly into the notebook.30:T4b9,If we are not sure about which column to use, we can scan all the values for empty strings and add a new column marking each record if it is "good" or "bad". Here is an example of using _map_ to create that additional column:

data_diff = data.map(x =>
                     {
                       let x_copy = { ...x};
                       for (let key in x_copy)
                        { if (x_copy[key] == "")
                          {
                            x_copy.bad = true;
                            break;
                          }
                        }
                       if (!('bad' in x_copy)) x_copy.bad = false;
                      return x_copy;
                     })

In this example, I chose not to change the objects in the _data_ array by adding another property (often, it would be desirable to change them directly) but to create copies for the objects. In this code `let x_copy = { ...x};` I use the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) which will 'unravel' all of the keys and values of the original object, then the brackets 'collect' them back into a new object.31:[{"id":"33c1528a757659d321afd7d77928134bd6897bb59c7f60849da5ccaaa94aa4ac78cb0cc56172d619170a74d983b4c3656c61a240a13c2877a5f8da9542e8bb3c","href":"https://static.observableusercontent.com/files/33c1528a757659d321afd7d77928134bd6897bb59c7f60849da5ccaaa94aa4ac78cb0cc56172d619170a74d983b4c3656c61a240a13c2877a5f8da9542e8bb3c","name":"fileattach-1.png","type":"image/png","lastModified":1757584766351.584,"size":225633},{"id":"fe7f00be402b177a98a261ccf8c8e8df29be0236b3903dd01375bc9dc31415f6936d3133ec94dde418a0012d560f758902cdf9f58e38a6135c22e3c9e53f093c","href":"https://static.observableusercontent.com/files/fe7f00be402b177a98a261ccf8c8e8df29be0236b3903dd01375bc9dc31415f6936d3133ec94dde418a0012d560f758902cdf9f58e38a6135c22e3c9e53f093c","name":"Survey 2026 .csv","type":"text/csv","lastModified":1789461197588,"size":3914}] 2d:{"id":"269fe18a41889001","slug":"working-with-observable-hq","title":"Working with ObservableHQ","thumbnail":"adebe928669a5e885c0d79d44364fd3e3018f1103f2e9b58f8a39de60135b2ef","access_level":"public","create_time":"$D2026-09-15T20:12:27.472Z","update_time":"$D2026-09-24T23:51:38.210Z","view_time":null,"first_public_time":"$D2026-09-25T01:01:48.841Z","has_unpublished_edits":null,"fork":{"id":"0e0ca030a30cc3b3","slug":"working-with-observable-hq","title":"Working with ObservableHQ","owner":{"id":"a03ba8d7c36f4ece","login":"nurki-kirshenbaum-ws","name":"Nurki Kirshenbaum's Workspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b5ca32f4163d4864","login":"christian-moore","name":"Christian Moore","avatar_url":"https://avatars-next.observableusercontent.com/3aae35cc0204ca11df5d7044f368ef0540fe07712880cdaee1a8b6fd598e29c9","tier":"free_2026"},"version":338,"publish_version":338,"role":null,"authored":false,"authors":[{"type":"individual","id":"d025da308015c262","login":"christian-moore","name":"Christian Moore","avatar_url":"https://avatars-next.observableusercontent.com/3aae35cc0204ca11df5d7044f368ef0540fe07712880cdaee1a8b6fd598e29c9","tier":null}],"members":[{"type":"team","id":"b5ca32f4163d4864","login":"christian-moore","name":"Christian Moore","avatar_url":"https://avatars-next.observableusercontent.com/3aae35cc0204ca11df5d7044f368ef0540fe07712880cdaee1a8b6fd598e29c9","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Working with ObservableHQ","cells":[{"id":0,"value":"# Working with ObservableHQ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"Every cell has a source box and an output box. If a cell is __*unpinned*__, you can open the source box by clicking the blue bar on the left side. When the source box is __*pinned*__ it is visible all the time (this can be set from the drop-menu attached to the cell type on the cell's right.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"

In addition

You can create cells that are HTML and put HTML tags in them.

Like this cell.

Note how it is wrapped in a div for some styling.

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"\\text{You can even have a LaTeX formated cell if you need to share some mathematical formula like:}\n\\\\\nf(x)=\n\\begin{cases}\n12^{x+3} & \\text{if } x > 0 \\\\\n\\frac{x+3}{12} & \\text{if } x \\leq 0\n\\end{cases}","pinned":true,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"# Get Some Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"If we need to, we can define data directly in a cell, for example (in Observable Javascript ojs):\n```\npowers = [\n {name: \"Invisibility\", value: 3},\n {name: \"Flying\", value: 14},\n {name: \"Super strength\", value: 0},\n {name: \"Telekinesis\", value: 15},\n {name: \"Talk to animals\", value: 2}\n]\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"powers = [\n {name: \"Invisibility\", value: 3},\n {name: \"Flying\", value: 14},\n {name: \"Super strength\", value: 0},\n {name: \"Telekinesis\", value: 15},\n {name: \"Talk to animals\", value: 2}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"In plain JS you will need to use `let` or `const` to define variables, they will not show automatically like in ojs, but wrapping them in `display()` will make them show. It would be:","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"const powersJS = display([\n {name: \"Invisibility\", value: 3},\n {name: \"Flying\", value: 14},\n {name: \"Super strength\", value: 0},\n {name: \"Telekinesis\", value: 15},\n {name: \"Talk to animals\", value: 2}\n]);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"The notebooks for this class were originally written in ojs, and I will edit them as class goes on. Pay attention to if a cell is js or ojs if you are copying it to use in your code and choose the correct cell type.\n\nIf any code cells are left in ojs format and you would like to use the js version, you may need to look it up yourself.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"We can also upload files to the notebook. I used the paperclip icon on the menu to the right of the notebook to add the file attachment _Survey 2026.csv_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"image = FileAttachment(\"fileattach-1.png\").image({width: 300, style: \"border: 1px solid black\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"We can read the file we attached into an array using (the ojs version)\n```\nfromFile = FileAttachment(\"Survey 2026 .csv\").csv()\n```\nThis will turn every row to an element in the array that is itself an array of strings (the values from the file).\n\n[More about file attachments.](https://observablehq.com/@observablehq/file-attachments)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"fromFile = FileAttachment(\"Survey 2026 .csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"But we can also include the content of the file directly into the body of the notebook as a table by using ObservableHQ `Inputs.table()`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"Inputs.table(fromFile)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"You can also use the D3 functions for reading data. For example, to read the file from a remote repository you can use:\n\n`fromRemote = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/main/Survey 2026 .csv\")`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"fromRemote = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/refs/heads/main/Survey%202026%20.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"const data = fromRemote;","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"# Working with Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"Now that we have the data in the notebook we can manipulate it. For example, let's look at the column headers. We can do that by getting the keys of the first element in our data array. I edited the names of the columns in our original file so they are more managable.\n\n`Object.keys(data[0])`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"Object.keys(data[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"We may want to clean our data. In this case, I noticed there are several records that are missing values, for example for the \"Lat\" column. We can remove those incomplete records using a _filter_ operation:\n\n`CleanedData = data.filter(x => x.Lat != \"\")`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"CleanedData = data.filter((x) => x.Lat != \"\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"data_diff = data.map(x => \n {\n let x_copy = { ...x};\n for (let key in x_copy) \n { if (x_copy[key] == \"\") \n {\n x_copy.bad = true; \n break;\n }\n }\n if (!('bad' in x_copy)) x_copy.bad = false;\n return x_copy;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"I can clean the data by filtering using the new \"bad\" column.\n\n`CleanerData = data_diff.filter(x => !x.bad)`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"CleanerData = data_diff.filter(x => !x.bad)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"Now I can use _CleanerData_ to calculate something. For example, let's calculate the total commute time for everyone in the class. We can use _reduce_ to do that.\n\n`TotalCommute = CleanedData.reduce((total, x) =>\n total + parseInt(x.Commute), 0)`\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"TotalCommute = CleanerData.reduce((total, x) => \n total + parseInt(x.Commute), 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"Alternatively, we can use one of [D3's array functions](https://d3js.org/d3-array) to do the same thing.\n\n`d3.fsum(CleanedData, (d) => d.Commute)`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"d3.fsum(CleanerData, (d) => d.Commute)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"We can do more complicated things. The code below, for example, will create an object with the different superpowers as keys, and the count of students that chose them as values.\n\n

\nsuperpowerCount = { // this is in ojs\n  let superpowers = CleanerData.map(x => x.Superpower)\n  let unique = [...new Set(superpowers)]; // every value should only appear once\n  let count = unique.map(x =>\n                         CleanerData.reduce(\n                           (count, record) => {\n                             if (record.Superpower == x)\n                               count++;\n                             return count;\n                           }, 0))\n  return unique.reduce ( (obj, x, index) => {obj[x] = count[index]; return obj}, {});\n}\n

\n\nCan you follow the use of _map_ and _reduce_ above?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"// this is in js\nlet superpowers = CleanerData.map(x => x.Superpower)\ndisplay(superpowers);\nlet unique = [...new Set(superpowers)]; // every value should only appear once\ndisplay(unique);\nlet count = unique.map(x =>\n CleanerData.reduce(\n (count, record) => {\n if (record.Superpower == x)\n count++;\n return count;\n }, 0))\ndisplay(count);\nlet result = unique.reduce ( (obj, x, index) => {obj[x] = count[index]; return obj}, {});\ndisplay(result);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"superpowerCount = { // this is in ojs\n let superpowers = CleanerData.map(x => x.Superpower)\n let unique = [...new Set(superpowers)]; // every value should only appear once\n let count = unique.map(x =>\n CleanerData.reduce(\n (count, record) => {\n if (record.Superpower == x)\n count++;\n return count;\n }, 0))\n return unique.reduce ( (obj, x, index) => {obj[x] = count[index]; return obj}, {});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"# Practice","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"A. Use _filter_ to find the records of students that like both Soda and Sports.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"my_result = data.filter( x => x.Soda === \"Yes\" && x.Sports === \"Yes\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"B. Find the average Age of students in our class.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":151,"value":"my_average = data.reduce((total, x) => total + Number(x.Age), 0) / data.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"C. Use `d3.min()` and `d3.max()` to find the range of Heights in the class.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"d3.min(data, (x) => x.Height)\nd3.max(data, (x) => x.Height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"D. Derive a new column called _BagColorBinary_ which is marked with \"black\" when the bag has any black in it or \"not\" for every other color.\n\nYou can use a condition like `if (x.BagColor.includes(\"black\") || x.BagColor.includes(\"Black\"))` to check if a string contains the substring for \"black\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"E. Count how many students were born in each month.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W31","stdlib":"2","titling":"auto"}} 2e:"$2d:body"