30:[{"id":"b96d6a8fd365a09cdd83b718d999227a53fea368b8ebaa5338129be456f064e9e0b07732b72d83ce8038442dcad5304580605198223461fa9a30cbb7d937313a","href":"https://static.observableusercontent.com/files/b96d6a8fd365a09cdd83b718d999227a53fea368b8ebaa5338129be456f064e9e0b07732b72d83ce8038442dcad5304580605198223461fa9a30cbb7d937313a","name":"aapl.json","type":"application/json","lastModified":1597422864243.807,"size":64937},{"id":"c2d72f71639c1c56e3af4808f954f501664c65c7ced3abf0f4b1f38bf609eba090132293780051171e9f11d4100204ced1db0cf12094ff28c7c57ce059dd4e26","href":"https://static.observableusercontent.com/files/c2d72f71639c1c56e3af4808f954f501664c65c7ced3abf0f4b1f38bf609eba090132293780051171e9f11d4100204ced1db0cf12094ff28c7c57ce059dd4e26","name":"us-popl-2016.json","type":"application/json","lastModified":1597585073920.141,"size":275892},{"id":"a198c0a09ddc386fa6e2e1de2a231e2f47c45eee8d3e970ae037b74117d9ac7a79c4d39bae9a352d1f7a495f11a200647e66a9efdbb96e8036ffddfeff736d9d","href":"https://static.observableusercontent.com/files/a198c0a09ddc386fa6e2e1de2a231e2f47c45eee8d3e970ae037b74117d9ac7a79c4d39bae9a352d1f7a495f11a200647e66a9efdbb96e8036ffddfeff736d9d","name":"diamonds_xy.json","type":"application/json","lastModified":1597585730033.662,"size":1052508},{"id":"9de54cad0305477f3b93ee67dd33aab773fa64f2b7a12d6926252e717d9e294add18b9e8ceddd8ba99e4638451ef863cab27740504254149c3ebbf8253baec3d","href":"https://static.observableusercontent.com/files/9de54cad0305477f3b93ee67dd33aab773fa64f2b7a12d6926252e717d9e294add18b9e8ceddd8ba99e4638451ef863cab27740504254149c3ebbf8253baec3d","name":"mtcars-mpg.json","type":"application/json","lastModified":1597584984200.104,"size":1174},{"id":"4b21d95fea22db370de2e7d5abb102ce0cc70b60dbadcba04b39b6b5e9534b43282e21e870209d148b6a03a54df9c94f6e7667b798deb52f35f5524b73dfb5b6","href":"https://static.observableusercontent.com/files/4b21d95fea22db370de2e7d5abb102ce0cc70b60dbadcba04b39b6b5e9534b43282e21e870209d148b6a03a54df9c94f6e7667b798deb52f35f5524b73dfb5b6","name":"d3.json","type":"application/json","lastModified":1597583996370.664,"size":14458}] 2e:{"title":"Gallery ft. data","cells":[{"id":2723,"value":"md`# Gallery ft. data\n\nHold on, this might take a moment to load. ⏳\n\nThe [code below](#gallery) imports every notebook in the [D3 Gallery](/@d3/gallery) that contains a \\`chart\\` cell and a \\`data\\` cell. Having done so, it sifts through them, looking for visualisations that might suit the structure of our locally defined data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2725,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`The inner workings here borrow from (and potentially abuse) [Mike Bostock's Dataflow](https://observablehq.com/@mbostock/dataflow). The [method for comparing data structures](#vaguelySimilar) is naive and errs on the side of generosity. With a bit of tweaking, and a few more [tidy templates](https://observablehq.com/@d3/stacked-area-chart-via-d3-group), this approach might serve as the basis for something akin to Rawgraphs/Flourish/Datawrapper.\n\nTry the sample datasets below (or [add your own](/@observablehq/introduction-to-data)) to take it for a spin. ⤸`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2308,"value":"html`\n\n

Select a sample dataset from @observablehq/datasets

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2092,"value":"html` { mutable all = true }}>All charts\n { mutable all = false }}>Only charts with similar data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1674,"value":"html`

${gallery.filter(n => all || vaguelySimilar(data, n.data)).map(preview)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1415,"value":"importCell(\"chart\", notebook.definition, { data: data })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2535,"value":"md`If your import fails, or you get a funky looking chart, make sure to compare your data to the original. Some notebooks rely on additional properties such as \\`data.columns\\` that might throw a spanner in the works.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2537,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":2538,"value":"notebook.data","pinned":true,"hidden":false,"mode":"ojs"},{"id":648,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"Runtime = (await require(\"@observablehq/runtime@4\")).Runtime","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"gallery = fetch(\"https://api.observablehq.com/@d3/gallery.js?v=3\")\n .then(r => r.text())\n .then(t => t.match(/\\{\\n\\s{2}path([\\s\\S]*?)\\}/g))\n .then(t => t.map(d => JSON.parse(d.replace(/\\n\\s{2}/g, \"\\\"\").replace(/\\:/g, \"\\\":\"))))\n .then(a => Promise.all(a.map(async d => ({...d, definition: (await import(`https://api.observablehq.com/${d.path}.js?v=3`).then(m => m.default).catch(() => false))}))))\n .then(m => m.filter(({definition}) => definition))\n .then(m => m.reduce(async (acc, n) => await getCell(\"data\", n.definition, true) && await getCell(\"chart\", n.definition, true) ? [...await acc, n] : acc, []))\n .then(m => Promise.all(m.map(async d => ({...d, data: await getCell(\"data\", d.definition)}))))\n .then(f => f.sort((a, b) => a.title.localeCompare(b.title)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":934,"value":"mutable notebook = gallery.filter(n => vaguelySimilar(data, n.data))[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1375,"value":"async function getCell(cell, definition, exists = false) {\n const runtime = new Runtime();\n const module = runtime.module(definition);\n const value = exists ? \n await module.value(cell).then(() => true).catch(() => false) :\n await module.value(cell);\n runtime.dispose();\n return value;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":618,"value":"// Adapted from https://observablehq.com/@mbostock/dataflow\nasync function importCell(\n cell, // e.g., \"chart\"\n definition, // e.g., \"@d3/bar-chart\"\n injections = {} // e.g., {data: [{name, value}, …]}\n) {\n const runtime = new Runtime();\n const main = runtime.module();\n for (const name in injections) {\n main.define(name, [], () => injections[name]);\n }\n const imported = runtime.module(definition);\n const derived = imported.derive([...Object.keys(injections)], main);\n return Generators.observe((notify) => {\n main.variable({\n fulfilled(value) { notify(value); },\n rejected(value) { notify(Promise.reject(value)); }\n }).import(cell, derived);\n return () => runtime.dispose();\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2100,"value":"mutable all = false;","pinned":true,"hidden":false,"mode":"ojs"},{"id":930,"value":"html = (await require(\"htl@0.2\")).html","pinned":true,"hidden":false,"mode":"ojs"},{"id":932,"value":"function preview(notebook) {\n let { path, title, author, thumbnail } = notebook\n return html` (event.currentTarget.firstElementChild.style.borderColor = \"#1b1e23\")} onmouseout=${event => (event.currentTarget.firstElementChild.style.borderColor = \"#e8e8e8\")} onclick=${event => { mutable notebook = notebook; }}>\n

${title}

\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2226,"value":"// https://stackoverflow.com/a/35047888\nfunction objectsHaveSameKeys(...objects) {\n const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);\n const union = new Set(allKeys);\n return objects.every(object => union.size === Object.keys(object).length);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1692,"value":"function vaguelySimilar(...datasets) {\n let similar = false;\n if(datasets.every(obj => obj instanceof Map)) {\n // If the datasets are maps then pass their values\n similar = vaguelySimilar(...datasets.map(obj => [...obj.values()][0]));\n } else if (datasets.every(obj => Array.isArray(obj))) {\n if (datasets.every(obj => Array.isArray(obj[0]))) {\n // Give arrays of arrays the benefit of the doubt\n similar = true;\n } else {\n // If the datasets are arrays of objects then pass their first elements to objectsHaveSameKeys\n similar = objectsHaveSameKeys(...datasets.map(obj => obj[0]));\n }\n } else {\n similar = objectsHaveSameKeys(...datasets);\n }\n return similar;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2264,"value":"datasets = new Map([\n [\"Apple stock price\", FileAttachment(\"aapl.json\").json().then(res => res.map(d => ({...d, date: new Date(d.date)})))],\n [\"Diamonds\", FileAttachment(\"diamonds_xy.json\").json()],\n [\"D3 package hierarchy\", FileAttachment(\"d3.json\").json()],\n [\"mtcars MPG\", FileAttachment(\"mtcars-mpg.json\").json()],\n [\"US population 2016\", FileAttachment(\"us-popl-2016.json\").json()],\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2276,"value":"mutable data = datasets.get(\"Apple stock price\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}