2c:null 2d:["$","title",null,{"children":"Untitled | Xing Li | Observable"}] 32:[{"id":"f1f1344c5afd87a7d173bcfc688ba86da5588220c84ca31d62db89d871459beb953cc9b864301a350744e637e9caff4107edebe51f88687fec6bf96903bde65e","href":"https://static.observableusercontent.com/files/f1f1344c5afd87a7d173bcfc688ba86da5588220c84ca31d62db89d871459beb953cc9b864301a350744e637e9caff4107edebe51f88687fec6bf96903bde65e","name":"d3.json","type":"application/octet-stream","lastModified":1618638594822.388,"size":21848},{"id":"8a379ac0daa308986d7d2d87b4529bde103501de62ec6317ea45edeb99b80c8e8cf2dd006e9511ca611ff476f133a9b303ce756f46f70c82977e31ab38c5ba90","href":"https://static.observableusercontent.com/files/8a379ac0daa308986d7d2d87b4529bde103501de62ec6317ea45edeb99b80c8e8cf2dd006e9511ca611ff476f133a9b303ce756f46f70c82977e31ab38c5ba90","name":"brand-2.png","type":"image/png","lastModified":1618846986893.057,"size":47846},{"id":"191e797e3a43d8d105484aab6c483da50decaa5add3b880c4d247a061c1101552bef632360483da48aaaae7d738b7282af1e19c38d15f286d1d4442492f35ec9","href":"https://static.observableusercontent.com/files/191e797e3a43d8d105484aab6c483da50decaa5add3b880c4d247a061c1101552bef632360483da48aaaae7d738b7282af1e19c38d15f286d1d4442492f35ec9","name":"99999.htm","type":"text/html","lastModified":1620531172768.958,"size":17}] 30:{"id":"83cb046e94bad30d","slug":"introduction-to-imports","title":"","thumbnail":"c368c53cd181b775ea2c2f3b1d372aa7136cfd310746744337783b9b9e3a70a8","access_level":"public","create_time":"$D2021-04-17T05:49:54.822Z","update_time":"$D2021-05-09T05:56:09.008Z","view_time":null,"first_public_time":"$D2021-04-17T05:50:02.312Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"37533a4ea4d6662e","login":"lixing","name":"Xing Li","avatar_url":"https://avatars-next.observableusercontent.com/1f21fc0fa95bed0d07cbf426d18015f1adccd82533294cb8a9e556e43db6143e","tier":"starter_2024","bio":""},"version":746,"publish_version":746,"role":null,"authored":false,"authors":[{"type":"individual","id":"9c50929b51577d7b","login":"lixing","name":"Xing Li","avatar_url":"https://avatars-next.observableusercontent.com/1f21fc0fa95bed0d07cbf426d18015f1adccd82533294cb8a9e556e43db6143e","tier":null,"bio":""}],"members":[{"type":"individual","id":"9c50929b51577d7b","login":"lixing","name":"Xing Li","avatar_url":"https://avatars-next.observableusercontent.com/1f21fc0fa95bed0d07cbf426d18015f1adccd82533294cb8a9e556e43db6143e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"","cells":[{"id":734,"value":"FileAttachment(\"brand-2.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"FileAttachment(\"备忘.txt\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`# Introduction to Imports\n\nObservable lets you quickly reuse code by importing named cells from other notebooks.\n\nTo demonstrate, take my notebook of color scales used to visualize quantitative data. This notebook defines a *ramp* function that returns a canvas for a given *color* function, where the *color* function returns a color for a given ${tex`t \\in [0,1]`} from left to right. To create the dreaded angry rainbow, import and call *ramp*:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"ramp(t => `hsl(${t * 360}, 100%, 50%)`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`You could instead copy-paste the *ramp* function from that notebook into this one—it’s only a few lines of code. But imports have a few advantages.\n\nFirst, the cell you want to reuse may depend on other cells. If you copy-paste, you have to copy-paste those other cells too, and make sure that they don’t conflict with existing cells in your notebook. If you import, the dependencies are loaded automatically, so you don’t have to think about it.\n\nFor example, consider a notebook on an interrupted Sinu–Mollweide map projection that requires the D3 and TopoJSON libraries, along with geometry representing the Earth’s landmasses. You can import the map and display it without worrying about how the sausage is made.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"import {map} from \"@d3/interrupted-sinu-mollweide\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"map","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"md`Second, by importing, it’s easier to keep the reused code up-to-date. Imports target the latest published version, so if I improve my map notebook, the new map will automatically appear here.\n\n(The risk of importing the latest version is that your notebook may break if the imported notebook changes in a non-backwards-compatible way. Observable also supports versioned imports, however version numbers aren’t currently exposed in the user interface, so for now you must specify the version manually. In the future, imports will be pinned to the latest published version at the time you write the import statement, and can be re-pinned on-demand.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"md`Third, and most excitingly, Observable imports let you inject dependencies using import-with! This lets you “rewrite” imported code as you might do when copy-pasting, without the problems of code duplication.\n\nConsider my D3 treemap notebook that visualizes the Flare dataset. To reuse this treemap implementation to visualize a different dataset, inject a new definition of *data* in the with clause on import:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"import {chart as treemap}\nwith {treemap_data as data}\nfrom \"@d3/treemap\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"treemap","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"treemap_data = FileAttachment(\"d3.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"md`As long as the new data conforms to the same shape as the old data (here, a tree of objects with *children* and *value* properties), you can reuse the existing code without copy-paste and the terrible challenge of designing a reusable chart abstraction!\n\nBest of all, because [Observable is reactive](/@observablehq/how-observable-runs), you can even inject dynamic definitions into code that was previously static!\n\nFor example, below is a histogram of a synthetic beta distribution using ${tex`\\alpha`} and ${tex`\\beta`} values that are controlled by sliders. Whenever ${tex`\\alpha`} or ${tex`\\beta`} change, Observable automatically updates the histogram—even though the implementation is reused from a static histogram of unemployment rates.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"import {chart as histogram}\nwith {histogram_data as data}\nfrom \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"viewof alphabeta = {\n const form = html``;\n form.oninput = () => {\n form.value = [form.a.valueAsNumber, form.b.valueAsNumber];\n form.oa.value = form.a.valueAsNumber;\n form.ob.value = form.b.valueAsNumber;\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"histogram","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"histogram_data = new Array(10000).fill().map(() => randb(...alphabeta))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"md`Here are a few additional nuances of imports:\n\nLike [ES imports](http://exploringjs.com/es6/ch_modules.html), Observable imports are live bindings. If you import a value that changes over time ([a generator cell](/@mbostock/generator-cells-functions-and-objects)), such as a countdown to a certain date in the future, the imported value will change over time, too.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"import {interval} from \"@mbostock/countdown\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"interval","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"md`You can only import named cells, and you must name each cell you want to import explicitly. No anonymous cells allowed; if a notebook uses side effects, as is sometimes common with anonymous cells, you must name and import the cells with side effects, too.\n\nImported cells are lazily evaluated: if you import a cell but you don’t reference it anywhere, the code won’t run. Try uncommenting the cell below and then hit Shift-Enter. Notice that the generator *i* begins at zero—it doesn’t start until referenced.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"// i","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import {i} from \"@mbostock/generator-cells-functions-and-objects\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`Also like ES imports, only the cells you import are available (*bound*) in the local notebook, even if those cells depend on other cells. Those dependent cells are *run*—they’re just not exposed in the scope of the local notebook.\n\nYou can use circular imports, but only if you don’t use the *with* clause when importing. Import-with effectively creates a local copy of the imported module with your overrides, so a circular import-with would create an infinitely recursive module, a bit like seeing your reflection in a mirrored room.\n\nYou can import the same notebook multiple times and references will resolve exactly. (Note, however, that the versions of the imported notebooks must also match, or they are considered different notebooks.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"import {map as map2} from \"@d3/interrupted-sinu-mollweide\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"map === map2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"md`If you find yourself using lots of imports in your notebooks, you might find our [import visualizer](/@observablehq/notebook-import-visualizer) helpful for debugging. For example, here are the imports used by this notebook. *So meta!*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"graph","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"shared = md`### Shared and private imports\n\nYou can import from shared (non-public) notebooks, too:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"import {hello} from \"1b9f514e4db7af3a\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"hello","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"md`You can even import from private notebooks; however, if you publish a notebook that imports a private notebook, the imported private notebook won’t be accessible to your readers, which may prevent your notebook from functioning as intended. Don’t forget to share or publish your imports before you publish.\n\nLastly, imports aren’t intended to replace libraries (like [lodash](https://lodash.com) or [D3](https://d3js.org)); if you want to design, build and support a reusable library, go for it and publish to npm! But if you want a lightweight way to reuse code across notebooks without resorting to copy-paste, reach for import.\n\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"url = \"https://api.observablehq.com/@observablehq/introduction-to-imports.js?v=3\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"orient = \"LR\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"import {graphic as graph} with {url, orient} from \"@observablehq/notebook-import-visualizer\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"function randb(alpha, beta) {\n const u = randg(alpha);\n return u / (u + randg(beta));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"// Returns a gamma deviate by the method of Marsaglia and Tsang.\nfunction randg(shape) {\n let oalph = shape, a1, a2, u, v, x, mat;\n if (!shape) shape = 1;\n if (shape < 1) shape += 1;\n a1 = shape - 1 / 3;\n a2 = 1 / Math.sqrt(9 * a1);\n do {\n do {\n x = randn();\n v = 1 + a2 * x;\n } while (v <= 0);\n v = v * v * v;\n u = Math.random();\n } while (\n u > 1 - 0.331 * Math.pow(x, 4) &&\n Math.log(u) > 0.5 * x * x + a1 * (1 - v + Math.log(v))\n );\n if (shape === oalph) return a1 * v; // alpha > 1\n do u = Math.random(); while (u === 0); // alpha < 1\n return Math.pow(u, 1 / oalph) * a1 * v;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"// Returns a normal deviate (mu=0, sigma=1).\nfunction randn() {\n let u, v, x, y, q;\n do {\n u = Math.random();\n v = 1.7156 * (Math.random() - 0.5);\n x = u - 0.449871;\n y = Math.abs(v) + 0.386595;\n q = x * x + y * (0.19600 * y - 0.25472 * x);\n } while (q > 0.27597 && (q > 0.27846 || v * v > -4 * Math.log(u) * u * u));\n return v / u;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"FileAttachment(\"99999.htm\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"FileAttachment(\"99999.htm\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"