29:null 2a:["$","title",null,{"children":"Learning Observable: Importing and remixing cells and notebooks | Observable | Observable"}] 2f:T41b,The term forking comes from version control systems, and essentially means making a copy of a document, and that copy knows where it came from. A forked notebook works like a completely independent copy, but because it knows which parent notebook it was derived from, it has some additional functionality. One of them is the ability to make suggestions. A good model for testing out ideas is to fork a notebook, test the ideas in the fork, and then use the [_suggest_](https://observablehq.com/@observablehq/fork-suggest-merge) feature to send the changes back to the original author. If you're familiar with git or other distributed version control systems, you would recognize this as a pull request. The owner of the original notebook can then inspect the changes and decide whether to accept the suggestion and merge the changes into their version, or ignore them. But it's also just a great way to start your work from an existing example you like, perhaps something you found on [Observable's Explore page](https://observablehq.com/explore).30:[{"id":"21a793708966e192111a05718bdc96ac9d5dfc273bf126f9a135aedec52813d8bf7872c2fb58392be66d603569c88e77b580db95b04796160d86a1219ba04f63","href":"https://static.observableusercontent.com/files/21a793708966e192111a05718bdc96ac9d5dfc273bf126f9a135aedec52813d8bf7872c2fb58392be66d603569c88e77b580db95b04796160d86a1219ba04f63","name":"lock.png","type":"image/png","lastModified":1664310897116.954,"size":1187},{"id":"ee7dd25dd576df5bb875569d361bb87dfb1ba611668cff7c9da2fad2c1406c722398642b8d46734777e24ae1cbc6e12a8c3b4224f4dac8c082ed258b67371bd0","href":"https://static.observableusercontent.com/files/ee7dd25dd576df5bb875569d361bb87dfb1ba611668cff7c9da2fad2c1406c722398642b8d46734777e24ae1cbc6e12a8c3b4224f4dac8c082ed258b67371bd0","name":"new-users-course-import-reuse.png","type":"image/png","lastModified":1670956049428.757,"size":796294},{"id":"c8069e582acced55727700536b4c2f63b464c09b68668408667e9f552f3cc031e9c8cce0c60292942234c3c22830e38f1a2af375305c46a3f64126f8efc96c64","href":"https://static.observableusercontent.com/files/c8069e582acced55727700536b4c2f63b464c09b68668408667e9f552f3cc031e9c8cce0c60292942234c3c22830e38f1a2af375305c46a3f64126f8efc96c64","name":"new-users-course-sm-imports@1.png","type":"image/png","lastModified":1671155972688.988,"size":258083},{"id":"e9db369785a154ae0bbd6dc0c9ecc0c94842e81cdd2ef3a071a3b7192cf57499d5149c0ae9e2e31eb98c023ea472651dcb44634eec160743b1c970c52070a752","href":"https://static.observableusercontent.com/files/e9db369785a154ae0bbd6dc0c9ecc0c94842e81cdd2ef3a071a3b7192cf57499d5149c0ae9e2e31eb98c023ea472651dcb44634eec160743b1c970c52070a752","name":"fork.mov","type":"video/quicktime","lastModified":1671166488895.579,"size":6580718},{"id":"f0f39ec9d424f48ad18ef1a4b0c312aa2015e7893ed7886eac6ccfb6bcca5f81919d042cd96cb46f7a55b21ef7fc6429872a5636860b44104508b7de2a2a3827","href":"https://static.observableusercontent.com/files/f0f39ec9d424f48ad18ef1a4b0c312aa2015e7893ed7886eac6ccfb6bcca5f81919d042cd96cb46f7a55b21ef7fc6429872a5636860b44104508b7de2a2a3827","name":"import101.mov","type":"video/quicktime","lastModified":1671165650728.478,"size":5921711}] 2d:{"id":"3455fc643fe664d7","slug":"learning-observable-importing-and-remixing-cells-and-note","title":"Learning Observable: Importing and remixing cells and notebooks","thumbnail":"ea2f92c594370d3d6314bc8a2bd5ec8234ace5139351cfbd2998ae86099eb969","access_level":"public","create_time":"$D2022-09-22T20:57:23.729Z","update_time":"$D2023-02-22T04:37:38.879Z","view_time":null,"first_public_time":"$D2023-01-17T23:39:55.065Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":206,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ce771552211c04ab","login":"rkosara","name":"Robert Kosara","avatar_url":"https://avatars-next.observableusercontent.com/105903f7d3ac285a1489b547eecce8f57bd15052862a307c4c2242f847d44a67","tier":null},{"type":"individual","id":"b71e24965feea6d8","login":"allisonhorst","name":"Allison Horst","avatar_url":"https://avatars-next.observableusercontent.com/323c217177f0f20e4e8ed3aa302fec1408cf22b57cbd726e37e76182d5f82a65","tier":null},{"type":"individual","id":"42520cea6c99d3c8","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":null}],"members":[{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"editor"}],"comments":[{"id":"189407a5769fc435","reply_to_id":null,"content":"change to slug?","create_time":"$D2023-01-09T18:33:06.935Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"9d100f51aa1886b2","reply_to_id":null,"content":"this CTA seems to loop back to chapter 4. Maybe it's time to take a deep breath, a pause, and create your first notebook? :)","create_time":"$D2023-01-09T18:34:52.373Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":14,"collection":{"id":"006ed01fc601e47e","slug":"intro-to-observable","title":"Learning Observable","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Learning Observable: Importing and remixing cells and notebooks","cells":[{"id":0,"value":"# Learning Observable: Importing and remixing cells and notebooks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"Notebooks on Observable can be reused in different ways. If you need only very specific parts (like a single function or dataset), you can import them piecemeal into another notebook so you don't have to recreate or copy the code in different places. If you want to base your notebook on an existing one, or you want to try out some ideas and perhaps send back suggestions to the original author, you can fork a notebook. Here's a look at how these two ways of remixing content work, and when to use which.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"## Importing \nA big strength of notebooks is that they make it easy to write components once, then reuse them in other places, for more efficient and organized data work. This is done using the `import` keyword. You could write it by hand, but it's much easier to simply copy it from a cell, using the cell menu. This also has the advantage of being less error-prone.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"\nWe've imported the `letterFrequency` chart below from [the earlier notebook about inputs](https://observablehq.com/d/ec4297da21238b6b?collection=@observablehq/intro-to-observable). It depends on a dataset and three variables that pick the letter to highlight as well as the colors of the selected and regular bars. The import brings all of those necessary values with it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"import {letterFrequency} from \"@observablehq/learning-observable-user-inputs-and-interactivity\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"This imports the cell and creates a variable of the same name. To use it in our notebook here, we can call it in this notebook:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"letterFrequency","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"If you don't like the name of the cell in the original notebook, perhaps because it has a generic name such as `data` _or_ because you already have an object stored with the same name (which isn't allowed in Observable notebooks), you can rename it directly in the import statement:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"import {formatMoney as dollars} from \"@observablehq/excel-simple-modeling\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"We can now call our imported function just like any other function:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"dollars(Math.random()*1000000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"To import multiple cells from the same notebook, add their names into the same import statement, separated by commas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"You might also notice a lock symbol

on top of a cell that contains an import from another notebook. This allows you to lock the version of the notebook that the cell is imported from. Locking the version ensures that you get the exact cell you expected, but it also means that you will not get any updates that are made to it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"## Importing external libraries\n\nIn addition to importing from other notebooks, you can also import general JavaScript modules. Observable already includes many useful libraries (D3, Plot, lodash, and more) but you might want to use one that isn't available by default.\n\nUnfortunately, there is no single standard for JavaScript modules, which can make importing a challenge at times. We have a [helpful import debugger](https://observablehq.com/@observablehq/module-require-debugger) to help with this.\n\nMany external modules are easy to import, however, such as this [library of financial functions](https://www.npmjs.com/package/financial) that we're using in [our mortgage calculator](https://observablehq.com/@observablehq/modeling-in-observable?collection=@observablehq/observable-for-excel-users).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"financial = import('https://unpkg.com/financial@0.1.3/dist/financial.esm.js?module')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"Some libraries implement their own reactivity model or interact with the DOM, which conflicts with how Observable works. The vast majority of libraries do not do that, however, and can be used without issue.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"Imports are often moved to the end of a notebook, or an appendix (since Observable's reactive dataflow means that the order of the cells doesn't matter).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"## Forking a notebook\n\nA different way of reusing a notebook, and a way to collaborate, is to _fork_ a notebook. This is done by selecting the _Fork_ option from the menu in the top right of every notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"That's it for our [Learning Observable course](https://observablehq.com/@observablehq/learning-observable-introduction?collection=@observablehq/intro-to-observable). If you're interested in learning more, check-out our other [tutorials](https://observablehq.com/tutorials) or documentation. \n\nAlso, if you're feeling stuck or have questions, the Observable community is here to help. Here are several places to reach out for help, clarification and support:\n- [Observable Community Forum](https://talk.observablehq.com/)\n- [Observable Community Slack Workspace](https://join.slack.com/t/observable-community/shared_invite/zt-1icwex7uf-ovIAS0PcuJ~ZgBToSyUs8w) (#help channel)\n- Email: support@observablehq.com","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"newUsersCourseSmImports1 = FileAttachment(\"new-users-course-sm-imports@1.png\").image({width: 200})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"